354 lines
7.9 KiB
Vue
354 lines
7.9 KiB
Vue
<template>
|
|
<div class="box" @scroll="scrollBottom">
|
|
<div class="tab">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
|
|
<el-tab-pane label="最近浏览" name="goods">
|
|
<dl>
|
|
<dd v-for="item in list" v-infinite-scroll="loadMore">
|
|
<div class="base">
|
|
<div>
|
|
<img style="width: 60px; height: 60px;" :src="item.thumbnail" class="image" />
|
|
</div>
|
|
<div class="recent_views">
|
|
<el-tooltip class="item" effect="dark" :content="item.goodsName" placement="top-start">
|
|
<a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
|
|
</el-tooltip>
|
|
|
|
<div style="display: flex;">
|
|
<div style="margin-top: 20px;">
|
|
<span style="color: red;">￥{{ item.price }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-button class="goods_store_button" type="danger" v-if="item.btnHide == 1" size="mini"
|
|
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="Underline"></div>
|
|
</dd>
|
|
|
|
</dl>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="订单列表" name="orders">
|
|
<dl>
|
|
<dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
|
|
<div class="orderlist">
|
|
<div class="order_top">
|
|
<span class="order_sn">订单号:{{ item.sn }}</span>
|
|
</div>
|
|
<div class="order_section">
|
|
<img :src="item.groupImages" alt="">
|
|
<el-tooltip class="item" effect="dark" :content="item.groupName" placement="top-start">
|
|
<span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
|
|
</el-tooltip>
|
|
<div class="orderBtn">
|
|
<el-button type="danger" class="store-button" v-if="item.btnHide == 1" size="mini"
|
|
@click="submitSendOrderMessage(item, index)" plain>发送</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="order_footer">
|
|
<span> 订单金额： <span style="color: red;">￥{{ item.orderItems[0].goodsPrice }}</span></span>
|
|
<span class="order_status"
|
|
:style="{ 'color': item.orderStatus == 'CANCELLED' || item.orderStatus == 'UNPAID' || item.orderStatus == ' TAKE' ? '#5a606b' : '#f23030' }">{{
|
|
item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus ==
|
|
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
|
|
? '已发货' : item.orderStatus == ' COMPLETED' ? '已完成' : item.orderStatus == ' TAKE' ? '待校验' : ''
|
|
}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="Underline"></div>
|
|
</dd>
|
|
</dl>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
|
|
import { mapState, mapGetters } from "vuex";
|
|
export default {
|
|
directives: {
|
|
"infinite-scroll": InfiniteScroll,
|
|
},
|
|
data () {
|
|
return {
|
|
activeName: 'goods',
|
|
btnHide: undefined,
|
|
hide: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["talkItems"]),
|
|
...mapState({
|
|
id: (state) => state.user.id,
|
|
|
|
toUser: (state) => state.user.toUser,
|
|
}),
|
|
},
|
|
components: {
|
|
"el-tag": Tag,
|
|
"el-button": button,
|
|
"el-tabs": Tabs,
|
|
"el-tab-pane": TabPane,
|
|
},
|
|
methods: {
|
|
//跳转订单列表
|
|
|
|
scrollBottom (e) {
|
|
const { scrollTop, scrollHeight, clientHeight } = e.srcElement
|
|
if (scrollTop + clientHeight >= scrollHeight) {
|
|
this.$emit('loadMore')
|
|
}
|
|
},
|
|
loadMore () {
|
|
|
|
},
|
|
// 发送消息回调事件
|
|
submitSendGoodsMessage (item) {
|
|
const context = {
|
|
id: item.id,
|
|
goodsId: item.goodsId,
|
|
thumbnail: item.thumbnail,
|
|
price: item.price,
|
|
goodsName: item.goodsName
|
|
}
|
|
const record = {
|
|
operation_type: "MESSAGE",
|
|
to: this.toUser.userId,
|
|
from: this.id,
|
|
message_type: "GOODS",
|
|
context: context,
|
|
talk_id: this.toUser.id,
|
|
};
|
|
this.$emit('sendMessage', record, context, 'GOODS');
|
|
localStorage.setItem(item.goodsId, 0)
|
|
item.btnHide = 0
|
|
},
|
|
// 发送订单列表
|
|
submitSendOrderMessage (item, index) {
|
|
console.log(item, 'item');
|
|
const context = {
|
|
sn: item.sn,
|
|
groupImages: item.groupImages,
|
|
paymentTime: item.paymentTime,
|
|
groupName: item.groupName,
|
|
flowPrice: item.flowPrice,
|
|
orderStatus: item.orderStatus
|
|
}
|
|
const record = {
|
|
operation_type: "MESSAGE",
|
|
to: this.toUser.userId,
|
|
from: this.id,
|
|
message_type: "ORDER",
|
|
context: context,
|
|
talk_id: this.toUser.id,
|
|
};
|
|
this.$emit('sendMessage', record, context, 'ORDER');
|
|
localStorage.setItem(item.goodsId, 0)
|
|
item.btnHide = 0
|
|
},
|
|
handleClick (tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
orderList: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
mounted () {
|
|
console.log(this.orderList, 'orderList');
|
|
this.btnHide = localStorage.getItem('btnHide')
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.order_status {
|
|
height: 25px;
|
|
width: 60px;
|
|
background: #ffeded;
|
|
margin-right: 20px;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.Underline {
|
|
border: 1px solid silver;
|
|
}
|
|
|
|
.recent_views {
|
|
margin-left: 13px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 260px;
|
|
}
|
|
|
|
.box {
|
|
width: 400px;
|
|
|
|
.top {
|
|
text-align: center;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: 60px;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
width: 60px;
|
|
}
|
|
|
|
.bottom {
|
|
clear: both;
|
|
text-align: center;
|
|
}
|
|
|
|
.item {
|
|
margin: 4px;
|
|
}
|
|
|
|
.left .el-tooltip__popper,
|
|
.right .el-tooltip__popper {
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
.Underline {
|
|
// border: 5px solid red;
|
|
}
|
|
|
|
.orderlist {
|
|
margin-bottom: 10px;
|
|
background: #fff;
|
|
color: #5a606b;
|
|
}
|
|
|
|
.order_top {
|
|
border-bottom: 1px solid #f2f2f2;
|
|
|
|
.order_sn {}
|
|
}
|
|
|
|
.order_section {
|
|
border-bottom: 1px solid #f2f2f2;
|
|
height: 100px;
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.order_footer {
|
|
border-bottom: 1px solid #f2f2f2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.orderGoodsName {
|
|
width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.orderSn {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.orderBtn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 15px;
|
|
position: relative;
|
|
bottom: 55px;
|
|
}
|
|
|
|
.goods_name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
|
|
/deep/ .el-tabs__item.is-top:last-child {
|
|
color: black;
|
|
}
|
|
|
|
/deep/.el-tabs__active-bar {
|
|
background-color: #f23030;
|
|
}
|
|
|
|
/deep/ .el-tabs__nav.is-top {
|
|
height: 50px;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.box {
|
|
height: 500px;
|
|
overflow: auto;
|
|
width: 350px;
|
|
}
|
|
|
|
.store-button {
|
|
background-color: white;
|
|
border-color: #F56C6C;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.goods_store_button {
|
|
background-color: white;
|
|
border-color: #F56C6C;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
right: 60%;
|
|
top: 45%;
|
|
}
|
|
|
|
.base {
|
|
margin-top: 5px;
|
|
height: 80px;
|
|
display: flex;
|
|
|
|
.price {
|
|
color: red;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.image {
|
|
height: 100px;
|
|
margin-top: 3px;
|
|
width: 100px;
|
|
}
|
|
|
|
}
|
|
|
|
.separate {
|
|
margin-top: 8px;
|
|
}
|
|
</style> |