index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. <template>
  2. <view>
  3. <view v-if="pagesNum > 1">
  4. <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="我的仓库"></u-navbar>
  5. </view>
  6. <view v-else>
  7. <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="我的仓库">
  8. <view class="nav-left flex" slot="left" @click="toIndex">
  9. <u-icon name="arrow-left" size="20" color="#333"></u-icon>
  10. </view>
  11. </u-navbar>
  12. </view>
  13. <!-- 奖品选择 -->
  14. <view class="prize-state">
  15. <!-- 类型 -->
  16. <view class="prize-state-tabs">
  17. <u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="30" lineHeight="3"
  18. :current='currentIndex' lineColor="#F9822C " :activeStyle="{
  19. color: '#333 ',
  20. transform: 'scale(1.1)',
  21. width: '120px'
  22. }" :inactiveStyle="{
  23. color: '#999',
  24. transform: 'scale(1)',
  25. width: '120px'
  26. }" itemStyle="padding-left: 20px; padding-right: 15px; height: 44px; text-align: center;">
  27. </u-tabs>
  28. </view>
  29. <!-- 商品状态 -->
  30. <view class="prize-state-type flex" v-if="state == 0">
  31. <view class="prize-state-type-item" :class="{ 'prize-state-type-item__action': index == typeIndex }"
  32. v-for="(item, index) in typeList" :key="index" @click="typeState(index)">{{ item.name }}</view>
  33. </view>
  34. </view>
  35. <!-- 实物商品 -->
  36. <view class="prize-goods" v-if="state == 0">
  37. <view class="prize-goods-list">
  38. <view class="prize-goods-list-item" v-for="(item, index) in list" :key="index">
  39. <!-- <view class="prize-goods-list-item" v-for="(item, index) in list" :key="index" > -->
  40. <!-- 商品 -->
  41. <view class="prize-goods-list-item__content flex">
  42. <view class="flex" v-if="item.status == 1">
  43. <u-checkbox-group>
  44. <u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked"
  45. activeColor="#F9822C" @change="changeChecked($event, item)"></u-checkbox>
  46. </u-checkbox-group>
  47. </view>
  48. <view class="info flex" @click="toPrizeGoods(item)">
  49. <image :src="item.picUrl" mode="aspectFill"></image>
  50. <view class="desc flex">
  51. <view class="ells title">{{ item.title }}</view>
  52. <view class="num flex">
  53. <view class="sku ells-one">规格:{{ item.properties || '-' }}</view>
  54. <view class="">共{{ item.goodsNum }}件</view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <!-- 来源 -->
  60. <view class="prize-goods-list-item__btn flex" v-if="item.status == 1">
  61. <view class="type">来自:{{ item.inType && item.inType.desc }}</view>
  62. <view class="btn" @click="toRecovery(item)" v-if="item.inType.value == '1' || item.inType.value == '2'">兑换盲豆</view>
  63. </view>
  64. <view class="prize-goods-list-item__btn flex" v-else>
  65. <view class="type"></view>
  66. <view class="btnTwo">已兑换</view>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="flex empty" v-if="!list.length && !loading">
  71. <view class="center">
  72. <image class="center-img" src="../../static/activity/null.png" mode=""></image>
  73. <view class="center-font">还没有商品</view>
  74. </view>
  75. </view>
  76. </view>
  77. <!-- 优惠券 -->
  78. <view class="prize-coupon" v-else>
  79. <view class="prize-coupon-list">
  80. <view @click="toPrizeDetail(item)" class="prize-coupon-list-item" v-for="(item, index) in list" :key="index">
  81. <!-- <image src="../../static/icon/coupon_bg.png" mode=""></image>
  82. <view class="info">
  83. <view class="info-item">
  84. <text>使用期限:</text>
  85. <text>{{ $parseTime(item.validStart, '{y}.{m}.{d}') }}-{{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</text>
  86. </view>
  87. <view class="info-item">
  88. <text>使用范围:</text>
  89. <text>{{ item.useAreaDesc || '-' }}</text>
  90. </view>
  91. </view>
  92. <view class="info-now">
  93. <view></view>
  94. <view v-if="JSON.parse(item.useArea).value != '4'">立即使用</view>
  95. <view v-else>查看详情</view>
  96. </view>
  97. <view class="flex price-title">
  98. <view class="price"><text>¥</text>{{ item.discount / 100 }}</view>
  99. <view class="title">{{ item.title }}</view>
  100. </view> -->
  101. <view class="content flex">
  102. <view class="content-left flex">
  103. <image src="../static/prize_coupon.png" mode=""></image>
  104. <view class="price flex">
  105. <text>{{ item.discount / 100 }}</text>
  106. <text>元</text>
  107. </view>
  108. </view>
  109. <view class="content-right flex">
  110. <view class="title ells-one">{{ item.title }}</view>
  111. <view class="desc">适用范围:{{ item.useAreaDesc || '-' }}</view>
  112. <view class="desc">使用期限:{{ $parseTime(item.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</view>
  113. </view>
  114. </view>
  115. <view class="btn flex">
  116. <view class="btn-title" v-if="JSON.parse(item.useArea).value != '4'">立即使用</view>
  117. <view class="btn-title" v-else>查看详情</view>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="flex empty" v-if="!list.length && !loading">
  122. <view class="center">
  123. <image class="center-img" src="../../static/activity/null.png" mode=""></image>
  124. <view class="center-font">还没有优惠券</view>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="prize-action" v-if="statusIndex == 1">
  129. <!-- 实物商品提货 -->
  130. <view class="flex prize-action-goods" v-if="state == 0">
  131. <view class="flex checkbox">
  132. <view class="all">全选</view>
  133. <u-checkbox-group>
  134. <u-checkbox v-model="checkedAll" shape="circle" size="24" :checked="checkedAll"
  135. activeColor="#F9822C" @change="changeCheckedAll($event)"></u-checkbox>
  136. </u-checkbox-group>
  137. </view>
  138. <view class="btn" @click="toSettlement">立即提货</view>
  139. </view>
  140. <!-- 优惠券使用记录 -->
  141. <view class="flex prize-action-coupon" @click="toCoupon" v-else>
  142. <view class="title">优惠券使用记录</view>
  143. <u-icon name="arrow-right" size="15" color="#999"></u-icon>
  144. </view>
  145. </view>
  146. </view>
  147. </template>
  148. <script>
  149. import env from '../../config/env.js'
  150. import $http from '@/utils/request.js'
  151. export default {
  152. data() {
  153. return {
  154. loading: false,
  155. stateArr: [{
  156. name: ' 实物商品',
  157. }, {
  158. name: ' 优惠券',
  159. }],
  160. typeList: [{
  161. name: '待提货'
  162. }, {
  163. name: '已兑换'
  164. }],
  165. typeIndex: 0,
  166. state: 0,
  167. checkedAll: false,
  168. pageNum: 1,
  169. total: 0,
  170. list: [],
  171. currentIndex: 0,
  172. pagesNum: "",
  173. statusIndex: 1,
  174. };
  175. },
  176. onShow() {
  177. this.pagesNum = getCurrentPages().length
  178. this.pageList()
  179. this.couponNum()
  180. },
  181. onLoad(opthios) {
  182. if (opthios != undefined) {
  183. if (opthios.coupon == 1) {
  184. this.currentIndex = 1
  185. this.state = 1
  186. } else {
  187. this.currentIndex = 0
  188. this.state = 0
  189. }
  190. }
  191. },
  192. methods: {
  193. getList() {
  194. let _this = this
  195. let url = _this.state == 0 ? '/api/v1/mp/user/mine/prize/list' : '/api/v1/mp/user/mine/coupon/list'
  196. let data = _this.state == 0 ? { } : {
  197. status: 1
  198. }
  199. uni.showLoading({
  200. title: '加载中'
  201. });
  202. this.loading = true
  203. this.checkedAll = false
  204. $http.post(`${ url }?pageNum=${_this.pageNum}&pageSize=20`, data).then(res => {
  205. uni.hideLoading();
  206. this.loading = false
  207. if (res.code == 0) {
  208. res.rows.forEach(item => {
  209. item.status = JSON.parse(item.status).value
  210. let picUrlArr = item.picUrl.split(',')
  211. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
  212. if (_this.state == 0) {
  213. item.checked = false
  214. item.inType = JSON.parse(item.inType)
  215. }
  216. })
  217. _this.total = res.total
  218. _this.list = _this.list.concat(res.rows)
  219. }
  220. }).catch(() => {
  221. uni.hideLoading();
  222. this.loading = false
  223. })
  224. },
  225. getListTwo(){
  226. let _this = this
  227. let url = '/api/v1/mp/user/prize/recovery/list'
  228. this.loading = true
  229. this.checkedAll = false
  230. $http.post(`${ url }?pageNum=${_this.pageNum}&pageSize=20`, {}).then(res => {
  231. uni.hideLoading();
  232. this.loading = false
  233. if (res.code == 0) {
  234. console.log(res);
  235. res.rows.forEach(item => {
  236. item.status = 3
  237. item.goodsNum = item.num
  238. let picUrlArr = item.picUrl.split(',')
  239. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
  240. })
  241. _this.list = _this.list.concat(res.rows)
  242. }
  243. }).catch(() => {
  244. uni.hideLoading();
  245. this.loading = false
  246. })
  247. },
  248. typeState(index){
  249. this.list = []
  250. this.typeIndex = index//样式改变
  251. // this.statusIndex = index
  252. if(index == 0 ){
  253. this.statusIndex = 1 //待提货
  254. this.getList()
  255. }
  256. if(index == 1 ){
  257. this.statusIndex = 3 //已兑换
  258. this.getListTwo()
  259. }
  260. },
  261. toIndex() {
  262. uni.switchTab({
  263. url: '/pages/user/index'
  264. })
  265. },
  266. toRecovery(item) {
  267. uni.navigateTo({
  268. url: `/packageGoods/recovery/index?goodsId=${ item.goodsId}&num=${ item.goodsNum }&storageId=${ item.storageId }&properties=${item.properties }&skuId=${ item.skuId }`
  269. })
  270. },
  271. pageList() {
  272. this.typeIndex = 0
  273. this.pageNum = 1
  274. this.list = []
  275. this.getList()
  276. },
  277. // 切换奖品
  278. changeTab(e) {
  279. if (e.index == 0) {
  280. this.state = 0
  281. } else if (e.index == 1) {
  282. this.state = 1
  283. }
  284. this.pageList()
  285. this.checkedAll = false
  286. },
  287. changeChecked(e, item) {
  288. this.$set(item, 'checked', e)
  289. let flag = this.list.every(item => item.checked == true)
  290. this.checkedAll = flag
  291. this.$forceUpdate()
  292. },
  293. changeCheckedAll(e) {
  294. this.checkedAll = e
  295. this.list.forEach(item => {
  296. item.checked = e
  297. })
  298. this.$forceUpdate()
  299. },
  300. // 查看优惠券使用记录
  301. toCoupon() {
  302. uni.navigateTo({
  303. url: '/packagePrize/coupon/use'
  304. })
  305. },
  306. // 立即提货
  307. toSettlement() {
  308. let arr = []
  309. this.list.forEach(item => {
  310. if (item.checked) {
  311. arr.push(item)
  312. }
  313. })
  314. if (!arr.length) {
  315. uni.$u.toast('请选择商品');
  316. return
  317. }
  318. uni.showLoading({
  319. title: '提货中'
  320. });
  321. let ids = JSON.stringify(arr.map(item => item.storageId))
  322. uni.hideLoading();
  323. uni.navigateTo({
  324. url: `/packageGoods/order/settlement?ids=${ ids }`
  325. })
  326. },
  327. couponNum() {
  328. $http.post(`/api/v1/mp/user/mine/prize/list?pageNum=1&pageSize=10`, {
  329. }).then(res => {
  330. $http.post(`/api/v1/mp/user/mine/coupon/list?pageNum=1&pageSize=10`, {
  331. status: 1
  332. }).then(data => {
  333. if (res.code == 0) {
  334. this.stateArr = [{
  335. name: ' 实物商品 (' + res.total + ') '
  336. },
  337. {
  338. name: ' 优惠券 (' + data.total + ') '
  339. },
  340. ]
  341. } else {
  342. this.stateArr = [{
  343. name: ' 实物商品 (0)'
  344. },
  345. {
  346. name: ' 优惠券 (0)'
  347. },
  348. ]
  349. }
  350. })
  351. });
  352. },
  353. toPrizeGoods(item) {
  354. uni.navigateTo({
  355. url: `/packagePrize/goods/detail?id=${ item.goodsId }`
  356. })
  357. },
  358. toPrizeDetail(item) {
  359. let data = JSON.parse(item.useArea)
  360. let type = JSON.parse(item.type)
  361. // 1判断type,如果为门店直接跳转不需要判断useArec
  362. if (type.value == 2) {
  363. // data.value 2为指定优惠券 0为通用优惠券
  364. uni.navigateTo({
  365. url: `/packagePrize/coupon/detail?id=${ item.id }`
  366. })
  367. } else {
  368. // 3为线上票使用
  369. if (data.value == 3) {
  370. uni.navigateTo({
  371. url: `/packageGoods/ticket/index`
  372. })
  373. }
  374. //0为通用优惠券
  375. if (data.value == 0) {
  376. uni.navigateTo({
  377. url: `/packageGoods/ticket/index`
  378. })
  379. }
  380. // 4为线下票使用
  381. if (data.value == 4) {
  382. uni.navigateTo({
  383. url: `/packagePrize/coupon/detail?id=${ item.id }`
  384. })
  385. }
  386. }
  387. }
  388. },
  389. onReachBottom() {
  390. // 判断是否有数据
  391. if (this.total > this.pageNum * 20) {
  392. setTimeout(() => {
  393. ++this.pageNum
  394. this.getList()
  395. }, 500)
  396. } else {
  397. uni.$u.toast('已经到底了')
  398. }
  399. },
  400. }
  401. </script>
  402. <style lang="scss" scoped>
  403. .empty {
  404. height: 60vh;
  405. }
  406. .prize-state {
  407. position: fixed;
  408. background-color: #FFFFFF;
  409. width: 100%;
  410. z-index: 10;
  411. box-shadow: 0 2rpx 2rpx #ececec;
  412. // 类型
  413. &-tabs {
  414. display: flex;
  415. box-shadow: 0 5rpx 5rpx #ececec;
  416. }
  417. // 商品状态
  418. &-type {
  419. justify-content: flex-start;
  420. padding: 24rpx 34rpx;
  421. &-item {
  422. margin-right: 34rpx;
  423. padding: 12rpx 36rpx;
  424. border-radius: 24rpx;
  425. color: #FFAB4D;
  426. }
  427. &-item__action {
  428. background: #FFAB4D;
  429. color: #fff;
  430. }
  431. }
  432. }
  433. // 实物商品
  434. .prize-goods {
  435. margin-top: 180rpx;
  436. padding: 34rpx 34rpx 200rpx;
  437. &-list {
  438. &-item {
  439. padding: 34rpx 22rpx 34rpx;
  440. background-color: #fff;
  441. border-radius: 18rpx;
  442. margin-bottom: 30rpx;
  443. &__content {
  444. justify-content: space-between;
  445. padding-bottom: 34rpx;
  446. .info {
  447. padding-left: 16rpx;
  448. flex: 1;
  449. justify-content: flex-start;
  450. image {
  451. width: 176rpx;
  452. height: 176rpx;
  453. border-radius: 12rpx;
  454. }
  455. .desc {
  456. height: 176rpx;
  457. padding-left: 22rpx;
  458. flex: 1;
  459. font-size: 30rpx;
  460. flex-direction: column;
  461. align-items: flex-start;
  462. justify-content: space-between;
  463. .title {
  464. line-height: 40rpx;
  465. font-weight: bold;
  466. }
  467. .num {
  468. width: 100%;
  469. color: #666666;
  470. font-size: 26rpx;
  471. justify-content: space-between;
  472. .sku {
  473. flex: 1;
  474. }
  475. }
  476. }
  477. }
  478. }
  479. &__btn {
  480. justify-content: space-between;
  481. .type {
  482. font-size: 26rpx;
  483. color: #999999;
  484. line-height: 26rpx;
  485. padding-left: 70rpx;
  486. }
  487. .btn {
  488. width: 168rpx;
  489. height: 60rpx;
  490. line-height: 60rpx;
  491. text-align: center;
  492. color: #F9822C;
  493. border: 1px solid #F9822C;
  494. border-radius: 30rpx;
  495. }
  496. .btnTwo {
  497. width: 168rpx;
  498. height: 60rpx;
  499. line-height: 60rpx;
  500. text-align: center;
  501. border-radius: 30rpx;
  502. background-color: #f1f1f1;
  503. color: #666;
  504. border: 2rpx solid #999;
  505. }
  506. }
  507. }
  508. &-item:last-child {
  509. margin-bottom: 0;
  510. }
  511. }
  512. }
  513. // 优惠券
  514. .prize-coupon {
  515. margin-top: 85rpx;
  516. padding: 20rpx 20rpx 150rpx;
  517. &-list {
  518. &-item {
  519. padding-top: 30rpx;
  520. margin-bottom: 30rpx;
  521. background-color: #fff;
  522. .content {
  523. width: 100%;
  524. height: 184rpx;
  525. justify-content: flex-start;
  526. margin-bottom: 40rpx;
  527. &-left {
  528. width: 210rpx;
  529. height: 100%;
  530. margin-right: 20rpx;
  531. image {
  532. width: 100%;
  533. height: 100%;
  534. }
  535. .price {
  536. position: absolute;
  537. color: #fff;
  538. text:first-child {
  539. font-size: 70rpx;
  540. padding-right: 20rpx;
  541. }
  542. text:last-child {
  543. font-size: 40rpx;
  544. }
  545. }
  546. }
  547. &-right {
  548. flex: 1;
  549. align-items: flex-start;
  550. flex-direction: column;
  551. justify-content: space-between;
  552. height: 100%;
  553. padding: 24rpx 0;
  554. .title {
  555. font-size: 32rpx;
  556. line-height: 32rpx;
  557. height: 32rpx;
  558. overflow: hidden;
  559. font-weight: bold;
  560. }
  561. .desc {
  562. font-size: 24rpx;
  563. line-height: 24rpx;
  564. color: #999999;
  565. }
  566. }
  567. }
  568. .btn {
  569. padding: 20rpx 0 22rpx;
  570. margin: 0 30rpx 0;
  571. border-top: 1px solid #F2F2F2;
  572. &-title {
  573. font-size: 30rpx;
  574. line-height: 30rpx;
  575. height: 30rpx;
  576. font-weight: bold;
  577. color: #F9822C;
  578. }
  579. }
  580. }
  581. &-item:last-child {
  582. margin-bottom: 0;
  583. }
  584. }
  585. }
  586. .prize-action {
  587. position: fixed;
  588. bottom: var(--window-bottom);
  589. left: 0;
  590. right: 0;
  591. z-index: 10;
  592. box-shadow: 0 -4rpx 10rpx 0 rgba(151, 151, 151, 0.24);
  593. background: #fff;
  594. width: 100%;
  595. // 设置ios刘海屏底部横线安全区域
  596. padding-bottom: constant(safe-area-inset-bottom);
  597. padding-bottom: env(safe-area-inset-bottom);
  598. &-goods {
  599. justify-content: space-between;
  600. padding: 20rpx 40rpx;
  601. .all {
  602. margin-right: 10rpx;
  603. }
  604. .btn {
  605. width: 225rpx;
  606. height: 82rpx;
  607. font-size: 28rpx;
  608. line-height: 82rpx;
  609. border-radius: 40rpx;
  610. background-color: #F9822C;
  611. color: #fff;
  612. text-align: center;
  613. }
  614. }
  615. &-coupon {
  616. padding: 30rpx 40rpx;
  617. .title {
  618. margin-right: 10rpx;
  619. color: #999;
  620. line-height: 40rpx;
  621. }
  622. }
  623. }
  624. .empty {
  625. height: 60vh;
  626. .center {
  627. text-align: center;
  628. &-img {
  629. width: 228rpx;
  630. height: 320rpx;
  631. }
  632. &-font {
  633. font-size: 30rpx;
  634. font-weight: 400;
  635. color: #999999;
  636. margin-bottom: 350rpx;
  637. }
  638. }
  639. }
  640. </style>