index.vue 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262
  1. <template>
  2. <view class="container" :data-theme="theme">
  3. <!-- :style="userInfo.avatar?{ backgroundImage: `url(${userInfo.avatar})` }: ''" -->
  4. <!-- #ifdef MP || APP -->
  5. <NavBar navTitle="个人主页" :isBackgroundColor="false" iconColor='#fff'></NavBar>
  6. <!-- #endif -->
  7. <view class="header">
  8. <view class="header-bg" :style="{'background-image': userInfo.avatar}">
  9. <img :src="userInfo.avatar" alt="">
  10. <view class="header-bg-mc"></view>
  11. </view>
  12. <view class="user_wrapper flex-between-center">
  13. <image v-if="userInfo.userLevelIcon" class="level_icon" :src="userInfo.userLevelIcon" alt="">
  14. <view class="flex-y-center row-middle">
  15. <image :src="userInfo.avatar || urlDomain+'crmebimage/presets/morenT.png'" class="picture">
  16. </image>
  17. <view class="user_text flex-1">
  18. <view class="name acea-row">
  19. <text>{{userInfo.isLogoff ? "用户已注销": (userInfo.nickname || '')}}</text>
  20. </view>
  21. <!-- <view v-if="userInfo.id" class="user_id">ID: {{userInfo.id || ''}}</view> -->
  22. <view class="flex-between-center mt-16" @click="onEdit('school')">
  23. <view class="user_id">学校: {{school || '暂无'}}</view>
  24. <text v-show="userInfo.id==uid" class="ml10 iconfont icon-fabuzhongcao"></text>
  25. </view>
  26. </view>
  27. </view>
  28. <view v-if="id && id!=uid" @click.stop="followAuthor">
  29. <button v-if="!userInfo.isConcerned" class="follow_btn focus">
  30. <text class="iconfont icon-jiahao2"></text>关注
  31. </button>
  32. <button v-else class="follow_btn focused">已关注</button>
  33. </view>
  34. <view v-if="userInfo.id==uid">
  35. <navigator hover-class="none" :url="`/pages/discover/discover_release/index?fair=${true}`" class="follow_btn focus bg-color">
  36. 去发布
  37. </navigator>
  38. </view>
  39. </view>
  40. <view class="acea-row plant_info" @click="onEdit('signature')">
  41. <view v-if="!userInfo.signature && userInfo.id==uid">点击可编辑个性签名</view>
  42. <view class="" v-if="userInfo.signature" style="width: 92%;">
  43. <view class="acea-row" v-if="userInfo.isMore || userInfo.signature.length<=30">
  44. <text class="signature">{{userInfo.signature}}</text>
  45. <text v-if="userInfo.isMore" class="more" @click.stop="moreTap">收起</text>
  46. </view>
  47. <view v-else class="acea-row">
  48. <text class="info signature">{{userInfo.signature.slice(0,23)}}...</text>
  49. <text class="more" @click.stop="moreTap"> 展开</text>
  50. </view>
  51. </view>
  52. <text v-show="userInfo.id==uid" class="ml10 iconfont icon-fabuzhongcao"></text>
  53. </view>
  54. <view class="plant_info" style="padding-bottom: 30rpx;">
  55. <view class="count_wrapper acea-row">
  56. <navigator :url="!id ? '/pages/discover/discover_follow/index?type=follow' : ''" class="item" hover-class="none">
  57. <text class="mr10">{{userInfo.concernedNum}}</text> 关注
  58. </navigator>
  59. <navigator :url="!id ? '/pages/discover/discover_follow/index?type=fans' : ''" class="item" hover-class="none">
  60. <text class="mr10">{{userInfo.fansNum}}</text> 粉丝
  61. </navigator>
  62. <view class="item">
  63. <text class="mr10">{{userInfo.likeNum}}</text> 获赞
  64. </view>
  65. </view>
  66. </view>
  67. <view v-if="!id && isShow" class="tab_count relative">
  68. <scroll-view :scroll-x="true" scroll-with-animation style="white-space: nowrap;margin: 20rpx 0rpx;padding: 0 20rpx;box-sizing: border-box;">
  69. <block>
  70. <text @click.stop="changeTab(0)" :class="tab==0 ? 'on' : ''">我发布的</text>
  71. <text @click.stop="changeTab(1)" :class="tab==1 ? 'on' : ''">我想要的</text>
  72. <text @click.stop="changeTab(2)" :class="tab==2 ? 'on' : ''">我收藏的</text>
  73. <text @click.stop="changeTab(3)" :class="tab==3 ? 'on' : ''">我购买的</text>
  74. <text @click.stop="changeTab(4)" :class="tab==4 ? 'on' : ''">售后/退款</text>
  75. </block>
  76. </scroll-view>
  77. </view>
  78. </view>
  79. <view class="main">
  80. <view class="tab-conts">
  81. <view v-if="list.length > 0 && tab!==3 && tab!==4" class="goods-wrap flex-1">
  82. <view class="goods">
  83. <!-- <WaterfallsFlow v-if="list.length" :wfList="list" :fromType="1" fromTo="home">
  84. </WaterfallsFlow> -->
  85. <WaterfallsFlow :wfList='list' :type="1" :isDynamics="true" :userFair="true" :isManage="manage">
  86. <template slot-scope="{item}">
  87. <WaterfallsFlowItem :item="item" :type="1" :isStore="1" />
  88. </template>
  89. </WaterfallsFlow>
  90. </view>
  91. </view>
  92. <view class='my-order' v-else-if="tab == 3">
  93. <view class='list'>
  94. <view class='item' v-for="(item,index) in list" :key="index">
  95. <view class='title acea-row row-between-wrapper'>
  96. <view class="acea-row row-middle">
  97. <view v-if="item.merName">
  98. <navigator :url="`/pages/merchant/home/index?merId=${item.merId}`" hover-class="none">
  99. <text class='iconfont icon-shangjiadingdan mr10'></text>
  100. <text class="mr10">{{item.merName}}</text>
  101. <text class='iconfont icon-xiangyou'></text>
  102. </navigator>
  103. </view>
  104. <view v-else>
  105. <text class="mr10">{{item.orderNo}}</text>
  106. </view>
  107. </view>
  108. <view v-if="item.refundStatus == 3" class='font_color'>已退款</view>
  109. <template v-else>
  110. <view class='font_color'>{{item.status | orderStatusFilter}}</view>
  111. </template>
  112. </view>
  113. <view v-for="(items,indexs) in item.orderInfoList" :key="indexs">
  114. <view @click='goOrderDetails(item)' class='item-info acea-row row-between row-top'>
  115. <view class='pictrue'>
  116. <easy-loadimage mode="widthFix" :image-src="items.image"></easy-loadimage>
  117. </view>
  118. <view class='text acea-row row-between'>
  119. <view class="nameBox">
  120. <view class='name line2'>
  121. <span v-if="Number(item.type) > 0 && Number(item.type) < 3" class="activity bg_color">{{item.type | orderTypeFilter}}</span>
  122. <span v-if="Number(item.secondType) === 1" class="activity bg_color">积分</span>
  123. <span>{{items.productName}}</span>
  124. </view>
  125. <view class="sku line1">{{items.sku}}</view>
  126. </view>
  127. <view class='money'>
  128. <view>¥{{items.price}}</view>
  129. <view>x{{items.payNum}}</view>
  130. </view>
  131. </view>
  132. </view>
  133. <view v-if="items.applyRefundNum && item.refundStatus > -1" class="text-24rpx font-color oppoSans-R mr-20px px-30 mt-14">
  134. 售后申请数量:{{ items.applyRefundNum }}
  135. </view>
  136. </view>
  137. <view class='totalPrice' :class="item.status===0?'no-border':''">{{item.totalNum}}
  138. 件商品,总金额
  139. <text class='money semiBold'> ¥{{item.payPrice}}</text>
  140. </view>
  141. <!-- <view v-if="item.status===0" class="mx-20 flex">
  142. <view class="tips w-full px-20 f-s-26">
  143. 付款提醒<text class="ml-20 text-999">请在{{item.expirationTime}}前完成支付!</text>
  144. </view>
  145. </view> -->
  146. <!-- 订单状态(0:待支付,1:待发货,2:部分发货, 3:待核销,4:待收货,5:已收货,6:已完成,9:已取消) -->
  147. <view class='bottom acea-row row-right row-middle'>
  148. <view class='bnt cancelBnt' v-if="item.status === 0" @click='cancelOrder(index,item.orderNo)'>
  149. 取消订单
  150. </view>
  151. <view class='bnt bg_color' v-if="item.status === 0" @click='goPay(item)'>
  152. 立即付款
  153. </view>
  154. <view class='bnt bg_color' v-if="((item.paid || item.status == 9)&&item.type!=2)||(item.type==2&&item.groupBuyRecordStatus!==0)"
  155. @click='goOrderDetails(item)'>
  156. 查看详情</view>
  157. <view class='bnt cancelBnt' v-if="item.status==6 || item.status==9" @click='delOrder(item.orderNo,index)'>
  158. 删除订单
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. </view>
  164. <view v-else-if="tab == 4">
  165. <view class='goodWrapper borRadius14' v-for="(items,index) in list" :key="index">
  166. <view v-if="refundTypeStatus ==-1" class='orderNum acea-row'>
  167. <text class="mr10 iconfont icon-shangjiadingdan"></text>
  168. <text class="no mr10">{{items.merName}}</text>
  169. </view>
  170. <view v-else class='orderNum acea-row row-between'>
  171. <view class="acea-row">
  172. <view class="tit mr10">退款单号: </view>
  173. <view class="no">{{items.refundOrderNo}}</view>
  174. </view>
  175. <view class="afterSalesType">
  176. <span class="iconfont" :class="items.afterSalesType===1?'icon-jintuikuan':'icon-tuihuotuikuan'"></span>
  177. <span>{{items.afterSalesType===1?'仅退款':'退货退款'}}</span>
  178. </view>
  179. </view>
  180. <view class='item acea-row row-between-wrapper'>
  181. <view class='pictrue'>
  182. <image :src='items.image'></image>
  183. </view>
  184. <view class='text'>
  185. <view class='name line1 mb20'>{{items.productName}}</view>
  186. <view class="f-s-20 text-999 mb24">{{items.sku}}</view>
  187. <view class='acea-row row-between-wrapper'>
  188. <view class='num mr20 line-heightOne'>
  189. {{refundTypeStatus ==-1?'数量:'+items.payNum:'申请数量:'+items.applyRefundNum}}
  190. </view>
  191. <view v-show="refundTypeStatus !==-1" class='attr font-color line-heightOne'>
  192. {{items.refundStatus===3?'已退款':'申请退款'}}:{{items.refundPrice}}
  193. </view>
  194. </view>
  195. </view>
  196. </view>
  197. <view v-if="refundTypeStatus===-1" class="btn-box acea-row row-between">
  198. <view @click.stop="handlerToRecord(items.orderNo)" v-if="items.applyRefundNum+items.refundNum>0" class="applyRefundNum">
  199. <text>有{{items.applyRefundNum+items.refundNum}}件商品已申请售后</text><span class="iconfont icon-gengduo3 ml10" style="font-size: 20rpx;"></span>
  200. </view>
  201. <view v-else></view>
  202. <view class="btn bg-color acea-row row-center" style="color: #fff;" @click="goRefund(items)">申请售后</view>
  203. </view>
  204. <view v-else>
  205. <view class="refundTypeStatus line1">
  206. {{ items.refundStatus| refundStatusFilter}}
  207. <span class="tips ml20">{{items.refundStatus| orderRefundTipsStatusFilter}}</span>
  208. </view>
  209. <view class="btn-box acea-row" style="justify-content: flex-end;">
  210. <view></view>
  211. <view v-if="items.refundStatus === 0 || items.refundStatus === 4 || items.refundStatus === 5"
  212. class="btn btn-999 acea-row row-center line-heightOne" @click="handleRevokeRefund(items.refundOrderNo)">撤销售后</view>
  213. <view v-if="items.refundStatus === 4 && items.afterSalesType === 2" style="color: #fff;"
  214. class="btn bg-color acea-row row-center line-heightOne ml20" @click="handleReturningRefund(items)">退回商品</view>
  215. </view>
  216. </view>
  217. </view>
  218. </view>
  219. <view class="empty-boxs noContent" v-if="list.length == 0 && !loading">
  220. <emptyPage title="暂无更多内容~" mTop="13%" :imgSrc="urlDomain+'crmebimage/presets/noguanzhu.png'">
  221. </emptyPage>
  222. </view>
  223. <view class='loadingicon acea-row row-center-wrapper'>
  224. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
  225. <view class="end" :hidden="loading || list.length == 0"><text :class="loaded ? 'loaded' : ''">{{loadTitle}}</text>
  226. </view>
  227. </view>
  228. </view>
  229. </view>
  230. <uni-popup ref="inputDialog" type="dialog">
  231. <view v-if="isShowSignature" class="tui-modal-custom">
  232. <view class="fs-32 fw-500 lh-44rpx text-center">{{fieldStr == 'signature' ? '编辑简介' : '编辑学校'}}</view>
  233. <view class="mt-24 bg--w111-f5f5f5 rd-16rpx p-24">
  234. <textarea v-if="fieldStr == 'signature'" class="w-full fs-26 h-342" ref="myTextarea" v-model="signature" :focus="focus"
  235. :always-embed="true" :adjust-position="true" cursor-spacing="85rpx" placeholder="请输入内容" :maxlength="100" name="desc" />
  236. <input v-if="fieldStr == 'school'" class="placeholder" type='text' v-model='school' :focus="focus"
  237. placeholder='请输入学校' placeholder-class='placeholder'></input>
  238. </view>
  239. <view class="flex-between-center mt-40">
  240. <view class="w-244 h-72 rd-36rpx flex-center fs-26 font-color close-btn" @tap="handleInputClose">取消
  241. </view>
  242. <view class="w-244 h-72 rd-36rpx flex-center bg-color text--w111-fff fs-26"
  243. @tap="handleInputConfirm">保存
  244. </view>
  245. </view>
  246. </view>
  247. </uni-popup>
  248. </view>
  249. </template>
  250. <script>
  251. // +----------------------------------------------------------------------
  252. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  253. // +----------------------------------------------------------------------
  254. // | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
  255. // +----------------------------------------------------------------------
  256. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  257. // +----------------------------------------------------------------------
  258. // | Author: CRMEB Team <admin@crmeb.com>
  259. // +----------------------------------------------------------------------
  260. import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
  261. import WaterfallsFlowItem from '@/components/discoverFlowItem/discoverFlowItem.vue'
  262. import emptyPage from '@/components/emptyPage.vue';
  263. import NavBar from '@/components/navBar.vue';
  264. import {
  265. userHomeApi,
  266. myHomeApi,
  267. authorNoteApi,
  268. mySecondHandListApi,
  269. myLikeListApi,
  270. secondHandListApi,
  271. secondHandFollowListApi,
  272. editSignatureApi,
  273. editSchoolApi
  274. } from '@/api/discover.js';
  275. import {
  276. getSecondHandDetail,
  277. secondHandTake,
  278. secondHandDel,
  279. secondHandCancel,
  280. secondHandStatusImgApi,
  281. secondHandSend,
  282. secondHandOrderList,
  283. secondHandAfterSaleList
  284. } from '@/api/secondHand.js';
  285. import {
  286. ProductTypeEnum,
  287. } from "@/enums/productEnums";
  288. import {
  289. Debounce
  290. } from '@/utils/validate.js';
  291. import {
  292. toLogin
  293. } from '@/libs/login.js';
  294. import {
  295. mapGetters
  296. } from "vuex";
  297. import {
  298. discoverFollowAuthor
  299. } from '@/libs/follow.js';
  300. import easyLoadimage from '@/components/base/easy-loadimage.vue';
  301. const app = getApp();
  302. let sysHeight = uni.getSystemInfoSync().statusBarHeight;
  303. export default {
  304. components: {
  305. WaterfallsFlow,
  306. WaterfallsFlowItem,
  307. emptyPage,
  308. NavBar,
  309. easyLoadimage
  310. },
  311. data() {
  312. return {
  313. sysHeight: sysHeight,
  314. urlDomain: this.$Cache.get("imgHost"),
  315. theme: app.globalData.theme,
  316. ProductTypeEnum: ProductTypeEnum,
  317. list: [], // 内容列表
  318. loadTitle: '加载更多',
  319. loading: false,
  320. loaded: false,
  321. isShowAuth: false, //是否隐藏授权
  322. isAuto: false, //没有授权的不会自动授权
  323. userInfo: {},
  324. where: {
  325. page: 1,
  326. limit: 10
  327. },
  328. tab: 0,
  329. id: '', //作者id
  330. isShow: false,
  331. focus: false,
  332. isShowSignature: false, // 是否显示简介编辑内容
  333. signature: '', //弹窗中的签名
  334. school: '',
  335. fieldStr: '',
  336. manage: 1
  337. }
  338. },
  339. created() {},
  340. computed: {
  341. ...mapGetters(['isLogin', 'uid']),
  342. },
  343. watch: {},
  344. onLoad: function(options) {
  345. this.id = options.id ? options.id : '';
  346. },
  347. onShow() {
  348. // if (this.id) {
  349. // this.isShow = false
  350. // this.getUserHome(this.id);
  351. // this.authorNoteList();
  352. // } else {
  353. this.isShow = true
  354. this.getMyHome();
  355. this.myNoteList();
  356. // }
  357. },
  358. onReady() {},
  359. mounted: function() {},
  360. methods: {
  361. moreTap() {
  362. this.$set(this.userInfo, 'isMore', !this.userInfo.isMore)
  363. },
  364. //个性签名取消
  365. handleInputClose() {
  366. this.$refs.inputDialog.close()
  367. this.isShowSignature = false;
  368. },
  369. //个性签名保存
  370. handleInputConfirm() {
  371. const api = this.fieldStr == 'signature' ? editSignatureApi({signature: this.signature}) : editSchoolApi({school: this.school});
  372. api.then(res => {
  373. uni.showToast({
  374. title: res.data,
  375. icon: 'none'
  376. })
  377. this.getMyHome();
  378. }).catch(err => {
  379. uni.showToast({
  380. title: err,
  381. icon: 'none'
  382. })
  383. });
  384. // 关闭窗口后,恢复默认内容
  385. this.$refs.inputDialog.close()
  386. this.isShowSignature = false;
  387. },
  388. //编辑个性签名
  389. onEdit(str) {
  390. if (this.userInfo.id == this.uid) {
  391. this.fieldStr = str;
  392. this.isShowSignature = true;
  393. this.signature = this.userInfo.signature;
  394. this.$refs.inputDialog.open();
  395. }
  396. },
  397. //回退页面之后重新加载页面
  398. reFresh() {
  399. this.loading = false;
  400. this.loaded = false;
  401. this.where = {
  402. page: 1,
  403. limit: 10
  404. }
  405. this.list = []
  406. // if (this.id) {
  407. // this.getUserHome(this.id);
  408. // this.authorNoteList();
  409. // } else {
  410. this.getMyHome();
  411. this.myNoteList();
  412. // }
  413. },
  414. //获取我的用户信息
  415. getMyHome() {
  416. myHomeApi().then(res => {
  417. console.log(res.data)
  418. this.userInfo = res.data;
  419. this.signature = this.userInfo.signature
  420. this.school = this.userInfo.school
  421. this.isMore = false;
  422. }).catch(err => {
  423. uni.showToast({
  424. title: err,
  425. icon: 'none'
  426. })
  427. });
  428. },
  429. /**
  430. * 去订单详情
  431. */
  432. goOrderDetails: function(item, status) {
  433. if (!item.orderNo) return this.$util.Tips({
  434. title: '缺少订单号无法查看订单详情'
  435. });
  436. //虚拟商品
  437. if (item.secondType === this.ProductTypeEnum.CloudDrive || item.secondType === this.ProductTypeEnum
  438. .CardPassword) {
  439. // #ifdef MP
  440. uni.navigateTo({
  441. url: '/pages/goods/virtual_order_details/index?orderNo=' + item.orderNo
  442. })
  443. // #endif
  444. // #ifndef MP
  445. uni.navigateTo({
  446. animationType: animationType.type,
  447. animationDuration: animationType.duration,
  448. url: '/pages/goods/virtual_order_details/index?orderNo=' + item.orderNo
  449. })
  450. // #endif
  451. } else {
  452. // #ifdef MP
  453. uni.navigateTo({
  454. url: '/pages/goods/order_details/index?orderNo=' + item.orderNo + '&orderType=secondHand'
  455. })
  456. // #endif
  457. // #ifndef MP
  458. uni.navigateTo({
  459. animationType: animationType.type,
  460. animationDuration: animationType.duration,
  461. url: '/pages/goods/order_details/index?orderNo=' + item.orderNo + "'&orderType=secondHand'
  462. })
  463. // #endif
  464. }
  465. },
  466. //逛逛用户主页
  467. getUserHome(id) {
  468. userHomeApi(id).then(res => {
  469. this.userInfo = res.data
  470. }).catch(err => {
  471. uni.showToast({
  472. title: err,
  473. icon: 'none'
  474. })
  475. });
  476. },
  477. // 关注作者
  478. followAuthor: function() {
  479. if (this.isLogin) {
  480. if (this.userInfo.isLogoff) return;
  481. discoverFollowAuthor(this.id).then(() => {
  482. this.$set(this.userInfo, 'isConcerned', !this.userInfo.isConcerned);
  483. });
  484. } else {
  485. toLogin();
  486. }
  487. },
  488. changeTab(tab) {
  489. this.tab = tab
  490. this.where.page = 1
  491. this.loaded = this.loading = false
  492. this.list = []
  493. if (tab === 0) {
  494. this.manage = 1;
  495. this.myNoteList();
  496. } else if (tab === 1) {
  497. this.manage = 0;
  498. this.myLikeList();
  499. } else if (tab === 2) {
  500. this.manage = 0;
  501. this.myFollowList()
  502. } else if (tab === 3) {
  503. this.manage = 0;
  504. this.myOrderList()
  505. } else {
  506. this.manage = 0;
  507. this.mySaleList()
  508. }
  509. },
  510. // 获取售后/退款
  511. mySaleList: function() {
  512. let that = this;
  513. if (that.loaded || that.loading) return;
  514. that.loading = true;
  515. that.loadTitle = '';
  516. secondHandAfterSaleList(that.where).then(res => {
  517. let list = res.data.list;
  518. let goods = that.$util.SplitArray(list, that.list);
  519. that.loaded = list.length < that.where.limit;
  520. that.loading = false;
  521. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  522. that.$set(that, 'list', goods);
  523. that.$set(that.where, 'page', that.where.page + 1);
  524. }).catch(err => {
  525. that.loading = false;
  526. uni.showToast({
  527. title: err,
  528. icon: 'none'
  529. })
  530. })
  531. },
  532. // 获取我购买的作品
  533. myOrderList: function() {
  534. let that = this;
  535. if (that.loaded || that.loading) return;
  536. that.loading = true;
  537. that.loadTitle = '';
  538. that.where.status = -1;
  539. secondHandOrderList(that.where).then(res => {
  540. let list = res.data.list;
  541. let goods = that.$util.SplitArray(list, that.list);
  542. that.loaded = list.length < that.where.limit;
  543. that.loading = false;
  544. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  545. that.$set(that, 'list', goods);
  546. that.$set(that.where, 'page', that.where.page + 1);
  547. }).catch(err => {
  548. that.loading = false;
  549. uni.showToast({
  550. title: err,
  551. icon: 'none'
  552. })
  553. })
  554. },
  555. // 获取我的收藏作品
  556. myFollowList: function() {
  557. let that = this;
  558. if (that.loaded || that.loading) return;
  559. that.loading = true;
  560. that.loadTitle = '';
  561. secondHandFollowListApi(that.where).then(res => {
  562. let list = res.data.list;
  563. let goods = that.$util.SplitArray(list, that.list);
  564. that.loaded = list.length < that.where.limit;
  565. that.loading = false;
  566. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  567. that.$set(that, 'list', goods);
  568. that.$set(that.where, 'page', that.where.page + 1);
  569. }).catch(err => {
  570. that.loading = false;
  571. uni.showToast({
  572. title: err,
  573. icon: 'none'
  574. })
  575. })
  576. },
  577. // 获取我的点赞作品
  578. myLikeList: function() {
  579. let that = this;
  580. if (that.loaded || that.loading) return;
  581. that.loading = true;
  582. that.loadTitle = '';
  583. secondHandListApi(that.where).then(res => {
  584. let list = res.data.list;
  585. let goods = that.$util.SplitArray(list, that.list);
  586. that.loaded = list.length < that.where.limit;
  587. that.loading = false;
  588. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  589. that.$set(that, 'list', goods);
  590. that.$set(that.where, 'page', that.where.page + 1);
  591. }).catch(err => {
  592. that.loading = false;
  593. uni.showToast({
  594. title: err,
  595. icon: 'none'
  596. })
  597. })
  598. },
  599. // 获取我的的作品
  600. myNoteList: function() {
  601. let that = this;
  602. if (that.loaded || that.loading) return;
  603. that.loading = true;
  604. that.loadTitle = '';
  605. mySecondHandListApi(that.where).then(res => {
  606. let list = res.data.list;
  607. let goods = that.$util.SplitArray(list, that.list);
  608. that.loaded = list.length < that.where.limit;
  609. that.loading = false;
  610. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  611. that.$set(that, 'list', goods);
  612. that.$set(that.where, 'page', that.where.page + 1);
  613. }).catch(err => {
  614. that.loading = false;
  615. uni.showToast({
  616. title: err,
  617. icon: 'none'
  618. })
  619. })
  620. },
  621. // 作者的作品
  622. authorNoteList: function() {
  623. let that = this;
  624. if (that.loaded || that.loading) return;
  625. that.loading = true;
  626. that.loadTitle = '';
  627. this.where.authorId = this.id
  628. authorNoteApi(this.where.authorId, that.where).then(res => {
  629. let list = res.data.list;
  630. let goods = that.$util.SplitArray(list, that.list);
  631. that.loaded = list.length < that.where.limit;
  632. that.loading = false;
  633. that.loadTitle = that.loaded ? '到底了' : '加载更多';
  634. that.$set(that, 'list', goods);
  635. that.$set(that.where, 'page', that.where.page + 1);
  636. }).catch(err => {
  637. that.loading = false;
  638. uni.showToast({
  639. title: err,
  640. icon: 'none'
  641. })
  642. })
  643. },
  644. /**
  645. * 取消订单
  646. *
  647. */
  648. cancelOrder: function(index, orderNo) {
  649. let that = this;
  650. if (!orderNo) return that.$util.Tips({
  651. title: '缺少订单号无法取消订单'
  652. });
  653. uni.showModal({
  654. content: '确定取消该订单',
  655. cancelText: "取消",
  656. confirmText: "确定",
  657. showCancel: true,
  658. confirmColor: '#f55850',
  659. success: (res) => {
  660. if (res.confirm) {
  661. uni.showLoading({
  662. title: '正在取消中'
  663. });
  664. secondHandCancel(orderNo).then(res => {
  665. uni.hideLoading();
  666. return that.$util.Tips({
  667. title: '取消成功',
  668. icon: 'success'
  669. }, function() {
  670. that.getAllOrder();
  671. });
  672. }).catch(err => {
  673. return that.$util.Tips({
  674. title: err
  675. });
  676. });
  677. } else {
  678. }
  679. },
  680. })
  681. },
  682. /**
  683. * 打开支付组件
  684. *
  685. */
  686. goPay: Debounce(function(item) {
  687. uni.showLoading({
  688. title: '加载中...'
  689. });
  690. // 其他商品走正常流程,去支付收银台页面
  691. this.getToPayment('', item, 'secondHand')
  692. }),
  693. /**
  694. * 删除订单
  695. */
  696. delOrder: function(orderNo, index) {
  697. uni.showModal({
  698. content: '确定删除该订单',
  699. cancelText: "取消",
  700. confirmText: "确定",
  701. showCancel: true,
  702. confirmColor: '#f55850',
  703. success: (res) => {
  704. if (res.confirm) {
  705. let that = this;
  706. secondHandDel(orderNo).then(res => {
  707. that.getAllOrder();
  708. return that.$util.Tips({
  709. title: '删除成功',
  710. icon: 'success'
  711. });
  712. }).catch(err => {
  713. return that.$util.Tips({
  714. title: err
  715. });
  716. })
  717. } else {
  718. }
  719. },
  720. })
  721. },
  722. },
  723. onReachBottom() {
  724. // if (this.id) {
  725. // this.authorNoteList();
  726. // } else {
  727. if (this.tab === 0) {
  728. this.myNoteList();
  729. } else {
  730. this.myLikeList();
  731. }
  732. // }
  733. },
  734. onPullDownRefresh() {},
  735. // 滚动监听
  736. onPageScroll(e) {
  737. // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
  738. uni.$emit('scroll');
  739. }
  740. }
  741. </script>
  742. <style lang="scss" scoped>
  743. .close-btn {
  744. @include coupons_border_color(theme);
  745. }
  746. .tui-modal-custom {
  747. width: 600rpx;
  748. position: relative;
  749. box-sizing: border-box;
  750. padding: 40rpx;
  751. border-radius: 16px;
  752. background-color: #fff;
  753. z-index: 9999;
  754. .h-342 {
  755. min-height: 268rpx;
  756. max-height: 268rpx;
  757. ;
  758. overflow-y: scroll;
  759. }
  760. }
  761. .signature {
  762. overflow: hidden;
  763. display: -webkit-box;
  764. -webkit-line-clamp: 5;
  765. -webkit-box-orient: vertical;
  766. text-overflow: ellipsis;
  767. width: 88%;
  768. }
  769. .goods-wrap {
  770. padding-top: 24rpx;
  771. }
  772. .more {
  773. font-weight: 600;
  774. margin-left: 8rpx;
  775. }
  776. .container {
  777. background: #ffffff;
  778. min-height: 100vh;
  779. }
  780. .header-bg {
  781. position: absolute;
  782. width: 100%;
  783. height: 650rpx;
  784. top: 0;
  785. /* #ifdef MP || APP-PLUS */
  786. z-index: -1;
  787. /* #endif */
  788. /* #ifdef H5 */
  789. z-index: 0;
  790. /* #endif */
  791. z-index: 0;
  792. filter: blur(0);
  793. overflow: hidden;
  794. img {
  795. width: 100%;
  796. height: 100%;
  797. filter: blur(16rpx);
  798. transform: scale(1.5);
  799. }
  800. .header-bg-mc {
  801. position: absolute;
  802. top: 0;
  803. width: 100%;
  804. height: 100%;
  805. background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 39%, rgba(0, 0, 0, 0.7) 100%);
  806. }
  807. }
  808. .header {
  809. width: 750rpx;
  810. padding: 20rpx 0 0;
  811. box-sizing: border-box;
  812. background: linear-gradient(360deg, #72798E 0%, #384857 99%);
  813. opacity: 1;
  814. .tab_count {
  815. text-align: center;
  816. background: #ffffff;
  817. padding: 30rpx 0 15rpx 0;
  818. border-radius: 12px 12px 0 0;
  819. text {
  820. display: inline-block;
  821. font-size: 28rpx;
  822. color: #999999;
  823. margin: 0 30rpx;
  824. position: relative;
  825. padding-bottom: 14rpx;
  826. &.on {
  827. font-size: 32rpx;
  828. color: #282828;
  829. font-weight: bold;
  830. &::after {
  831. content: "";
  832. width: 80%;
  833. height: 5rpx;
  834. @include main_bg_color(theme);
  835. position: absolute;
  836. bottom: 0;
  837. left: 12rpx;
  838. }
  839. .underline {
  840. opacity: 1;
  841. }
  842. }
  843. }
  844. }
  845. .user_wrapper {
  846. align-items: center;
  847. justify-content: space-between;
  848. padding: 0 34rpx;
  849. position: relative;
  850. .level_icon {
  851. position: absolute;
  852. width: 38rpx;
  853. height: 38rpx;
  854. margin: 4rpx 0 0 6rpx;
  855. border: none;
  856. z-index: 11;
  857. bottom: 2rpx;
  858. left: 124rpx;
  859. }
  860. .image,
  861. uni-image,
  862. image {
  863. width: 140rpx;
  864. height: 140rpx;
  865. border-radius: 100%;
  866. border: 4rpx solid #ffffff;
  867. }
  868. .user_text {
  869. margin-left: 30rpx;
  870. color: #FFFFFF;
  871. .name {
  872. font-size: 34rpx;
  873. font-weight: bold;
  874. align-items: center;
  875. }
  876. .user_id {
  877. text-overflow: ellipsis;
  878. white-space: nowrap;
  879. overflow: hidden;
  880. max-width: 300rpx;
  881. font-size: 24rpx;
  882. }
  883. }
  884. }
  885. .plant_info {
  886. position: relative;
  887. padding: 0 34rpx;
  888. margin-top: 30rpx;
  889. justify-content: space-between;
  890. color: #ffffff;
  891. font-size: 24rpx;
  892. .count_wrapper {
  893. color: #FFFFFF;
  894. font-size: 24rpx;
  895. .item {
  896. text-align: center;
  897. margin-right: 60rpx;
  898. &:last-child {
  899. margin-right: 0;
  900. }
  901. text {
  902. font-size: 30rpx;
  903. margin-top: 10rpx;
  904. }
  905. }
  906. }
  907. }
  908. .iconfont {
  909. font-size: 24rpx;
  910. margin-right: 12rpx;
  911. }
  912. .follow_btn {
  913. color: #ffffff;
  914. font-size: 26rpx;
  915. display: flex;
  916. align-items: center;
  917. justify-content: center;
  918. width: 146rpx;
  919. height: 62rpx;
  920. @include linear-gradient(theme);
  921. border-radius: 33rpx;
  922. .icon-fabu {
  923. font-size: 24rpx;
  924. }
  925. &.focused {
  926. background: transparent;
  927. color: #FFFFFF;
  928. border: 1px solid #FFFFFF;
  929. }
  930. }
  931. }
  932. .main {
  933. background: #ffffff;
  934. position: relative;
  935. }
  936. .goods {
  937. // display: flex;
  938. // flex-wrap: wrap;
  939. // justify-content: space-between;
  940. // width: 750rpx;
  941. padding: 0 24rpx;
  942. }
  943. .empty {
  944. margin: 130rpx 0 150rpx;
  945. text-align: center;
  946. image,
  947. uni-image {
  948. display: inline-block;
  949. width: 414rpx;
  950. height: 305rpx;
  951. }
  952. text {
  953. display: block;
  954. color: #999999;
  955. font-size: 26rpx;
  956. }
  957. }
  958. .end {
  959. margin-top: 50rpx 0;
  960. text-align: center;
  961. text {
  962. color: #999999;
  963. font-size: 22rpx;
  964. position: relative;
  965. &.loaded {
  966. &::before,
  967. &::after {
  968. content: "";
  969. display: inline-block;
  970. width: 22rpx;
  971. height: 1rpx;
  972. background: #999999;
  973. position: absolute;
  974. top: 18rpx;
  975. opacity: .5;
  976. }
  977. &::before {
  978. left: -30rpx;
  979. }
  980. &::after {
  981. right: -30rpx;
  982. }
  983. }
  984. }
  985. }
  986. .my-order .list {
  987. width: 690rpx;
  988. margin: 0 auto;
  989. }
  990. .my-order .list .item {
  991. background-color: #fff;
  992. border-radius: 14rpx;
  993. margin-bottom: 14rpx;
  994. }
  995. .my-order .list .item .title {
  996. height: 84rpx;
  997. padding: 0 24rpx;
  998. border-bottom: 1rpx solid #eee;
  999. font-size: 28rpx;
  1000. color: #282828;
  1001. }
  1002. .my-order .list .item .title .sign {
  1003. font-size: 24rpx;
  1004. padding: 0 13rpx;
  1005. height: 36rpx;
  1006. margin-right: 15rpx;
  1007. border-radius: 18rpx;
  1008. @include coupons_border_color(theme);
  1009. @include main_color(theme);
  1010. }
  1011. .my-order .list .item .item-info {
  1012. padding: 0 30rpx;
  1013. margin-top: 22rpx;
  1014. }
  1015. .my-order .list .item .item-info .pictrue {
  1016. width: 120rpx;
  1017. height: 120rpx;
  1018. }
  1019. .my-order .list .item .item-info .pictrue image {
  1020. width: 100%;
  1021. height: 100%;
  1022. border-radius: 14rpx;
  1023. overflow: hidden;
  1024. }
  1025. .my-order .list .item .item-info {
  1026. .nameBox {
  1027. position: relative;
  1028. height: 120rpx;
  1029. }
  1030. .sku {
  1031. font-size: 20rpx;
  1032. position: absolute;
  1033. bottom: 4rpx;
  1034. width: 420rpx;
  1035. }
  1036. .text {
  1037. width: 496rpx;
  1038. font-size: 28rpx;
  1039. color: #999;
  1040. }
  1041. }
  1042. .my-order .list .item .item-info .text .name {
  1043. width: 326rpx;
  1044. color: #282828;
  1045. }
  1046. .my-order .list .item .item-info .text .money {
  1047. text-align: right;
  1048. }
  1049. .font_color {
  1050. @include main_color(theme);
  1051. }
  1052. .my-order .list .item .totalPrice {
  1053. font-size: 26rpx;
  1054. color: #282828;
  1055. text-align: right;
  1056. margin: 27rpx 0 0 30rpx;
  1057. padding: 0 30rpx 30rpx 0;
  1058. border-bottom: 1rpx solid #eee;
  1059. }
  1060. .my-order .list .item .totalPrice .money {
  1061. font-size: 28rpx;
  1062. font-weight: bold;
  1063. @include price_color(theme);
  1064. }
  1065. .my-order .list .item .bottom {
  1066. height: 107rpx;
  1067. padding: 0 30rpx;
  1068. }
  1069. .my-order .list .item .bottom .bnt {
  1070. width: 176rpx;
  1071. height: 60rpx;
  1072. text-align: center;
  1073. line-height: 60rpx;
  1074. color: #fff;
  1075. border-radius: 50rpx;
  1076. font-size: 27rpx;
  1077. }
  1078. .my-order .list .item .bottom .bnt.cancelBnt {
  1079. border: 1rpx solid #ddd;
  1080. color: #aaa;
  1081. }
  1082. .my-order .list .item .bottom .bnt~.bnt {
  1083. margin-left: 17rpx;
  1084. }
  1085. .my-order {
  1086. .header {
  1087. height: 250rpx;
  1088. padding: 0 30rpx;
  1089. }
  1090. }
  1091. .bg_color {
  1092. @include main_bg_color(theme);
  1093. }
  1094. .my-order .header .picTxt {
  1095. height: 190rpx;
  1096. }
  1097. .my-order .header .picTxt .text {
  1098. color: rgba(255, 255, 255, 0.8);
  1099. font-size: 26rpx;
  1100. font-family: 'Guildford Pro';
  1101. }
  1102. .my-order .header .picTxt .text .name {
  1103. font-size: 34rpx;
  1104. font-weight: bold;
  1105. color: #fff;
  1106. margin-bottom: 20rpx;
  1107. }
  1108. .my-order .header .picTxt .pictrue {
  1109. width: 120rpx;
  1110. height: 120rpx;
  1111. }
  1112. .my-order .header .picTxt .pictrue image {
  1113. width: 100%;
  1114. height: 100%;
  1115. }
  1116. .goodWrapper {
  1117. background-color: #fff;
  1118. margin-top: 20rpx;
  1119. position: relative;
  1120. padding: 0rpx 24rpx 20rpx 24rpx;
  1121. }
  1122. .goodWrapper .orderNum {
  1123. border-bottom: 1px solid #eee;
  1124. height: 86rpx;
  1125. line-height: 86rpx;
  1126. .tit {
  1127. font-size: 28rpx;
  1128. color: #282828;
  1129. }
  1130. .no {
  1131. font-size: 28rpx;
  1132. color: #282828;
  1133. }
  1134. }
  1135. .goodWrapper .item {
  1136. border-bottom: 0;
  1137. padding: 25rpx 0;
  1138. .money {
  1139. color: #999999;
  1140. font-weight: 26rpx;
  1141. margin-top: 0;
  1142. }
  1143. .attr,
  1144. .num {
  1145. font-size: 20rpx;
  1146. color: #999999;
  1147. margin-top: 0;
  1148. }
  1149. }
  1150. .goodWrapper .totalSum {
  1151. padding: 0 0 32rpx 0;
  1152. // text-align: right;
  1153. font-size: 26rpx;
  1154. color: #282828;
  1155. display: flex;
  1156. justify-content: space-between;
  1157. }
  1158. .goodWrapper .totalSum .price {
  1159. font-size: 28rpx;
  1160. font-weight: bold;
  1161. @include price_color(theme);
  1162. }
  1163. .hui {
  1164. color: #CCCCCC;
  1165. font-size: 24rpx;
  1166. }
  1167. .goodWrapper .powder {
  1168. @include price_color(theme);
  1169. //font-size: 24rpx;
  1170. }
  1171. </style>