info.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <!-- 聊天内容 -->
  6. <scroll-view class="scroll-view" scroll-y="true" scroll-with-animation="true"
  7. :scroll-into-view="scrollToView" refresher-enabled="true" :refresher-triggered="triggered"
  8. @refresherrefresh="getFresh">
  9. <view class="list-scroll-view">
  10. <view class="chat-ls" v-for="(item,index) in msgList" :key="index" :id="'msg'+ item._id">
  11. <view class="chat-time" v-if="item.time != ''">
  12. {{item.time}}
  13. </view>
  14. <view class="msg-m msg-left" v-if="item.speaker !=  user._id">
  15. <image @tap="toShop()" class="user-img"
  16. :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''">
  17. </image>
  18. <!-- 文字 -->
  19. <view class="message" v-if="item.msg_type =='0'">                           
  20. <view class="msg-text">{{item.content}}</view>
  21. </view>
  22. <!-- 图像 -->
  23. <view class="message img" v-else-if="item.msg_type =='1'"
  24. @tap="previewImg(item.content)">
  25. <image :src="item.content" class="msg-img" mode="widthFix"></image>
  26. </view>
  27. <!-- 商品 -->
  28. <view class="message img" v-else-if="item.msg_type =='2'" @tap="toView(item)">
  29. <view class="msg-goods">
  30. <image :src="item.goodsInfo&&item.goodsInfo.file" class="image"
  31. mode="scaleToFill">
  32. </image>
  33. <view class="goods_1">
  34. <view class="name textOver">{{item.goodsInfo&&item.goodsInfo.name}}</view>
  35. <view class="money">
  36. <text class="money_1"
  37. v-if="item.goodsInfo&&item.goodsInfo.spec&&item.goodsInfo.spec.leader_price"><text>团长价¥</text>{{item.goodsInfo.spec.leader_price||0}}</text>
  38. <text class="money_2"
  39. v-else-if="item.goodsInfo&&item.goodsInfo.spec&&item.goodsInfo.spec.price"><text>特价¥</text>{{item.goodsInfo.spec.price||0}}</text>
  40. <text class="money_2"
  41. v-else><text>¥</text>{{item.goodsInfo.spec.sell_money||0}}</text>
  42. <text
  43. class="money_2"><text>¥</text>{{item.goodsInfo.spec.flow_money||0}}</text>
  44. </view>
  45. <view class="act" v-if="item.goodsInfo&&item.goodsInfo.act">
  46. <text class="label" v-for="(tag,index) in item.goodsInfo.act"
  47. :key="index">{{tag}}</text>
  48. </view>
  49. <view class="button" @tap.stop="toSend(item)" v-if="item.is_send=='0'">
  50. <text>发送连接</text>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <!-- 订单 -->
  56. <view class="message img" v-else-if="item.msg_type =='3'" @tap="toView(item)">
  57. <view class="msg-order">
  58. <view class="order_1">
  59. <view class="image" v-for="(tago,index) in item.ordernfo.goods"
  60. :key="index">
  61. <image v-if="tago.file.length>0" :src="tago.file&&tago.file[0].url"
  62. class="image" mode="scaleToFill">
  63. </image>
  64. <image v-else :src="tago.goods&&tago.goods.file[0].url" class="image"
  65. mode="scaleToFill">
  66. </image>
  67. </view>
  68. </view>
  69. <view class="order_2">
  70. <view class="no">订单号:{{item.ordernfo.no}}</view>
  71. <view class="status">
  72. <text>{{item.ordernfo.status}}</text>
  73. <view class="button" @tap.stop="toSend(item)" v-if="item.is_send=='0'">
  74. <text>发送连接</text>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="msg-m msg-right" v-else-if="item.speaker == user._id">
  82. <image class="user-img" :src="user.icon&&user.icon.length>0?user.icon[0].url:''">
  83. </image>
  84. <!-- 文字 -->
  85. <view class="message" v-if="item.msg_type =='0'">
  86. <view class="msg-text">{{item.content}}</view>
  87. </view>
  88. <!-- 图像 -->
  89. <view class="message img" v-else-if="item.msg_type =='1'"
  90. @tap="previewImg(item.content)">
  91. <image :src="item.content" class="msg-img" mode="widthFix"></image>
  92. </view>
  93. <!-- 商品 -->
  94. <view class="message img" v-else-if="item.msg_type =='2'" @tap="toView(item)">
  95. <view class="msg-goods">
  96. <image :src="item.goodsInfo&&item.goodsInfo.file" class="image"
  97. mode="scaleToFill">
  98. </image>
  99. <view class="goods_1">
  100. <view class="name textOver">{{item.goodsInfo&&item.goodsInfo.name}}</view>
  101. <view class="money">
  102. <text class="money_1"
  103. v-if="item.goodsInfo&&item.goodsInfo.spec&&item.goodsInfo.spec.leader_price"><text>团长价¥</text>{{item.goodsInfo.spec.leader_price||0}}</text>
  104. <text class="money_2"
  105. v-else-if="item.goodsInfo&&item.goodsInfo.spec&&item.goodsInfo.spec.price"><text>特价¥</text>{{item.goodsInfo.spec.price||0}}</text>
  106. <text class="money_2"
  107. v-else><text>¥</text>{{item.goodsInfo.spec.sell_money||0}}</text>
  108. <text
  109. class="money_2"><text>¥</text>{{item.goodsInfo.spec.flow_money||0}}</text>
  110. </view>
  111. <view class="act" v-if="item.goodsInfo&&item.goodsInfo.act">
  112. <text class="label" v-for="(tag,index) in item.goodsInfo.act"
  113. :key="index">{{tag}}</text>
  114. </view>
  115. <view class="button" @tap.stop="toSend(item)" v-if="item.is_send=='0'">
  116. <text>发送连接</text>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. <!-- 订单 -->
  122. <view class="message img" v-else-if="item.msg_type =='3'" @tap="toView(item)">
  123. <view class="msg-order">
  124. <view class="order_1">
  125. <view class="images" v-for="(tago,index) in item.ordernfo.goods"
  126. :key="index">
  127. <image v-if="tago.file.length>0" :src="tago.file&&tago.file[0].url"
  128. class="image" mode="scaleToFill">
  129. </image>
  130. <image v-else :src="tago.goods&&tago.goods.file[0].url" class="image"
  131. mode="scaleToFill">
  132. </image>
  133. </view>
  134. </view>
  135. <view class="order_2">
  136. <view class="no">订单号:{{item.ordernfo.no}}</view>
  137. <view class="status">
  138. <text>{{item.ordernfo.status}}</text>
  139. <view class="button" @tap.stop="toSend(item)" v-if="item.is_send=='0'">
  140. <text>发送连接</text>
  141. </view>
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. </view>
  149. </scroll-view>
  150. </view>
  151. <view class="two">
  152. <submit_1 @inputs="inputs" @heights="heights" @sendGoods="sendGoods" @sendOrder="sendOrder"></submit_1>
  153. </view>
  154. </view>
  155. <!-- 规格 -->
  156. <uni-popup ref="specShow" background-color="#fff" type="bottom" :is-mask-click="false">
  157. <view class="popup">
  158. <view class="close">
  159. <text @click="toClose" class="iconfont icon-shanchu"></text>
  160. </view>
  161. <view class="info_1" v-if="popupShow=='1'">
  162. <goods_1 :marketList="list" @toPage="toPage" @toSend="toGoods"></goods_1>
  163. </view>
  164. <view class="info_1" v-else-if="popupShow=='2'">
  165. <order_1 :tabs="tabs" :status="status" :orderList="list" @toPage="toPage" @toSend="toOrder"
  166. @tabsChange="tabsChange">
  167. </order_1>
  168. </view>
  169. </view>
  170. </uni-popup>
  171. </mobile-frame>
  172. </template>
  173. <script>
  174. import moment from 'moment';
  175. import submit_1 from './components/submit_1.vue';
  176. import goods_1 from './components/goods_1.vue';
  177. import order_1 from './components/order_1.vue';
  178. export default {
  179. components: {
  180. submit_1,
  181. goods_1,
  182. order_1,
  183. },
  184. data() {
  185. return {
  186. // 用户信息
  187. user: {},
  188. // 房间号id
  189. id: '',
  190. // 店铺信息
  191. shop: {},
  192. shop_id: "",
  193. // 商品或订单信息条件
  194. goods: {},
  195. // 订单状态
  196. statusList: [],
  197. // 历史记录
  198. msgList: [],
  199. // 订单列表
  200. list: [],
  201. status: '0',
  202. tabs: {
  203. active: '0',
  204. menu: []
  205. },
  206. // 聊天记录
  207. total: 0,
  208. skip: 0,
  209. limit: 6,
  210. page: 0,
  211. // 判断是否跳到最后一条
  212. is_bottom: true,
  213. // 判断是否下拉刷新复位
  214. triggered: false,
  215. scrollToView: '', //滑动最后一条信息
  216. // 规格弹框
  217. popupShow: '1',
  218. };
  219. },
  220. onShow: async function() {
  221. const that = this;
  222. if (that.id) {
  223. await that.clearPage();
  224. await that.search()
  225. }
  226. await that.searchOther();
  227. },
  228. onLoad: async function(e) {
  229. const that = this;
  230. that.$set(that, `goods`, e);
  231. that.$set(that, `id`, e.id);
  232. that.$set(that, `shop_id`, e.shop);
  233. that.watchlogin();
  234. },
  235. computed: {
  236. listenWebsocket() {
  237. return this.$store.state.websocketData;
  238. }
  239. },
  240. watch: {
  241. listenWebsocket: function(newstr) {
  242. if (newstr && newstr.type == 'chat' && newstr.room == this.id) {
  243. this.msgList.push(newstr);
  244. this.goBottom();
  245. }
  246. }
  247. },
  248. methods: {
  249. // 监听用户是否登录
  250. watchlogin() {
  251. const that = this;
  252. uni.getStorage({
  253. key: 'token',
  254. success: async function(res) {
  255. let user = that.$jwt(res.data);
  256. if (user) {
  257. // 查询状态
  258. let arr = await that.$api(`/dictData`, 'GET', {
  259. code: 'order_process'
  260. })
  261. if (arr.errcode == '0') that.$set(that, `statusList`, arr.data);
  262. that.$set(that, `user`, user)
  263. }
  264. }
  265. })
  266. },
  267. // 查询商品或订单信息
  268. async searchOther() {
  269. const that = this;
  270. let res;
  271. let statusList = that.statusList.filter((i) => {
  272. return i.value != '-2' && i.value != '-3';
  273. });
  274. var menu = statusList.map((item) => {
  275. return {
  276. title: item.label,
  277. active: item.value
  278. }
  279. })
  280. that.$set(that.tabs, `menu`, menu)
  281. // 发送商品信息
  282. if (that.goods && that.goods.goods) {
  283. // 商品
  284. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  285. id: that.goods.goods
  286. });
  287. if (res.errcode == '0') {
  288. let indexSpecs;
  289. // 显示最低价格的规格信息,不考虑库存问题
  290. if (res.data.specs && res.data.specs.length > 0) {
  291. // 规格排序
  292. indexSpecs = res.data.specs.sort(function(a, b) {
  293. let i, j;
  294. if (a.price) i = 'price'
  295. else i = 'sell_money'
  296. if (b.price) j = 'price'
  297. else j = 'sell_money'
  298. return a[i] - b[j];
  299. })
  300. }
  301. let act = res.data.act.map(i => {
  302. return i.tag
  303. })
  304. let goodsInfo = {
  305. "file": res.data && res.data.goods && res.data.goods.file && res.data.goods.file[0]
  306. .url,
  307. "name": res.data && res.data.goods && res.data.goods.name,
  308. "spec": indexSpecs[0],
  309. "act": act
  310. }
  311. let data = {
  312. "_id": 'goods' + moment(new Date()).valueOf(),
  313. "speaker": that.user._id,
  314. "content": that.goods.goods,
  315. "goodsInfo": goodsInfo,
  316. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  317. "msg_type": '2',
  318. "is_send": '0'
  319. }
  320. if (!that.id) data.shop = that.shop_id
  321. else data.room = that.id
  322. that.msgList.push(data);
  323. }
  324. } else if (that.goods && that.goods.order) {
  325. // 订单
  326. if (that.goods.status == '0') res = await that.$api(`/order/${that.goods.order}`)
  327. else res = await that.$api(`/orderDetail/${that.goods.order}`);
  328. if (res.errcode == '0') {
  329. let status = that.statusList.find(i => i.value == res.data.status)
  330. // 过滤店铺订单
  331. let shop_goods;
  332. if (that.goods.status != '0') {
  333. // 已支付订单
  334. shop_goods = res.data.goods
  335. } else {
  336. // 未支付订单
  337. if (!that.id) shop_goods = res.data.goods.filter(i => i.shop == that.shop_id)
  338. else shop_goods = res.data.goods.filter(i => i.shop == that.shop._id)
  339. if (shop_goods.length > 0) shop_goods = shop_goods[0].goods
  340. }
  341. let ordernfo = {
  342. "no": res.data && res.data.no,
  343. "goods": shop_goods,
  344. "status": status.label || '暂无',
  345. "is_status": res.data.status
  346. }
  347. let data = {
  348. "_id": 'order' + moment(new Date()).valueOf(),
  349. "speaker": that.user._id,
  350. "content": that.goods.order,
  351. "ordernfo": ordernfo,
  352. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  353. "msg_type": '3',
  354. "is_send": '0'
  355. }
  356. if (!that.id) data.shop = that.shop_id
  357. else data.room = that.id
  358. that.msgList.push(data);
  359. }
  360. }
  361. // 跳转到最后一条数据 与前面的:id进行对照
  362. // 如果是下拉刷新聊天记录不跳到最后一条
  363. if (that.is_bottom == true) that.goBottom();
  364. },
  365. // 查询历史记录
  366. async search() {
  367. const that = this;
  368. // 查询房间信息
  369. // 如果是下拉刷新聊天记录不请求房间信息
  370. if (that.is_bottom == true) {
  371. res = await that.$api(`/room/${that.id}`, `GET`, {}, 'chat')
  372. if (res.errcode == '0') {
  373. that.$set(that, `shop`, res.data && res.data.shop);
  374. if (res.data && res.data.shop && res.data.shop.name) {
  375. uni.setNavigationBarTitle({
  376. title: res.data.shop.name
  377. });
  378. }
  379. } else {
  380. uni.showToast({
  381. title: res.errmsg,
  382. icon: 'none'
  383. })
  384. }
  385. }
  386. let info = {
  387. skip: that.skip,
  388. limit: that.limit,
  389. room: that.id
  390. }
  391. let res;
  392. res = await that.$api(`/chatRecord`, `GET`, {
  393. ...info,
  394. }, 'chat');
  395. if (res.errcode == '0') {
  396. let msgList = [...res.data, ...that.msgList];
  397. msgList.sort(function(a, b) {
  398. return a.time > b.time ? 1 : -1;
  399. });
  400. that.$set(that, `total`, res.total)
  401. for (let val of msgList) {
  402. if (val.msg_type == '2') {
  403. // 商品
  404. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  405. id: val.content
  406. });
  407. if (res.errcode == '0') {
  408. let indexSpecs;
  409. // 显示最低价格的规格信息,不考虑库存问题
  410. if (res.data.specs && res.data.specs.length > 0) {
  411. // 规格排序
  412. indexSpecs = res.data.specs.sort(function(a, b) {
  413. let i, j;
  414. if (a.price) i = 'price'
  415. else i = 'sell_money'
  416. if (b.price) j = 'price'
  417. else j = 'sell_money'
  418. return a[i] - b[j];
  419. })
  420. }
  421. let act = res.data.act.map(i => {
  422. return i.tag
  423. })
  424. let goodsInfo = {
  425. "file": res.data && res.data.goods && res.data.goods.file && res.data.goods
  426. .file[0]
  427. .url,
  428. "name": res.data && res.data.goods && res.data.goods.name,
  429. "spec": indexSpecs[0],
  430. "act": act,
  431. }
  432. val.goodsInfo = goodsInfo
  433. val.is_send = '1'
  434. }
  435. } else if (val.msg_type == '3') {
  436. // 订单
  437. res = await that.$api(`/viewOrder/getOrder/${val.content}`)
  438. if (res.errcode == '0') {
  439. let status = that.statusList.find(i => i.value == res.data.status)
  440. // 过滤店铺订单
  441. let shop_goods;
  442. if (res.data.status != '0') {
  443. // 已支付订单
  444. shop_goods = res.data.goods
  445. } else {
  446. // 未支付订单
  447. if (!that.id) shop_goods = res.data.goods.filter(i => i.shop == that.shop_id)
  448. else shop_goods = res.data.goods.filter(i => i.shop == that.shop._id)
  449. if (shop_goods.length > 0) shop_goods = shop_goods[0].goods
  450. }
  451. let ordernfo = {
  452. "no": res.data && res.data.no,
  453. "goods": shop_goods,
  454. "status": status.label || '暂无',
  455. "is_status": res.data.status
  456. }
  457. val.ordernfo = ordernfo
  458. val.is_send = '1'
  459. }
  460. }
  461. }
  462. that.$set(that, `msgList`, msgList);
  463. } else {
  464. uni.showToast({
  465. title: res.errmsg,
  466. icon: 'none'
  467. })
  468. }
  469. let id = that.msgList.filter(i => {
  470. if (i.speaker != that.user._id) return i.is_read = '0';
  471. })
  472. let ids = id.map(i => {
  473. return i._id
  474. })
  475. if (ids.length > 0) {
  476. // 信息已读
  477. res = await that.$api(`/chatRecord/read`, `POST`, {
  478. ids
  479. }, 'chat')
  480. if (res.errcode == '0') {} else {
  481. uni.showToast({
  482. title: res.errmsg,
  483. icon: 'none'
  484. })
  485. }
  486. }
  487. },
  488. // 进行图片的预览
  489. previewImg(e) {
  490. const that = this;
  491. // 预览图片
  492. uni.previewImage({
  493. current: 0,
  494. urls: [e],
  495. longPressActions: {
  496. itemList: ['发送给朋友', '保存图片', '收藏'],
  497. success: function(data) {
  498. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) +
  499. '张图片');
  500. },
  501. fail: function(err) {
  502. console.log(err.errMsg);
  503. }
  504. }
  505. });
  506. },
  507. //接受输入内容
  508. async inputs(e) {
  509. const that = this;
  510. let user = that.user
  511. if (user._id) {
  512. //时间间隔处理
  513. let data = {
  514. "speaker": user._id,
  515. "content": e.message,
  516. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  517. "msg_type": e.type
  518. };
  519. // 发送给服务器消息
  520. if (!that.id) data.shop = that.shop_id
  521. else data.room = that.id
  522. let res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
  523. if (res.errcode == '0') {
  524. that.msgList.push(res.data);
  525. } else {
  526. uni.showToast({
  527. title: res.errmsg,
  528. icon: 'none'
  529. })
  530. }
  531. // 跳转到最后一条数据 与前面的:id进行对照
  532. that.goBottom();
  533. } else {
  534. uni.showToast({
  535. title: '未登录账号无法发送消息 ,请及时登录!',
  536. icon: 'none'
  537. })
  538. }
  539. },
  540. // 发送连接
  541. async toSend(e) {
  542. const that = this;
  543. //时间间隔处理
  544. let data = {
  545. "speaker": e.speaker,
  546. "content": e.content,
  547. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  548. "msg_type": e.msg_type
  549. };
  550. if (!that.id) data.shop = that.shop_id
  551. else data.room = that.id
  552. let res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
  553. if (res.errcode == '0') {
  554. e.is_send = '1'
  555. that.msgList = that.msgList.map(t => {
  556. return t.time === e.time ? e : t;
  557. });
  558. } else {
  559. uni.showToast({
  560. title: res.errmsg,
  561. icon: 'none'
  562. })
  563. }
  564. },
  565. // 发送商品
  566. async sendGoods() {
  567. const that = this;
  568. let res;
  569. let info = {
  570. skip: that.skip,
  571. limit: that.limit,
  572. shop: that.shop._id || that.shop_id
  573. };
  574. // 首页产品列表
  575. res = await that.$api(`/viewGoods/indexGoodsList`, `GET`, {
  576. ...info
  577. });
  578. if (res.errcode == '0') {
  579. let list = [...that.list, ...res.data];
  580. that.$set(that, `list`, list);
  581. that.$set(that, `total`, res.total)
  582. that.$set(that, `popupShow`, '1')
  583. that.$refs.specShow.open();
  584. }
  585. },
  586. // 发送商品
  587. async toGoods(e) {
  588. const that = this;
  589. let user = that.user
  590. if (user._id) {
  591. let res;
  592. // 商品
  593. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  594. id: e._id
  595. });
  596. if (res.errcode == '0') {
  597. let indexSpecs;
  598. // 显示最低价格的规格信息,不考虑库存问题
  599. if (res.data.specs && res.data.specs.length > 0) {
  600. // 规格排序
  601. indexSpecs = res.data.specs.sort(function(a, b) {
  602. let i, j;
  603. if (a.price) i = 'price'
  604. else i = 'sell_money'
  605. if (b.price) j = 'price'
  606. else j = 'sell_money'
  607. return a[i] - b[j];
  608. })
  609. }
  610. let act = res.data.act.map(i => {
  611. return i.tag
  612. })
  613. let goodsInfo = {
  614. "file": res.data && res.data.goods && res.data.goods.file && res.data.goods
  615. .file[0]
  616. .url,
  617. "name": res.data && res.data.goods && res.data.goods.name,
  618. "spec": indexSpecs[0],
  619. "act": act,
  620. }
  621. //时间间隔处理
  622. let data = {
  623. "speaker": user._id,
  624. "content": e._id,
  625. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  626. "msg_type": '2',
  627. };
  628. if (!that.id) data.shop = that.shop_id
  629. else data.room = that.id
  630. res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
  631. if (res.errcode == '0') {
  632. res.data.goodsInfo = goodsInfo
  633. res.data.is_send = '1'
  634. that.msgList.push(res.data);
  635. } else {
  636. uni.showToast({
  637. title: res.errmsg,
  638. icon: 'none'
  639. })
  640. }
  641. }
  642. // 跳转到最后一条数据 与前面的:id进行对照
  643. that.goBottom();
  644. that.toClose();
  645. } else {
  646. uni.showToast({
  647. title: '未登录账号无法发送消息 ,请及时登录!',
  648. icon: 'none'
  649. })
  650. }
  651. },
  652. // 分页
  653. toPage(e) {
  654. const that = this;
  655. let list = that.list;
  656. let limit = that.limit;
  657. if (that.total > list.length) {
  658. uni.showLoading({
  659. title: '加载中',
  660. mask: true
  661. })
  662. let page = that.page + 1;
  663. that.$set(that, `page`, page)
  664. let skip = page * limit;
  665. that.$set(that, `skip`, skip)
  666. if (that.popupShow == '1') that.sendGoods();
  667. else that.sendOrder();
  668. uni.hideLoading();
  669. }
  670. },
  671. // 发送订单
  672. async sendOrder() {
  673. const that = this;
  674. let user = that.user;
  675. let status = that.status;
  676. let info = {
  677. skip: that.skip,
  678. limit: that.limit,
  679. customer: user._id,
  680. shop: that.shop._id || that.shop_id,
  681. status: status
  682. }
  683. let res;
  684. if (status == '0') {
  685. res = await that.$api(`/order`, 'GET', {
  686. ...info,
  687. });
  688. } else {
  689. res = await that.$api(`/orderDetail`, 'GET', {
  690. ...info,
  691. });
  692. }
  693. if (res.errcode == '0') {
  694. let list = [...that.list, ...res.data];
  695. for (let val of list) {
  696. val.zhStatus = that.searchStatus(val.status)
  697. }
  698. that.$set(that, `list`, list);
  699. that.$set(that, `total`, res.total)
  700. that.$set(that, `popupShow`, '2')
  701. that.$refs.specShow.open();
  702. } else {
  703. uni.showToast({
  704. title: res.errmsg,
  705. icon: 'none'
  706. })
  707. }
  708. },
  709. // 发送订单
  710. async toOrder(e) {
  711. const that = this;
  712. let user = that.user
  713. if (user._id) {
  714. let res;
  715. // 订单
  716. if (e.status == '0') res = await that.$api(`/order/${e._id}`)
  717. else res = await that.$api(`/orderDetail/${e._id}`);
  718. if (res.errcode == '0') {
  719. let status = that.statusList.find(i => i.value == res.data.status)
  720. // 过滤店铺订单
  721. let shop_goods;
  722. if (e.status != '0') {
  723. // 已支付订单
  724. shop_goods = res.data.goods
  725. } else {
  726. // 未支付订单
  727. if (!that.id) shop_goods = res.data.goods.filter(i => i.shop == that.shop_id)
  728. else shop_goods = res.data.goods.filter(i => i.shop == that.shop._id)
  729. if (shop_goods.length > 0) shop_goods = shop_goods[0].goods
  730. }
  731. let ordernfo = {
  732. "no": res.data && res.data.no,
  733. "goods": shop_goods,
  734. "status": status.label || '暂无',
  735. "is_status": res.data.status
  736. }
  737. //时间间隔处理
  738. let data = {
  739. "speaker": user._id,
  740. "content": e._id,
  741. "time": moment().format('YYYY-MM-DD HH:mm:ss'),
  742. "msg_type": '3',
  743. };
  744. if (!that.id) data.shop = that.shop_id
  745. else data.room = that.id
  746. res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
  747. if (res.errcode == '0') {
  748. res.data.ordernfo = ordernfo
  749. res.data.is_send = '1'
  750. that.msgList.push(res.data);
  751. } else {
  752. uni.showToast({
  753. title: res.errmsg,
  754. icon: 'none'
  755. })
  756. }
  757. }
  758. // 跳转到最后一条数据 与前面的:id进行对照
  759. that.goBottom();
  760. that.toClose();
  761. } else {
  762. uni.showToast({
  763. title: '未登录账号无法发送消息 ,请及时登录!',
  764. icon: 'none'
  765. })
  766. }
  767. },
  768. // 查询状态
  769. searchStatus(e) {
  770. const that = this;
  771. let data = that.statusList.find((i) => i.value == e);
  772. if (data) return data.label
  773. else return '暂无'
  774. },
  775. // 选择选项卡
  776. tabsChange(e) {
  777. const that = this;
  778. that.$set(that.tabs, `active`, e.active)
  779. that.$set(that, `status`, e.active);
  780. that.$set(that, `list`, [])
  781. that.$set(that, `skip`, 0)
  782. that.$set(that, `limit`, 6)
  783. that.$set(that, `page`, 0)
  784. that.sendOrder()
  785. },
  786. // 关闭弹框
  787. toClose() {
  788. const that = this;
  789. that.$refs.specShow.close();
  790. that.$set(that, `list`, [])
  791. that.$set(that, `skip`, 0)
  792. that.$set(that, `limit`, 6)
  793. that.$set(that, `page`, 0)
  794. },
  795. // 店铺
  796. toShop() {
  797. const that = this;
  798. let id = that.shop._id
  799. uni.navigateTo({
  800. url: `/pagesHome/shop/index?id=${id}`
  801. })
  802. },
  803. // 查看详情
  804. toView(e) {
  805. const that = this;
  806. if (e.msg_type == '2') {
  807. let id = e.content;
  808. uni.navigateTo({
  809. url: `/pagesHome/order/detail?id=${id}`
  810. })
  811. } else {
  812. let status = e.ordernfo.is_status;
  813. uni.navigateTo({
  814. url: `/pagesMy/order/index?status=${status}`
  815. })
  816. }
  817. },
  818. //输入框高度
  819. heights(e) {
  820. const that = this;
  821. that.goBottom();
  822. },
  823. // 滚动到底部
  824. async goBottom() {
  825. const that = this;
  826. that.scrollToView = '';
  827. let lastItem = that.msgList.at(-1);
  828. that.$nextTick(function() {
  829. that.scrollToView = 'msg' + (lastItem._id)
  830. })
  831. },
  832. // 下拉刷新分页
  833. getFresh(e) {
  834. const that = this;
  835. that.triggered = true;
  836. let msgList = that.msgList;
  837. let limit = that.limit;
  838. setTimeout(() => {
  839. if (that.total > msgList.length) {
  840. uni.showLoading({
  841. title: '加载中',
  842. mask: true
  843. })
  844. let page = that.page + 1;
  845. that.$set(that, `page`, page)
  846. let skip = page * limit;
  847. that.$set(that, `skip`, skip)
  848. that.$set(that, `is_bottom`, false)
  849. that.search();
  850. uni.hideLoading();
  851. } else {
  852. uni.showToast({
  853. title: `没有更多聊天记录了`,
  854. icon: 'none'
  855. })
  856. }
  857. that.triggered = false;
  858. }, 1000)
  859. },
  860. clearPage() {
  861. const that = this;
  862. that.$set(that, `msgList`, [])
  863. that.$set(that, `skip`, 0)
  864. that.$set(that, `limit`, 6)
  865. that.$set(that, `page`, 0)
  866. },
  867. }
  868. }
  869. </script>
  870. <style lang="scss">
  871. .main {
  872. display: flex;
  873. flex-direction: column;
  874. width: 100vw;
  875. height: 100vh;
  876. overflow: hidden;
  877. .one {
  878. position: relative;
  879. flex-grow: 1;
  880. .scroll-view {
  881. .chat-ls {
  882. padding: 2vw 2vw 0 2vw;
  883. .chat-time {
  884. font-size: 24rpx;
  885. color: rgba(39, 40, 50, 0.3);
  886. line-height: 34rpx;
  887. padding: 10rpx 0rpx;
  888. text-align: center;
  889. }
  890. .msg-m {
  891. display: flex;
  892. padding: 20rpx 0;
  893. .user-img {
  894. flex: none;
  895. width: 80rpx;
  896. height: 80rpx;
  897. border-radius: 40rpx;
  898. border: 1px solid #c0c0c0;
  899. }
  900. .message {
  901. flex: none;
  902. max-width: 480rpx;
  903. }
  904. .img {
  905. margin: 0 20rpx;
  906. }
  907. .msg-text {
  908. font-size: 32rpx;
  909. color: rgba(39, 40, 50, 1);
  910. line-height: 44rpx;
  911. padding: 18rpx 24rpx;
  912. word-break: break-all;
  913. }
  914. .msg-img {
  915. max-width: 400rpx;
  916. border-radius: 20rpx;
  917. }
  918. .msg-goods {
  919. display: flex;
  920. padding: 20rpx 10rpx;
  921. background-color: #f0f0f0;
  922. border-radius: 10rpx;
  923. .image {
  924. width: 100rpx;
  925. height: 100rpx;
  926. border-radius: 10rpx;
  927. }
  928. .goods_1 {
  929. width: 350rpx;
  930. margin: 0 0 0 10rpx;
  931. .name {
  932. font-size: 14px;
  933. }
  934. .money {
  935. .money_1 {
  936. color: #23B67A;
  937. font-size: 16px;
  938. padding: 0 1vw 0 0;
  939. font-weight: bold;
  940. text {
  941. font-size: 12px;
  942. }
  943. }
  944. .money_2 {
  945. font-size: 16px;
  946. padding: 0 1vw 0 0;
  947. color: #ff0000;
  948. font-weight: bold;
  949. text {
  950. font-size: 12px;
  951. }
  952. }
  953. .money_2:last-child {
  954. font-size: 14px;
  955. color: #858585;
  956. text-decoration: line-through;
  957. }
  958. }
  959. .act {
  960. .label {
  961. font-size: 12px;
  962. color: #FFA500;
  963. border: 1px solid #FFA500;
  964. border-radius: 5px;
  965. padding: 0 1vw;
  966. margin: 0 1vw 0 0;
  967. }
  968. }
  969. .button {
  970. text-align: right;
  971. margin: 1rpx 0;
  972. text {
  973. font-size: 12px;
  974. padding: 10rpx;
  975. border-radius: 10rpx;
  976. color: #FF4500;
  977. background-color: #FFF8DC;
  978. }
  979. }
  980. }
  981. }
  982. .msg-order {
  983. width: 460rpx;
  984. padding: 20rpx 10rpx;
  985. background-color: #f0f0f0;
  986. border-radius: 10rpx;
  987. .order_1 {
  988. display: flex;
  989. flex-wrap: wrap;
  990. margin: 10rpx 0;
  991. .image {
  992. width: 100rpx;
  993. height: 100rpx;
  994. border-radius: 10rpx;
  995. margin: 0 5rpx 0 0;
  996. border: 1rpx solid #858585;
  997. }
  998. }
  999. .order_2 {
  1000. margin: 10rpx 0;
  1001. .no {
  1002. font-size: 12px;
  1003. }
  1004. .status {
  1005. display: flex;
  1006. justify-content: space-between;
  1007. margin: 5rpx 0;
  1008. text {
  1009. padding: 1rpx 2rpx;
  1010. border-radius: 5px;
  1011. font-size: 12px;
  1012. color: #ff0000;
  1013. }
  1014. .button {
  1015. text-align: right;
  1016. text {
  1017. font-size: 12px;
  1018. padding: 10rpx;
  1019. border-radius: 10rpx;
  1020. color: #FF4500;
  1021. background-color: #FFF8DC;
  1022. }
  1023. }
  1024. }
  1025. }
  1026. }
  1027. }
  1028. .msg-left {
  1029. flex-direction: row;
  1030. .msg-text {
  1031. word-break: break-all;
  1032. margin-left: 16rpx;
  1033. background-color: #f1f1f1;
  1034. border-radius: 0rpx 20rpx 20rpx 20rpx;
  1035. }
  1036. .ms-img {
  1037. margin-left: 16rpx;
  1038. }
  1039. }
  1040. .msg-right {
  1041. flex-direction: row-reverse;
  1042. .msg-text {
  1043. margin-right: 16rpx;
  1044. background-color: rgba(255, 228, 49, 0.8);
  1045. border-radius: 20rpx 0rpx 20rpx 20rpx;
  1046. }
  1047. .ms-img {
  1048. margin-right: 16rpx;
  1049. }
  1050. }
  1051. }
  1052. }
  1053. }
  1054. .two {
  1055. background-color: #f0f0f0;
  1056. border-top: 1px solid rgba(39, 40, 50, 0.1);
  1057. }
  1058. }
  1059. .uni-popup {
  1060. z-index: 9999 !important;
  1061. }
  1062. .popup {
  1063. display: flex;
  1064. flex-direction: column;
  1065. width: 100vw;
  1066. height: 80vh;
  1067. .close {
  1068. text-align: right;
  1069. padding: 2vw;
  1070. }
  1071. .info_1 {
  1072. position: relative;
  1073. display: flex;
  1074. flex-direction: column;
  1075. height: 74vh;
  1076. }
  1077. }
  1078. .scroll-view {
  1079. position: absolute;
  1080. top: 0;
  1081. left: 0;
  1082. right: 0;
  1083. bottom: 0;
  1084. .list-scroll-view {
  1085. display: flex;
  1086. flex-direction: column;
  1087. }
  1088. }
  1089. </style>