master
程
parent
3881370b6e
commit
e8b7a85140
|
|
@ -477,6 +477,70 @@
|
||||||
"webpack-merge": "^4.2.2"
|
"webpack-merge": "^4.2.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"json5": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"postcss-loader": {
|
"postcss-loader": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-3.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-3.0.0.tgz",
|
||||||
|
|
@ -521,6 +585,28 @@
|
||||||
"ajv-errors": "^1.0.0",
|
"ajv-errors": "^1.0.0",
|
||||||
"ajv-keywords": "^3.1.0"
|
"ajv-keywords": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"vue-loader-v16": {
|
||||||
|
"version": "npm:vue-loader@16.8.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||||
|
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"hash-sum": "^2.0.0",
|
||||||
|
"loader-utils": "^2.0.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -10192,94 +10278,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"vue-loader-v16": {
|
|
||||||
"version": "npm:vue-loader@16.8.3",
|
|
||||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
|
||||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"chalk": "^4.1.0",
|
|
||||||
"hash-sum": "^2.0.0",
|
|
||||||
"loader-utils": "^2.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"ansi-styles": {
|
|
||||||
"version": "4.3.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
|
||||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-convert": "^2.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-convert": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-name": "~1.1.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-name": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"has-flag": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"json5": {
|
|
||||||
"version": "2.2.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
|
|
||||||
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"loader-utils": {
|
|
||||||
"version": "2.0.4",
|
|
||||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
|
|
||||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"big.js": "^5.2.2",
|
|
||||||
"emojis-list": "^3.0.0",
|
|
||||||
"json5": "^2.1.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"supports-color": {
|
|
||||||
"version": "7.2.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
|
||||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"has-flag": "^4.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"vue-piczoom": {
|
"vue-piczoom": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-piczoom/-/vue-piczoom-1.0.6.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-piczoom/-/vue-piczoom-1.0.6.tgz",
|
||||||
|
|
|
||||||
|
|
@ -8,26 +8,18 @@
|
||||||
<div class="shop-nav-container">
|
<div class="shop-nav-container">
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem to="/">首页</BreadcrumbItem>
|
<BreadcrumbItem to="/">首页</BreadcrumbItem>
|
||||||
<BreadcrumbItem
|
<BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
|
||||||
v-for="(item, index) in categoryBar"
|
|
||||||
:to="goGoodsList(index)"
|
|
||||||
target="_blank"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
<div class="store-collect">
|
<div class="store-collect">
|
||||||
<span class="mr_10" v-if="goodsMsg.data">
|
<span class="mr_10" v-if="goodsMsg.data">
|
||||||
<router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
|
<router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
|
||||||
goodsMsg.data.storeName
|
goodsMsg.data.storeName
|
||||||
}}</router-link>
|
}}</router-link>
|
||||||
</span>
|
</span>
|
||||||
<span @click="collect">
|
<span @click="collect">
|
||||||
<Icon
|
<Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
|
||||||
type="ios-heart"
|
|
||||||
:color="storeCollected ? '#ed3f14' : '#666'"
|
|
||||||
/>
|
|
||||||
{{ storeCollected ? "已收藏店铺" : "收藏店铺" }}
|
{{ storeCollected ? "已收藏店铺" : "收藏店铺" }}
|
||||||
</span>
|
</span>
|
||||||
<span class="ml_10" @click="IMService()">联系客服</span>
|
<span class="ml_10" @click="IMService()">联系客服</span>
|
||||||
|
|
@ -36,11 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 商品信息展示 -->
|
<!-- 商品信息展示 -->
|
||||||
<ShowGoods
|
<ShowGoods @handleClickSku="targetClickSku" v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
|
||||||
@handleClickSku="targetClickSku"
|
|
||||||
v-if="goodsMsg.data"
|
|
||||||
:detail="goodsMsg"
|
|
||||||
></ShowGoods>
|
|
||||||
<!-- 商品详细展示 -->
|
<!-- 商品详细展示 -->
|
||||||
<ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
|
<ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
|
||||||
|
|
||||||
|
|
@ -66,14 +54,14 @@ import { getIMDetail } from "@/api/common";
|
||||||
import Storage from "../plugins/storage";
|
import Storage from "../plugins/storage";
|
||||||
export default {
|
export default {
|
||||||
name: "GoodsDetail",
|
name: "GoodsDetail",
|
||||||
beforeRouteEnter(to, from, next) {
|
beforeRouteEnter (to, from, next) {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
next();
|
next();
|
||||||
},
|
},
|
||||||
created() {
|
created () {
|
||||||
this.getGoodsDetail();
|
this.getGoodsDetail();
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
goodsMsg: {}, // 商品信息
|
goodsMsg: {}, // 商品信息
|
||||||
isLoading: false, // 加载状态
|
isLoading: false, // 加载状态
|
||||||
|
|
@ -85,7 +73,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 跳转im客服
|
// 跳转im客服
|
||||||
async IMService() {
|
async IMService () {
|
||||||
// 获取访问Token
|
// 获取访问Token
|
||||||
let accessToken = Storage.getItem("accessToken");
|
let accessToken = Storage.getItem("accessToken");
|
||||||
await this.getIMDetailMethods();
|
await this.getIMDetailMethods();
|
||||||
|
|
@ -95,29 +83,30 @@ export default {
|
||||||
}
|
}
|
||||||
window.open(
|
window.open(
|
||||||
this.IMLink +
|
this.IMLink +
|
||||||
"?token=" +
|
"?token=" +
|
||||||
accessToken +
|
accessToken +
|
||||||
"&id=" +
|
"&id=" +
|
||||||
this.goodsMsg.data.storeId +
|
this.goodsMsg.data.storeId +
|
||||||
"&goodsId=" +
|
"&goodsId=" +
|
||||||
this.goodsMsg.data.goodsId +
|
this.goodsMsg.data.goodsId +
|
||||||
"&skuId=" +
|
"&skuId=" +
|
||||||
this.goodsMsg.data.id
|
this.goodsMsg.data.id
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
// 获取im信息
|
// 获取im信息
|
||||||
async getIMDetailMethods() {
|
async getIMDetailMethods () {
|
||||||
let res = await getIMDetail();
|
// let res = await getIMDetail();
|
||||||
if (res.success) {
|
// if (res.success) {
|
||||||
this.IMLink = res.result;
|
// this.IMLink = res.result;
|
||||||
}
|
// }
|
||||||
|
this.IMLink = 'http://192.168.0.139:8000'
|
||||||
},
|
},
|
||||||
// 点击规格
|
// 点击规格
|
||||||
targetClickSku(val) {
|
targetClickSku (val) {
|
||||||
this.getGoodsDetail(val);
|
this.getGoodsDetail(val);
|
||||||
},
|
},
|
||||||
// 获取商品详情
|
// 获取商品详情
|
||||||
getGoodsDetail(val) {
|
getGoodsDetail (val) {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
const params = val || this.$route.query;
|
const params = val || this.$route.query;
|
||||||
|
|
||||||
|
|
@ -183,7 +172,7 @@ export default {
|
||||||
this.$router.push("/");
|
this.$router.push("/");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goGoodsList(currIndex) {
|
goGoodsList (currIndex) {
|
||||||
// 跳转商品列表
|
// 跳转商品列表
|
||||||
const arr = [];
|
const arr = [];
|
||||||
this.categoryBar.forEach((e, index) => {
|
this.categoryBar.forEach((e, index) => {
|
||||||
|
|
@ -193,7 +182,7 @@ export default {
|
||||||
});
|
});
|
||||||
return location.origin + "/goodsList?categoryId=" + arr.toString();
|
return location.origin + "/goodsList?categoryId=" + arr.toString();
|
||||||
},
|
},
|
||||||
async collect() {
|
async collect () {
|
||||||
// 收藏店铺
|
// 收藏店铺
|
||||||
if (this.storeCollected) {
|
if (this.storeCollected) {
|
||||||
let cancel = await cancelCollect("STORE", this.goodsMsg.data.storeId);
|
let cancel = await cancelCollect("STORE", this.goodsMsg.data.storeId);
|
||||||
|
|
|
||||||
|
|
@ -6,18 +6,40 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
// 用于点击当前页的router时，刷新当前页
|
// 用于点击当前页的router时，刷新当前页
|
||||||
showView: true,
|
showView: true,
|
||||||
|
beforeUnload: '',
|
||||||
|
Handler: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 刷新当前路由方法
|
// 刷新当前路由方法
|
||||||
refreshView() {
|
refreshView () {
|
||||||
this.showView = false
|
this.showView = false
|
||||||
this.$nextTick(() => (this.showView = true))
|
this.$nextTick(() => (this.showView = true))
|
||||||
},
|
},
|
||||||
|
beforeunloadHandler () {
|
||||||
|
this.beforeUnload = new Date().getTime();
|
||||||
|
},
|
||||||
|
// 页面关闭后 重置btnHide
|
||||||
|
unloadHandler (e) {
|
||||||
|
this.Handler = new Date().getTime() - this.beforeUnload;
|
||||||
|
if (this.Handler <= 5) {
|
||||||
|
localStorage.setItem('btnHide', 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||||
|
window.addEventListener('unload', e => this.unloadHandler(e))
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||||
|
window.removeEventListener('unload', e => this.unloadHandler(e))
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
当前浏览
|
当前浏览
|
||||||
<div class="base">
|
<div class="base">
|
||||||
<div>
|
<div>
|
||||||
<img :src="goodsDetail.thumbnail" class="image" />
|
<img :src="goodsDetail.thumbnail" class="image" />
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-left: 13px">
|
<div style="margin-left: 13px">
|
||||||
<a @click="linkToGoods(goodsDetail.goodsId,goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
|
<a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
|
||||||
<div>
|
<div>
|
||||||
<span style="color: red;">￥{{ goodsDetail.price }}</span>
|
<span style="color: red;">￥{{ goodsDetail.price }}</span>
|
||||||
</div>
|
|
||||||
<el-button class="store-button" type="danger" v-if="!sendFlag" size="mini" @click="submitSendMessage()"
|
|
||||||
plain>发送</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<hr class="separate" />
|
<div v-if="hide">
|
||||||
|
<el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
|
||||||
|
@click="submitSendMessage()" plain>发送</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<hr class="separate" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -23,146 +25,152 @@ import { Tag, button } from 'element-ui'
|
||||||
import { mapState, mapGetters } from "vuex";
|
import { mapState, mapGetters } from "vuex";
|
||||||
import SocketInstance from "@/im-server/socket-instance";
|
import SocketInstance from "@/im-server/socket-instance";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
sendFlag: false,
|
sendFlag: false,
|
||||||
}
|
btnHide: undefined,
|
||||||
|
hide: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["talkItems"]),
|
||||||
|
...mapState({
|
||||||
|
id: (state) => state.user.id,
|
||||||
|
index_name: (state) => state.dialogue.index_name,
|
||||||
|
toUser: (state) => state.user.toUser,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.btnHide = localStorage.getItem('btnHide')
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"el-tag": Tag,
|
||||||
|
"el-button": button,
|
||||||
|
Storage
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toGoods () {
|
||||||
|
alert("toGoods")
|
||||||
},
|
},
|
||||||
computed: {
|
toMessage () {
|
||||||
...mapGetters(["talkItems"]),
|
alert(JSON.stringify(this.toUser))
|
||||||
...mapState({
|
alert("toMessage")
|
||||||
id: (state) => state.user.id,
|
|
||||||
index_name: (state) => state.dialogue.index_name,
|
|
||||||
toUser: (state) => state.user.toUser,
|
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
mounted(){
|
// 回车键发送消息回调事件
|
||||||
|
submitSendMessage () {
|
||||||
|
console.log("发送");
|
||||||
|
const context = this.goodsDetail
|
||||||
|
const record = {
|
||||||
|
operation_type: "MESSAGE",
|
||||||
|
to: this.toUser.userId,
|
||||||
|
from: this.id,
|
||||||
|
message_type: "GOODS",
|
||||||
|
context: context,
|
||||||
|
talk_id: this.toUser.id,
|
||||||
|
};
|
||||||
|
SocketInstance.emit("event_talk", record);
|
||||||
|
|
||||||
|
this.$store.commit("UPDATE_TALK_ITEM", {
|
||||||
|
index_name: this.index_name,
|
||||||
|
draft_text: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 插入数据
|
||||||
|
*/
|
||||||
|
const insterChat = {
|
||||||
|
createTime: this.formateDateAndTimeToString(new Date()),
|
||||||
|
fromUser: this.id,
|
||||||
|
toUser: record.to,
|
||||||
|
isRead: false,
|
||||||
|
messageType: "GOODS",
|
||||||
|
text: context,
|
||||||
|
float: "right",
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("insterChat", insterChat);
|
||||||
|
// console.log("插入对话记录",'')
|
||||||
|
// 插入对话记录
|
||||||
|
this.$store.commit("PUSH_DIALOGUE", insterChat);
|
||||||
|
// 获取聊天面板元素节点
|
||||||
|
let el = document.getElementById("lumenChatPanel");
|
||||||
|
// 判断的滚动条是否在底部
|
||||||
|
let isBottom =
|
||||||
|
Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
|
||||||
|
|
||||||
|
if (isBottom || record.to == this.id) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
el.scrollTop = el.scrollHeight;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
|
||||||
|
content: content,
|
||||||
|
nickname: record.name,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 发送后隐藏按钮 0：隐藏 1：显示
|
||||||
|
localStorage.setItem('btnHide', 0)
|
||||||
|
this.hide = false
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
"el-tag": Tag,
|
formateDateAndTimeToString (date) {
|
||||||
"el-button": button,
|
var hours = date.getHours();
|
||||||
Storage
|
var mins = date.getMinutes();
|
||||||
|
var secs = date.getSeconds();
|
||||||
|
var msecs = date.getMilliseconds();
|
||||||
|
if (hours < 10) hours = "0" + hours;
|
||||||
|
if (mins < 10) mins = "0" + mins;
|
||||||
|
if (secs < 10) secs = "0" + secs;
|
||||||
|
if (msecs < 10) secs = "0" + msecs;
|
||||||
|
return (
|
||||||
|
this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
|
||||||
|
);
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
toGoods() {
|
|
||||||
alert("toGoods")
|
|
||||||
},
|
|
||||||
toMessage() {
|
|
||||||
alert(JSON.stringify(this.toUser))
|
|
||||||
alert("toMessage")
|
|
||||||
},
|
|
||||||
// 回车键发送消息回调事件
|
|
||||||
submitSendMessage() {
|
|
||||||
console.log("发送");
|
|
||||||
const context = this.goodsDetail
|
|
||||||
const record = {
|
|
||||||
operation_type: "MESSAGE",
|
|
||||||
to: this.toUser.userId,
|
|
||||||
from: this.id,
|
|
||||||
message_type: "GOODS",
|
|
||||||
context: context,
|
|
||||||
talk_id: this.toUser.id,
|
|
||||||
};
|
|
||||||
SocketInstance.emit("event_talk", record);
|
|
||||||
|
|
||||||
this.$store.commit("UPDATE_TALK_ITEM", {
|
formatDateToString (date) {
|
||||||
index_name: this.index_name,
|
var year = date.getFullYear();
|
||||||
draft_text: "",
|
var month = date.getMonth() + 1;
|
||||||
});
|
var day = date.getDate();
|
||||||
|
if (month < 10) month = "0" + month;
|
||||||
/**
|
if (day < 10) day = "0" + day;
|
||||||
* 插入数据
|
return year + "-" + month + "-" + day;
|
||||||
*/
|
|
||||||
const insterChat = {
|
|
||||||
createTime: this.formateDateAndTimeToString(new Date()),
|
|
||||||
fromUser: this.id,
|
|
||||||
toUser: record.to,
|
|
||||||
isRead: false,
|
|
||||||
messageType: "GOODS",
|
|
||||||
text: context,
|
|
||||||
float: "right",
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log("insterChat", insterChat);
|
|
||||||
// console.log("插入对话记录",'')
|
|
||||||
// 插入对话记录
|
|
||||||
this.$store.commit("PUSH_DIALOGUE", insterChat);
|
|
||||||
// 获取聊天面板元素节点
|
|
||||||
let el = document.getElementById("lumenChatPanel");
|
|
||||||
// 判断的滚动条是否在底部
|
|
||||||
let isBottom =
|
|
||||||
Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
|
|
||||||
|
|
||||||
if (isBottom || record.to == this.id) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
el.scrollTop = el.scrollHeight;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
|
|
||||||
content: content,
|
|
||||||
nickname: record.name,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
formateDateAndTimeToString(date) {
|
|
||||||
var hours = date.getHours();
|
|
||||||
var mins = date.getMinutes();
|
|
||||||
var secs = date.getSeconds();
|
|
||||||
var msecs = date.getMilliseconds();
|
|
||||||
if (hours < 10) hours = "0" + hours;
|
|
||||||
if (mins < 10) mins = "0" + mins;
|
|
||||||
if (secs < 10) secs = "0" + secs;
|
|
||||||
if (msecs < 10) secs = "0" + msecs;
|
|
||||||
return (
|
|
||||||
this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
formatDateToString(date) {
|
|
||||||
var year = date.getFullYear();
|
|
||||||
var month = date.getMonth() + 1;
|
|
||||||
var day = date.getDate();
|
|
||||||
if (month < 10) month = "0" + month;
|
|
||||||
if (day < 10) day = "0" + day;
|
|
||||||
return year + "-" + month + "-" + day;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
props: {
|
},
|
||||||
goodsDetail: {
|
props: {
|
||||||
type: Object,
|
goodsDetail: {
|
||||||
default: null,
|
type: Object,
|
||||||
},
|
default: null,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.store-button {
|
.store-button {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-color: #F56C6C;
|
border-color: #F56C6C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.base {
|
.base {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
width: 100px
|
width: 100px
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.separate {
|
.separate {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue