|
|
@@ -0,0 +1,449 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="wrapper"
|
|
|
+ ref="returnWrapper">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ :class="{'static': isRefresh}"
|
|
|
+ class="pulldown-wrapper">
|
|
|
+ <van-loading
|
|
|
+ v-show="isRefresh"
|
|
|
+ size="24px"
|
|
|
+ type="spinner">加载中...
|
|
|
+ </van-loading>
|
|
|
+ <div
|
|
|
+ v-show="!isRefresh"
|
|
|
+ class="van-loading">
|
|
|
+ <span
|
|
|
+ class="van-loading__text">下拉刷新</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ class="list-item border-bottom-1px"
|
|
|
+ @click="getOrderDetail(item.id)">
|
|
|
+ <div class="photo">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div
|
|
|
+ class="top">
|
|
|
+ <img src="" alt="">
|
|
|
+ <p>这是名字这是名字这是名字这是名字这是名字这是名</p>
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <div class="price-wrap">
|
|
|
+ <p class="price">
|
|
|
+ <span>￥</span>
|
|
|
+ <span>129</span>
|
|
|
+ </p>
|
|
|
+ <p class="origin">¥599</p>
|
|
|
+ </div>
|
|
|
+ <div class="sale-count">
|
|
|
+ <span>已售</span>
|
|
|
+ <span>0</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <p class="coupon">
|
|
|
+ <span>券</span>
|
|
|
+ <span>¥470</span>
|
|
|
+ </p>
|
|
|
+ <p class="profit">
|
|
|
+ <span>分享赚</span>
|
|
|
+ <span>¥ 42.77</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="shop">
|
|
|
+ <img src="" alt="">
|
|
|
+ <p>店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名店名</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="pullup-wrapper">
|
|
|
+ <van-loading
|
|
|
+ v-show="!finished"
|
|
|
+ size="24px"
|
|
|
+ type="spinner">加载中...
|
|
|
+ </van-loading>
|
|
|
+ <div
|
|
|
+ v-show="finished"
|
|
|
+ class="van-loading">
|
|
|
+ <span
|
|
|
+ class="van-loading__text">没有更多了</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import BScroll from 'better-scroll'
|
|
|
+import { Toast, Loading } from 'vant'
|
|
|
+import { apiOrderList, apiOrderDetail } from '../../../order/api/api'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ 'van-loading': Loading
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ orderPlatformSonType: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ orderStatus: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ finished: false, // 所有数据是否加载完
|
|
|
+ isRefresh: false, // 是否下拉刷新
|
|
|
+ isFetchLock: false, // 接口调用加锁
|
|
|
+ pagenum: 0,
|
|
|
+ pagesize: 20,
|
|
|
+ list: [],
|
|
|
+ scroll: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ if (!this.$route.meta.isUseCache) {
|
|
|
+ this.finished = false
|
|
|
+ this.isRefresh = false
|
|
|
+ this.isFetchLock = false
|
|
|
+ this.pagenum = 0
|
|
|
+ this.pagesize = 20
|
|
|
+ this.list = []
|
|
|
+ this.scroll = null
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.scroll && this.scroll.refresh()
|
|
|
+ }
|
|
|
+ this.$route.meta.isUseCache = false
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goDetail (id) {},
|
|
|
+ onRefresh () {
|
|
|
+ this.pagenum = 0
|
|
|
+ this.pagesize = 20
|
|
|
+ this.finished = false
|
|
|
+ this.isRefresh = true
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ async getList () {
|
|
|
+ if (this.finished) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.isFetchLock) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isFetchLock = true
|
|
|
+ this.pagenum++
|
|
|
+ try {
|
|
|
+ const { status, data, msg } = await apiOrderList({
|
|
|
+ page: this.pagenum,
|
|
|
+ page_size: this.pagesize,
|
|
|
+ order_platform_son_type: this.orderPlatformSonType,
|
|
|
+ order_status: this.orderStatus
|
|
|
+ })
|
|
|
+ if (status) {
|
|
|
+ // const { list } = data
|
|
|
+ // todo
|
|
|
+ console.log(data)
|
|
|
+ const list = [1, 2, 3, 4, 5]
|
|
|
+ // 下拉刷新数据清空
|
|
|
+ if (this.isRefresh) {
|
|
|
+ this.isRefresh = false
|
|
|
+ this.list = []
|
|
|
+ }
|
|
|
+
|
|
|
+ // 没有数据返回了
|
|
|
+ if (Array.isArray(list) && !list.length) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Array.isArray(list) && list.length) {
|
|
|
+ // 总页数小于等于1页时
|
|
|
+ if (list.length < this.pagesize) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ this.list = this.list.concat(list)
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.scroll) {
|
|
|
+ this.scroll = new BScroll(this.$refs.returnWrapper, {
|
|
|
+ click: true,
|
|
|
+ pullDownRefresh: {
|
|
|
+ threshold: 50, // 顶部下拉的距离
|
|
|
+ stop: 20 // 回弹停留的距离
|
|
|
+ },
|
|
|
+ pullUpLoad: {
|
|
|
+ threshold: -20
|
|
|
+ },
|
|
|
+ scrollbar: true
|
|
|
+ })
|
|
|
+
|
|
|
+ this.scroll.on('pullingDown', () => {
|
|
|
+ this.onRefresh()
|
|
|
+ })
|
|
|
+
|
|
|
+ this.scroll.on('pullingUp', () => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.scroll.finishPullDown()
|
|
|
+ this.scroll.finishPullUp()
|
|
|
+ this.scroll.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Toast(msg)
|
|
|
+ }
|
|
|
+ this.isFetchLock = false
|
|
|
+ } catch (err) {
|
|
|
+ this.isFetchLock = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOrderDetail (id) {
|
|
|
+ try {
|
|
|
+ const { status, data, msg } = await apiOrderDetail(id)
|
|
|
+ if (status) {
|
|
|
+ this.$emit('setOrderDetail', data)
|
|
|
+ } else {
|
|
|
+ Toast(msg)
|
|
|
+ }
|
|
|
+ } catch (err) {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ this.scroll && this.scroll.destroy()
|
|
|
+ },
|
|
|
+ beforeRouteLeave (to, form, next) {
|
|
|
+ if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
|
|
|
+ form.meta.isUseCache = true
|
|
|
+ }
|
|
|
+ next()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.wrapper {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 95px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 0 102px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pulldown-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -43px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ &.static {
|
|
|
+ position: static;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pullup-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .van-loading {
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-item {
|
|
|
+ display: flex;
|
|
|
+ width: 355px;
|
|
|
+ min-height: 138px;
|
|
|
+ background: #FEFEFE;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 9px;
|
|
|
+}
|
|
|
+
|
|
|
+.photo {
|
|
|
+ width: 121px;
|
|
|
+ height: 121px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: pink;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ width: 206px;
|
|
|
+ padding-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.top {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.middle {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.price-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.origin {
|
|
|
+ font-size: 10px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.sale-count {
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.coupon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 57px;
|
|
|
+ height: 18px;
|
|
|
+ background: linear-gradient(90deg, #D33D34, #EB6347);
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-right: 11px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 18px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.profit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 82px;
|
|
|
+ height: 19px;
|
|
|
+ background: #FBF4F4;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #D64136;
|
|
|
+ line-height: 18px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.shop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 11px;
|
|
|
+ margin-right: 6px;
|
|
|
+ background: pink;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: calc(100% - 18px);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
panyong