|
@@ -1,19 +1,277 @@
|
|
<template>
|
|
<template>
|
|
- <view>
|
|
|
|
- 交易物流
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="container cart clearfix">
|
|
|
|
+ <tui-skeleton
|
|
|
|
+ v-if="skeletonShow"
|
|
|
|
+ backgroundColor="#fafafa"
|
|
|
|
+ borderRadius="10rpx"
|
|
|
|
+ :isLoading="true"
|
|
|
|
+ :loadingType="5"
|
|
|
|
+ ></tui-skeleton>
|
|
|
|
+ <view class="container-main" v-else>
|
|
|
|
+ <view class="clearfix">
|
|
|
|
+ <!-- 空白页 -->
|
|
|
|
+ <view class="empty-container" v-if="isEmpty">
|
|
|
|
+ <image mode="aspectFill" class="empty_notice" src="@/static/tabBar/emtry_notice.png"></image>
|
|
|
|
+ <text class="error-text">暂无任何消息~</text>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 列表 -->
|
|
|
|
+ <view
|
|
|
|
+ class="tui-notice"
|
|
|
|
+ v-else
|
|
|
|
+ v-for="(cell, index) in list"
|
|
|
|
+ :key="index"
|
|
|
|
+ @click.stop="handleOrderClick(cell)"
|
|
|
|
+ >
|
|
|
|
+ <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
|
|
|
|
+ <template v-slot:content>
|
|
|
|
+ <notice-cell :cellType="1" :cell="cell"></notice-cell>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-slot:button>
|
|
|
|
+ <view class="tui-custom-btn_box">
|
|
|
|
+ <view class="tui-custom-btn" @click.stop="deleteBtn(cell.id, index)">
|
|
|
|
+ <image src="@/static/tabBar/delete_notice.png" class="deleteImage" mode="aspectFill"></image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+ </tui-swipe-action>
|
|
|
|
+ </view>
|
|
|
|
+ <!--加载loadding-->
|
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
|
|
|
|
+ <!--加载loadding-->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</template>
|
|
</template>
|
|
-
|
|
|
|
<script>
|
|
<script>
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
|
+import noticeMixins from './mixins/notice_mixins.js'
|
|
|
|
+import noticeCell from './components/notice-cell.vue'
|
|
|
|
+export default {
|
|
|
|
+ mixins: [noticeMixins],
|
|
|
|
+ components: {
|
|
|
|
+ noticeCell
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ skeletonShow: true,
|
|
|
|
+ listQuery: {
|
|
|
|
+ messageType: 0,
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10
|
|
|
|
+ },
|
|
|
|
+ list: [{
|
|
|
|
+ orderMessageType: 1,
|
|
|
|
+ time: '2022-01-10',
|
|
|
|
+ mainImage: '',
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ }],
|
|
|
|
+ isEmpty: false,
|
|
|
|
+ loadding: true,
|
|
|
|
+ pullUpOn: true,
|
|
|
|
+ pullFlag: true,
|
|
|
|
+ hasNextPage: false,
|
|
|
|
+ nomoreText: '上拉显示更多'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(option) {
|
|
|
|
+ console.log(option)
|
|
|
|
+ this.initData(option)
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ async initData(option) {
|
|
|
|
+ // const userInfo = await uni.getStorage()
|
|
|
|
+ // this.listQuery.messageType = option.messageType
|
|
|
|
+ // console.log(userInfo)
|
|
|
|
+ // this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
|
|
|
|
+ // this.getUserAuthClubMessageList()
|
|
|
|
+ this.skeletonShow = false
|
|
|
|
+ },
|
|
|
|
+ handleOrderClick(cell) {
|
|
|
|
+ if (cell.orderMessageType === 1) {
|
|
|
|
+ if (this.isOnliyPay(cell)) {
|
|
|
|
+ let payLinkMap = {
|
|
|
|
+ 0: `/pages/user/order/order-pay-list?orderId=${cell.orderId}`,
|
|
|
|
+ 1: `/pages/user/order/order-payunder?orderId=${cell.orderId}`
|
|
|
|
+ }
|
|
|
|
+ let linkJumpMap = { 1: payLinkMap[cell.onlinePayFlag] }
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: linkJumpMap[cell.orderMessageType]
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.$util.msg('订单已完成支付', 2000)
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ let linkJumpMap = {
|
|
|
|
+ 2: `/pages/user/order/order-details?orderId=${cell.orderId}`,
|
|
|
|
+ 3: `/pages/user/order/order-details?orderId=${cell.orderId}`,
|
|
|
|
+ 4: `/pages/user/order/order-details?orderId=${cell.orderId}`,
|
|
|
|
+ 5: `/pages/user/order/order-logistics?orderId=${cell.orderId}`,
|
|
|
|
+ 6: `/pages/user/order/order-details?orderId=${cell.orderId}`
|
|
|
|
+ }
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: linkJumpMap[cell.orderMessageType]
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ isOnliyPay(cell){
|
|
|
|
+ let onliyPay = false
|
|
|
|
+ let statusVal = [11, 12, 13, 21, 22, 23, 111]
|
|
|
|
+ statusVal.forEach(value => {
|
|
|
|
+ if (cell.status === value) {
|
|
|
|
+ onliyPay = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return onliyPay
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onReachBottom() {
|
|
|
|
+ if (this.hasNextPage) {
|
|
|
|
+ this.loadding = true
|
|
|
|
+ this.pullUpOn = true
|
|
|
|
+ this.getReachBottomData()
|
|
|
|
+ } else {
|
|
|
|
+ console.log(111)
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
+ //下拉刷新
|
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
|
+ // this.getUserAuthClubMessageList()
|
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
|
+ },
|
|
|
|
+ onShow() {
|
|
|
|
+ this.skeletonShow = false
|
|
|
|
+ console.log(this.isEmpty)
|
|
}
|
|
}
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
|
+page {
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+}
|
|
|
|
+.container-main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
+ .empty-container {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 60vh;
|
|
|
|
+ }
|
|
|
|
+ .empty_notice {
|
|
|
|
+ width: 290rpx;
|
|
|
|
+ height: 230rpx;
|
|
|
|
+ }
|
|
|
|
+ .error-text{
|
|
|
|
+ color: #999999;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.tui-notice {
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
+}
|
|
|
|
+.tui-notice-cell {
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ height: auto;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ .tui-cell-top {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ .cell-title {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #333333;
|
|
|
|
+ float: left;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .cell-time {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .tui-cell-content {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 160rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 16rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+ .cell-image {
|
|
|
|
+ width: 128rpx;
|
|
|
|
+ height: 128rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ image {
|
|
|
|
+ width: 128rpx;
|
|
|
|
+ height: 128rpx;
|
|
|
|
+ display: block;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .cell-content {
|
|
|
|
+ width: 490rpx;
|
|
|
|
+ height: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ text-align: justify;
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .tui-cell-bot {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 16rpx 0 0 0;
|
|
|
|
+ .tui-cell-btn {
|
|
|
|
+ width: 160rpx;
|
|
|
|
+ height: 64rpx;
|
|
|
|
+ border-radius: 35rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border: 1px solid #999999;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 64rpx;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ color: #333333;
|
|
|
|
+ float: right;
|
|
|
|
+ margin-left: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.tui-custom-btn_box {
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+}
|
|
|
|
|
|
|
|
+.tui-custom-btn {
|
|
|
|
+ width: 56rpx;
|
|
|
|
+ height: 56rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background-color: #f94b4b;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ .deleteImage{
|
|
|
|
+ width: 56rpx;
|
|
|
|
+ height: 56rpx;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|