zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

im商品跳转问题

master
程 2023-01-12 16:48:31 +08:00
parent 2c494ac0d1
commit b72d831df9
2 changed files with 840 additions and 844 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
pages/mine/im/index.vue
View File

@ -19,16 +19,13 @@
<view> <view>
<view class="user-name">{{ user.nickName }}</view> <view class="user-name">{{ user.nickName }}</view>
<view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; "> <view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; ">
<text style="word-break: break-all;" <text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<view v-if="item.messageType == 'GOODS'"> <view v-if="item.messageType == 'GOODS'">
<view class="goodsCard u-flex u-row-between u-p-b-0" <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
style="width:100%;margin: 0 0; "> <view class="imagebox" @click="jumpGoodDelic(item)">
<view class="imagebox" @click="jumpGoodDelic"> <image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image>
<image class="image" :src="JSON.parse(item.text)['thumbnail']"
mode="widthFix"></image>
</view> </view>
<view class="goodsdesc" @click="jumpGoodDelic"> <view class="goodsdesc" @click="jumpGoodDelic(item)">
<view class="goodsdesc-name"> <view class="goodsdesc-name">
<text class="goodsCard_goodNmae">{{ <text class="goodsCard_goodNmae">{{
JSON.parse(item.text)['goodsName'] JSON.parse(item.text)['goodsName']
@ -49,8 +46,9 @@
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;" <img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" /> :src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<view class="groupNameOrTime"> <view class="groupNameOrTime">
<text @click="linkTosOrders(item.text)">{{ JSON.parse(item.text)['groupName'] <text @click="linkTosOrders(item.text)">{{
}}</text> JSON.parse(item.text)['groupName']
}}</text>
<view class="orderTime"> <view class="orderTime">
<text>{{ JSON.parse(item.text)['paymentTime'] }}</text> <text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
</view> </view>
@ -74,27 +72,23 @@
<view class="flex" style="width: 500rpx;"> <view class="flex" style="width: 500rpx;">
<view> <view>
<view class="other-name">{{ toUser.name }}</view> <view class="other-name">{{ toUser.name }}</view>
<view class="margin-left padding-chat flex-column-start bg-to-color" <view class="margin-left padding-chat flex-column-start bg-to-color" style="border-radius: 35rpx;">
style="border-radius: 35rpx;"> <text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<text style="word-break: break-all;"
v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
<view v-if="item.messageType === 'GOODS'"> <view v-if="item.messageType === 'GOODS'">
<view class="goodsCard u-flex u-row-between u-p-b-0" <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
style="width:100%;margin: 0 0; "> <view class="imagebox" @click="jumpGoodDelic(item)">
<view class="imagebox" @click="jumpGoodDelic"> <image class="image" :src="JSON.parse(item.text)['thumbnail']" mode="widthFix"></image>
<image class="image" :src="JSON.parse(item.text)['thumbnail']"
mode="widthFix"></image>
</view> </view>
<view class="goodsdesc" @click="jumpGoodDelic"> <view class="goodsdesc" @click="jumpGoodDelic(item)">
<view class="goodsdesc-name"> <view class="goodsdesc-name">
<text class="goodsCard_goodNmae">{{ <text class="goodsCard_goodNmae">{{
JSON.parse(item.text)['goodsName'] JSON.parse(item.text)['goodsName']
}}</text> }}</text>
</view> </view>
<view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text <view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text
style="font-size:20rpx;">¥{{ style="font-size:20rpx;">¥{{
JSON.parse(item.text)['price'] JSON.parse(item.text)['price']
}}</text> }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -106,8 +100,9 @@
<img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;" <img style="height: 120rpx; width: 120rpx; margin-top: 15rpx;"
:src="JSON.parse(item.text)['groupImages']" mode="widthFix" /> :src="JSON.parse(item.text)['groupImages']" mode="widthFix" />
<view class="groupNameOrTime"> <view class="groupNameOrTime">
<text @click="linkTosOrders(item.text)">{{ JSON.parse(item.text)['groupName'] <text @click="linkTosOrders(item.text)">{{
}}</text> JSON.parse(item.text)['groupName']
}}</text>
<view class="orderTime"> <view class="orderTime">
<text>{{ JSON.parse(item.text)['paymentTime'] }}</text> <text>{{ JSON.parse(item.text)['paymentTime'] }}</text>
</view> </view>
@ -126,17 +121,16 @@
:style="{ position: msgList.length == 0 ? 'fixed' : '', bottom: msgList.length == 0 ? '50px' : '', width: msgList.length == 0 ? '100%' : '' }"> :style="{ position: msgList.length == 0 ? 'fixed' : '', bottom: msgList.length == 0 ? '50px' : '', width: msgList.length == 0 ? '100%' : '' }">
<view class="cartMessage" v-if="showHide && !localImGoodsId && showHideModel"> <view class="cartMessage" v-if="showHide && !localImGoodsId && showHideModel">
<view class="goodsCard u-flex u-row-between u-p-b-0"> <view class="goodsCard u-flex u-row-between u-p-b-0">
<view class="imagebox" @click="jumpGoodDelic"> <view class="imagebox" @click="jumpGoodDelic(item)">
<image class="image" :src="goodListData.thumbnail" mode="widthFix"></image> <image class="image" :src="goodListData.thumbnail" mode="widthFix"></image>
</view> </view>
<view class="goodsdesc" @click="jumpGoodDelic"> <view class="goodsdesc" @click="jumpGoodDelic(item)">
<view class="goodsdesc-name"> <view class="goodsdesc-name">
<text class="goodsCard_goodNmae">{{ <text class="goodsCard_goodNmae">{{
goodListData.goodsName goodListData.goodsName
}}</text> }}</text>
</view> </view>
<view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text <view class="goodsdesc-rice" style="margin-top:10rpx; color: orange;"><text style="font-size:20rpx;">¥{{
style="font-size:20rpx;">¥{{
goodListData.price goodListData.price
}}</text> }}</text>
</view> </view>
@ -170,9 +164,8 @@
<view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData"> <view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData">
<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;"> <view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
<!-- vue无法使用软键盘"发送" --> <!-- vue无法使用软键盘"发送" -->
<input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" <input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMessage"
@confirm="sendMessage" confirm-type="search" placeholder-class="my-neirong-sm" confirm-type="search" placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" />
placeholder="用一句简短的话描述您的问题" />
<view @click="sendMessage" class="cu-tag bg-cyan round"> <view @click="sendMessage" class="cu-tag bg-cyan round">
发送 发送
</view> </view>
@ -194,26 +187,26 @@
</template> </template>
<script> <script>
// rpx和px的比率 // rpx和px的比率
var l var l
// 可用窗口高度 // 可用窗口高度
var wh var wh
// 顶部空盒子的高度 // 顶部空盒子的高度
var mgUpHeight var mgUpHeight
import { import {
getTalkMessage, getTalkMessage,
getTalkByUser, getTalkByUser,
jumpObtain jumpObtain
} from "@/api/im.js"; } from "@/api/im.js";
import SocketService from "@/utils/socket_service.js"; import SocketService from "@/utils/socket_service.js";
import storage from "@/utils/storage.js"; import storage from "@/utils/storage.js";
import { import {
beautifyTime beautifyTime
} from "@/utils/filters.js" } from "@/utils/filters.js"
import config from '@/config/config.js' import config from '@/config/config.js'
export default { export default {
// 页面卸载后清除imGoodId // 页面卸载后清除imGoodId
onUnload() { onUnload () {
// #ifdef H5 // #ifdef H5
uni.setStorageSync("imGoodId", ''); uni.setStorageSync("imGoodId", '');
// #endif // #endif
@ -222,7 +215,7 @@
uni.closeSocket(); uni.closeSocket();
} }
}, },
onLoad(options) { onLoad (options) {
this.sokcet(); this.sokcet();
// 没有goodsid则不显示 发送商品弹窗 // 没有goodsid则不显示 发送商品弹窗
this.showHideModel = options.goodsid this.showHideModel = options.goodsid
@ -272,17 +265,18 @@
} }
// this.ws.connect(); // this.ws.connect();
this.sokcet() this.sokcet();
}, },
onPullDownRefresh() {
onPullDownRefresh () {
this.params.pageNumber = this.params.pageNumber + 1 this.params.pageNumber = this.params.pageNumber + 1
this.getTalkMessage() this.getTalkMessage()
setTimeout(function() { setTimeout(function () {
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, 1000); }, 1000);
}, },
data() { data () {
return { return {
socketOpen: false, //是否连接 socketOpen: false, //是否连接
storage, storage,
@ -330,7 +324,7 @@
// } // }
// }, // },
methods: { methods: {
sendMessage() { sendMessage () {
if (this.msg == "") { if (this.msg == "") {
return 0; return 0;
} }
@ -362,7 +356,7 @@
uni.closeSocket(); uni.closeSocket();
} }
}, },
sendGoodsMessage() { sendGoodsMessage () {
let msg = { let msg = {
operation_type: "MESSAGE", operation_type: "MESSAGE",
to: this.toUser.userId, to: this.toUser.userId,
@ -391,7 +385,7 @@
}); });
}) })
}, },
sokcet() { sokcet () {
var _this = this; var _this = this;
uni.closeSocket(); uni.closeSocket();
this.socketOpen = false; this.socketOpen = false;
@ -403,13 +397,13 @@
url: url, url: url,
}); });
// 监听WebSocket连接已打开 // 监听WebSocket连接已打开
uni.onSocketOpen(function(res) { uni.onSocketOpen(function (res) {
_this.socketOpen = true; _this.socketOpen = true;
}); });
// 监听连接失败 // 监听连接失败
uni.onSocketError(function(err) { uni.onSocketError(function (err) {
if (err && err.code !== 1000) { if (err && err.code !== 1000) {
setTimeout(function() { setTimeout(function () {
_this.socketOpen = true; _this.socketOpen = true;
uni.connectSocket({ uni.connectSocket({
url: url, url: url,
@ -418,9 +412,9 @@
} }
}); });
// 监听连接关闭 // 监听连接关闭
uni.onSocketClose(function(err) { uni.onSocketClose(function (err) {
if (err && err.code !== 1000) { if (err && err.code !== 1000) {
setTimeout(function() { setTimeout(function () {
_this.socketOpen = true; _this.socketOpen = true;
uni.connectSocket({ uni.connectSocket({
url: url, url: url,
@ -429,7 +423,8 @@
} }
}); });
// 监听收到信息 // 监听收到信息
uni.onSocketMessage(function(res) { uni.onSocketMessage(function (res) {
console.log(res.data, 'resresresresresres');
uni.hideLoading() uni.hideLoading()
}) })
} catch (e) { } catch (e) {
@ -439,7 +434,7 @@
}, },
beautifyTime, beautifyTime,
//订单详情 //订单详情
linkTosOrders(val) { linkTosOrders (val) {
let order = JSON.parse(val) let order = JSON.parse(val)
uni.navigateTo({ uni.navigateTo({
url: '/pages/order/orderDetail?sn=' + order.sn, url: '/pages/order/orderDetail?sn=' + order.sn,
@ -447,25 +442,26 @@
}, },
// 跳转商品详情页 // 跳转商品详情页
jumpGoodDelic() { jumpGoodDelic (item) {
let info = JSON.parse(item.text)
uni.navigateTo({ uni.navigateTo({
url: `/pages/product/goods?id=${this.resolve.skuid}&goodsId=${this.resolve.goodsid}`, url: `/pages/product/goods?id=${info.id}&goodsId=${info.goodsId}`,
}); });
}, },
//取消发送 //取消发送
cancelModel() { cancelModel () {
this.showHide = false this.showHide = false
}, },
// 请求商品详情 // 请求商品详情
commodityDetails() { commodityDetails () {
jumpObtain(this.resolve.skuid, this.resolve.goodsid).then((res) => { jumpObtain(this.resolve.skuid, this.resolve.goodsid).then((res) => {
this.goodListData = res.data.result.data this.goodListData = res.data.result.data
}) })
}, },
// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug) // 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
goPag(kh) { goPag (kh) {
this.retractBox(0, 250) this.retractBox(0, 250)
if (this.keyHeight != 0) { if (this.keyHeight != 0) {
if (kh - this.keyHeight > 0) { if (kh - this.keyHeight > 0) {
@ -475,7 +471,7 @@
} }
}, },
// 移动顶部的空盒子 // 移动顶部的空盒子
messageBoxMove(x, t) { messageBoxMove (x, t) {
var animation = uni.createAnimation({ var animation = uni.createAnimation({
duration: t, duration: t,
timingFunction: 'linear', timingFunction: 'linear',
@ -488,7 +484,7 @@
this.anData = animation.export() this.anData = animation.export()
}, },
// 保持消息体可见 // 保持消息体可见
msgGo(type) { msgGo (type) {
console.log(type, 'typetypetype'); console.log(type, 'typetypetype');
const query = uni.createSelectorQuery() const query = uni.createSelectorQuery()
// 延时100ms保证是最新的高度 // 延时100ms保证是最新的高度
@ -528,7 +524,7 @@
}, 100) }, 100)
}, },
// 回答问题的业务逻辑 // 回答问题的业务逻辑
answer(id) { answer (id) {
// 这里应该传入问题的id,模拟就用index代替了 // 这里应该传入问题的id,模拟就用index代替了
}, },
@ -574,7 +570,7 @@
// // }, 2000) // // }, 2000)
// }, // },
// 不建议输入框聚焦时操作此动画 // 不建议输入框聚焦时操作此动画
ckAdd() { ckAdd () {
if (!this.showTow) { if (!this.showTow) {
this.retractBox(-180, 350) this.retractBox(-180, 350)
} else { } else {
@ -582,11 +578,11 @@
} }
this.showTow = !this.showTow this.showTow = !this.showTow
}, },
hideKey() { hideKey () {
uni.hideKeyboard() uni.hideKeyboard()
}, },
// 拉起/收回附加栏 // 拉起/收回附加栏
retractBox(x, t) { retractBox (x, t) {
var animation = uni.createAnimation({ var animation = uni.createAnimation({
duration: t, duration: t,
@ -599,7 +595,7 @@
this.animationData = animation.export() this.animationData = animation.export()
}, },
async getTalkMessage() { async getTalkMessage () {
let type = ''; let type = '';
await getTalkMessage(this.params).then(res => { await getTalkMessage(this.params).then(res => {
if (res.data.success) { if (res.data.success) {
@ -617,16 +613,17 @@
}) })
} }
}) })
console.log(this.msgList);
this.msgGo(type) this.msgGo(type)
}, },
touchMoreMessage(e) { touchMoreMessage (e) {
if (e.target.scrollTop == 0) { if (e.target.scrollTop == 0) {
this.params.pageNumber = this.params.pageNumber + 1 this.params.pageNumber = this.params.pageNumber + 1
this.getTalkMessage() this.getTalkMessage()
} }
}, },
async getTalk(userId) { async getTalk (userId) {
getTalkByUser(userId).then(res => { getTalkByUser(userId).then(res => {
if (res.data.success) { if (res.data.success) {
this.toUser = res.data.result this.toUser = res.data.result
@ -636,7 +633,7 @@
}) })
}, },
// 处理消息时间是否显示 // 处理消息时间是否显示
compareTime(index, datetime) { compareTime (index, datetime) {
if (datetime == undefined) { if (datetime == undefined) {
return false; return false;
} }
@ -678,7 +675,7 @@
* @param format 转换格式 * @param format 转换格式
* @returns {*|string} * @returns {*|string}
*/ */
unixToDate(unix, format) { unixToDate (unix, format) {
if (!unix) return unix; if (!unix) return unix;
let _format = format || "yyyy-MM-dd hh:mm:ss"; let _format = format || "yyyy-MM-dd hh:mm:ss";
const d = new Date(unix); const d = new Date(unix);
@ -707,48 +704,48 @@
return _format; return _format;
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.orderTime { .orderTime {
margin-top: 15rpx; margin-top: 15rpx;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.wrapper { .wrapper {
height: auto !important; height: auto !important;
} }
.oederList { .oederList {
display: flex; display: flex;
color: black; color: black;
font-size: 20rpx; font-size: 20rpx;
font-weight: bold; font-weight: bold;
width: 95%; width: 95%;
} }
.orderSn { .orderSn {
width: 350rpx; width: 350rpx;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.groupNameOrTime { .groupNameOrTime {
margin: 15rpx 15rpx; margin: 15rpx 15rpx;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.orderGood { .orderGood {
background-color: #ffffff; background-color: #ffffff;
} }
.goodsCard { .goodsCard {
border-radius: 20rpx; border-radius: 20rpx;
margin-top: 15rpx; margin-top: 15rpx;
background-color: #ffffff; background-color: #ffffff;
@ -815,104 +812,104 @@
top: 20rpx; top: 20rpx;
right: 20rpx; right: 20rpx;
} }
} }
.cancel { .cancel {
color: #737373; color: #737373;
position: relative; position: relative;
bottom: 40rpx; bottom: 40rpx;
left: 12%; left: 12%;
} }
.cartMessage { .cartMessage {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.bottom-dh-char { .bottom-dh-char {
background-color: #f9f9f9; background-color: #f9f9f9;
width: 750rpx; width: 750rpx;
height: 110rpx; height: 110rpx;
} }
.user-name { .user-name {
text-align: right; text-align: right;
font-size: 24rpx; font-size: 24rpx;
color: #737373; color: #737373;
margin-bottom: 10rpx; margin-bottom: 10rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
.other-name { .other-name {
text-align: left; text-align: left;
font-size: 24rpx; font-size: 24rpx;
color: #737373; color: #737373;
margin-bottom: 10rpx; margin-bottom: 10rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.column-time { .column-time {
justify-content: center; justify-content: center;
} }
.center-box { .center-box {
width: 720rpx; width: 720rpx;
padding-left: 25rpx; padding-left: 25rpx;
} }
.hui-box { .hui-box {
width: 750rpx; width: 750rpx;
height: 100%; height: 100%;
} }
.date-text { .date-text {
font-size: 12px; font-size: 12px;
color: grey; color: grey;
} }
.dh-input { .dh-input {
width: 500rpx; width: 500rpx;
height: 65rpx; height: 65rpx;
border-radius: 30rpx; border-radius: 30rpx;
padding-left: 15rpx; padding-left: 15rpx;
font-size: 35rpx; font-size: 35rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.box-normal { .box-normal {
width: 750rpx; width: 750rpx;
height: 180px; height: 180px;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.tb-text view { .tb-text view {
font-size: 65rpx; font-size: 65rpx;
} }
.tb-text text { .tb-text text {
font-size: 25rpx; font-size: 25rpx;
color: #737373; color: #737373;
} }
.chat-img { .chat-img {
border-radius: 50%; border-radius: 50%;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.padding-chat { .padding-chat {
padding: 17rpx 20rpx; padding: 17rpx 20rpx;
} }
.tb-nv { .tb-nv {
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./index-app.scss"; @import "./index-app.scss";
</style> </style>

13
utils/socket_service.js
View File

@ -6,7 +6,7 @@ export default class SocketService {
* 单例 * 单例
*/ */
static instance = null; static instance = null;
static get Instance() { static get Instance () {
if (!this.instance) { if (!this.instance) {
this.instance = new SocketService(); this.instance = new SocketService();
} }
@ -29,12 +29,12 @@ export default class SocketService {
connectRetryCount = 0; connectRetryCount = 0;
// 定义连接服务器的方法 // 定义连接服务器的方法
connect() { connect () {
// 连接服务器 // 连接服务器
if (!window.WebSocket) { if (!window.WebSocket) {
return console.log("您的浏览器不支持WebSocket"); return console.log("您的浏览器不支持WebSocket");
} }
this.ws = new WebSocket(config.baseWsUrl+'/'+storage.getAccessToken()); this.ws = new WebSocket(config.baseWsUrl + '/' + storage.getAccessToken());
// 连接成功的事件 // 连接成功的事件
this.ws.onopen = () => { this.ws.onopen = () => {
console.log("连接服务端成功"); console.log("连接服务端成功");
@ -54,24 +54,23 @@ export default class SocketService {
}; };
// 得到服务端发送过来的数据 // 得到服务端发送过来的数据
this.ws.onmessage = (msg) => { this.ws.onmessage = (msg) => {
// console.log(msg.data)
this.registerCallBack(msg.data); this.registerCallBack(msg.data);
}; };
} }
// 回调函数的注册 // 回调函数的注册
registerCallBack(callBack) { registerCallBack (callBack) {
// console.log("回调函数的注册", callBack); // console.log("回调函数的注册", callBack);
this.callBackMapping = callBack; this.callBackMapping = callBack;
} }
// 取消某一个回调函数 // 取消某一个回调函数
unRegisterCallBack(callBack) { unRegisterCallBack (callBack) {
console.log("取消某一个回调函数", callBack); console.log("取消某一个回调函数", callBack);
this.callBackMapping = null; this.callBackMapping = null;
} }
// 发送数据的方法 // 发送数据的方法
send(data) { send (data) {
// 判断此时此刻有没有连接成功 // 判断此时此刻有没有连接成功
if (this.connected) { if (this.connected) {
this.sendRetryCount = 0; this.sendRetryCount = 0;