no message

src/pages/order/index.vue

@@ -1,361 +1,370 @@
-<template>
-  <view class="page">
-    <cu-custom :isBack="true"></cu-custom>
-		<view class="header" :style="[{top:topHeader + 'px'}]">
-			<view class="header-title">
-				<view class="header-title-main">
-						<view class="margin-bottom-xs">{{title}}</view>
-						<view class="point"></view>
-				</view>
-			</view>
-			<swiper-tab :menuList="menuList" @changeTab="changeTab" :activeTab="currentIndex"></swiper-tab>
-		</view>
-		<scroll-view  scroll-y="true" class="scroll-main"
-		:style="[{height:'calc(100vh - 74px - '+ topHeader+'px)'}]"
-		:refresher-enabled="true"
-		 :refresher-triggered="triggered"
-		@refresherrefresh="onRefresh" @scrolltolower="loadMore">
-			<view class="list" v-if="params.type<7">
-				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
-					<view class="cu-item" v-for="(course,i) in item.list" :key="i">
-							<view class="card-header flex justify-between solid-bottom">
-								 <view>{{index}}</view>
-								 <view class="text-student course-status">
-									  {{item.status|status}}
-								 </view>
-							</view>
-							<view class="card flex">
-								<view class="card-left">
-									<img mode="scaleToFill" :src="course.image" alt="" class="card-image">
-								</view>
-								<view class="card-right flex-sub margin-left-sm">
-									<view class="card-title">{{course.name}}</view>
-									<view class="card-item margin-top-xs">
-										 <text class="card-label">时间：</text>
-										 <text class="card-text">{{course.attend_day}}</text>
-									</view>
-									<view class="card-item margin-top-xs" >
-										 <text class="card-label">课时：</text>
-										 <text class="card-text">{{course.class_total}}</text>
-									</view>
-									<view class="card-item margin-top-xs">
-										 <text class="card-label">学生：</text>
-										 <text class="card-text">{{course.student_name}}</text>
-									</view>
-									<view class="card-item margin-top-xs">
-										 <text class="card-label">老师：</text>
-										 <text class="card-text">{{course.teacher||'--'}}</text>
-									</view>
-								</view>
-							</view>
-							<view class="flex card-footer solid-bottom padding-bottom-xs">
-										<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
-											<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
-										</view>
-							</view>
-							<view class="card-bottom margin-top-xs flex justify-between">
-								<view>
-									<text class="text-price text-red">{{item.sum_money}}</text>
-								</view>
-								<view>
-										<button @tap="dropCourse(course.order_info_id)" class="cu-btn round bg-student text-white" v-if="dropStatus.includes(item.status)&&course.is_return===0">退课</button>
-										<button @tap="droping" class="cu-btn round sm line-cyan" v-if="dropStatus.includes(item.status)&&course.is_return===1">退课中</button>
-										<button @tap="pay(item.order_id)" class="cu-btn round bg-student text-white margin-right-sm" v-if="item.status===0">立即付款</button>
-										<button @tap="cancel(item.order_id)" class="cu-btn round bg-gray" v-if="item.status===0">取消</button>
-								</view>
-							</view>
-					</view>
-				</view>
-			</view>
-			<view class="list" v-else>
-				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
-						<view class="cu-item">
-								<view class="card-header flex justify-between solid-bottom">
-								 <view>{{item.code}}</view>
-								 <view class="text-student course-status">
-									  {{item.status|dropStatus}}
-								 </view>
-							</view>
-							<view class="card flex">
-									<view class="card-left">
-										<img mode="scaleToFill" :src="item.image" alt="" class="card-image">
-									</view>
-									<view class="card-right flex-sub margin-left-sm">
-										<view class="card-title">{{item.name}}</view>
-										<view class="card-item margin-top-xs">
-											<text class="card-label">时间：</text>
-											<text class="card-text">{{item.attend_day}}</text>
-										</view>
-										<view class="card-item margin-top-xs" >
-											<text class="card-label">课时：</text>
-											<text class="card-text">{{item.class_total}}</text>
-										</view>
-										<view class="card-item margin-top-xs">
-											<text class="card-label">学生：</text>
-											<text class="card-text">{{item.student_name}}</text>
-										</view>
-										<view class="card-item margin-top-xs">
-											<text class="card-label">老师：</text>
-											<text class="card-text">{{item.teacher||'--'}}</text>
-										</view>
-									</view>
-							</view>
-							<view class="flex card-footer padding-bottom-xs">
-									<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
-										<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
-									</view>
-							</view>
-						</view>
-				</view>
-			</view>
-		</scroll-view>
-		<web-view v-if="showForm" :src="payurl"></web-view>
-  </view>
-</template>
-
-<script>
-import { _orderCenter, _dropList, _payOrder, _dropCourse, _cancelOrder } from '@/api/course'
-import swiperTab from '@/components/swiper-tab.vue'
-export default {
-  components: {
-    swiperTab
-  },
-  data () {
-    return {
-      title: '订单',
-      topHeader: this.globalCustomBarHeight,
-      noMore: false, // 加载判断
-      triggered: false, // 下拉
-      showForm: false, // 支付弹窗
-      payurl: '',
-      menuList: ['全部订单', '待付款', '已付款', '退课售后'],
-      currentIndex: 0,
-      list: [],
-      dropStatus: [1, 4],
-      orderTypes: {
-        0: 5,
-        1: 0,
-        2: 1,
-        3: 7
-      },
-      params: {
-        type: 5,
-        page: 1
-      }
-    }
-  },
-  filters: {
-    status: function(value) {
-      switch (value) {
-        case 0:
-          return '未付款'
-        case 1:
-          return '已付款'
-        case 2:
-          return '申诉'
-        case 3:
-          return '已取消'
-        case 4:
-          return '部分退课'
-        case 5:
-          return '全部退课'
-        case 6:
-          return '正在付款'
-        default:
-          return '状态未知'
-      }
-    },
-    dropStatus(v) {
-      return v === 0 ? '审核中' : v === 1 ? '审核通过' : '驳回'
-    }
-  },
-  onLoad (option) {
-    if (option.type) {
-      const index = decodeURIComponent(option.type)
-      this.changeTab(index)
-    } else {
-      this.get_list()
-    }
-  },
-  methods: {
-    refresh() {
-      this.currentIndex = 0
-      this.params.page = 1
-      this.params.type = 5
-      this.get_list()
-    },
-    onRefresh() {
-      this.triggered = true
-      this.refresh()
-      setTimeout(() => {
-        this.triggered = false
-      }, 1000)
-    },
-    loadMore() {
-      if (this.noMore) {
-        uni.showToast({ title: '没有更多了', icon: 'none' })
-        return false
-      }
-      this.params.page++
-      this.get_list()
-    },
-    get_list() {
-      if (this.params.type < 7) {
-        this.get_orders()
-      } else {
-        this.get_drops()
-      }
-    },
-    get_orders() {
-      _orderCenter(this.params).then(res => {
-        if (this.params.page > 1) {
-          if (Object.keys(res.data).length < this.page_size) this.noMore = true
-          this.list = Object.assign({}, this.list, res.data)
-        } else {
-          this.noMore = false
-          this.list = res.data
-        }
-      })
-    },
-    get_drops() {
-      _dropList({ page: this.params.page }).then(res => {
-        if (this.params.page > 1) {
-	        if (!res.data.drop_course_data) {
-            this.noMore = true
-            return
-          }
-          if (res.data.drop_course_data.length < this.page_size) this.noMore = true
-          this.list = this.list.concat(res.data.drop_course_data)
-        } else {
-          this.noMore = false
-          this.list = res.data.drop_course_data || []
-        }
-      })
-    },
-    droping() {
-      this.changeTab(3)
-    },
-    dropCourse(id) {
-      const params = { order_info_id: id, refund_explanation: '', type_id: 0 }
-      const _self = this
-      uni.showModal({
-        title: '提示',
-        content: '确定要删除？',
-        cancelText: '取消',
-        confirmText: '确定',
-        success: res => {
-          if (res.confirm) {
-            _dropCourse(params).then(res => {
-              uni.showToast({ title: '已经发起退课,请耐心等待', icon: 'none' })
-              _self.refresh()
-            })
-          }
-        }
-      })
-    },
-    pay(id) {
-      const _self = this
-      uni.showModal({
-        title: '温馨提示：',
-        content: '1、感谢您的购买;\n' +
-                  '2、退费规则请咨询客服;\n' +
-                  '3、本平台对以上细则有最终解释权。',
-        cancelText: '取消',
-        confirmText: '确定',
-        success: res => {
-          if (res.confirm) {
-            _payOrder({ order_id: id, pay_type: 'wechat', trade_type: 'JSAPI' }).then(res => {
-              if (res.code === 0) {
-                return false
-              }
-              if (res.code === 200) {
-                uni.showToast({ title: res.msg, icon: 'success', duration: 2000 })
-                _self.changeTab(2)
-                return true
-              }
-              if (res.code === 301) {
-                _self.showForm = true
-                _self.payurl = res.data
-                return true
-              }
-              // 进行支付
-              uni.requestPayment({
-                timeStamp: res.data.timeStamp,
-                nonceStr: res.data.nonceStr,
-                package: res.data.package,
-                signType: res.data.signType,
-                paySign: res.data.paySign,
-                success: function (res) {
-                  _self.refresh()
-                }
-              })
-            })
-          }
-        }
-      })
-    },
-    cancel(id) {
-      const _self = this
-      uni.showModal({
-        title: '提示',
-        content: '确定取消？',
-        cancelText: '取消',
-        confirmText: '确定',
-        success: res => {
-          if (res.confirm) {
-            _cancelOrder({ order_id: id }).then(res => {
-              uni.showToast({ title: res.msg, icon: 'none' })
-              _self.refresh()
-            })
-          }
-        }
-      })
-    },
-    changeTab(index) {
-      this.params.page = 1
-      this.currentIndex = index
-      this.params.type = this.orderTypes[index]
-      this.get_list()
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import '~@/common/css/mixin.scss';
-.scroll-main{
-	margin-top:74px;
-	padding:20rpx;
-}
-.cu-card{
-	.cu-item{
-		margin-top:10rpx;
-		padding:20rpx;
-		margin:0;
-	}
-}
-.card-header{
-	padding-bottom:10px;
-  @include title(10px,18px);
-}
-.card{
-	&-title{
-		font-size:16px;
-	}
-	&-image{
-		width:35vw;
-		height:35vw;
-		border-radius:10rpx;
-	}
-	&-label{
-		color:#999;
-	}
-	&-text{
-		color:#333;
-	}
-}
-.course-status{
-	font-size:14px;
-	font-weight:normal;
-}
-</style>
+<template>
+  <view class="page">
+    <cu-custom :isBack="true"></cu-custom>
+		<view class="header" :style="[{top:topHeader + 'px'}]">
+			<view class="header-title">
+				<view class="header-title-main">
+						<view class="margin-bottom-xs">{{title}}</view>
+						<view class="point"></view>
+				</view>
+			</view>
+			<swiper-tab :menuList="menuList" @changeTab="changeTab" :activeTab="currentIndex"></swiper-tab>
+		</view>
+		<scroll-view  scroll-y="true" class="scroll-main"
+		:style="[{height:'calc(100vh - 74px - '+ topHeader+'px)'}]"
+		:refresher-enabled="true"
+		 :refresher-triggered="triggered"
+		@refresherrefresh="onRefresh" @scrolltolower="loadMore">
+			<view class="list" v-if="params.type<7">
+				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
+					<view class="cu-item" v-for="(course,i) in item.list" :key="i">
+							<view class="card-header flex justify-between solid-bottom">
+								 <view>{{index}}</view>
+								 <view class="text-student course-status">
+									  {{item.status|status}}
+								 </view>
+							</view>
+							<view class="card flex">
+								<view class="card-left">
+									<img mode="scaleToFill" :src="course.image" alt="" class="card-image">
+								</view>
+								<view class="card-right flex-sub margin-left-sm">
+									<view class="card-title">{{course.name}}</view>
+									<view class="card-item margin-top-xs">
+										 <text class="card-label">时间：</text>
+										 <text class="card-text">{{course.attend_day}}</text>
+									</view>
+									<view class="card-item margin-top-xs" >
+										 <text class="card-label">课时：</text>
+										 <text class="card-text">{{course.class_total}}</text>
+									</view>
+									<view class="card-item margin-top-xs">
+										 <text class="card-label">学生：</text>
+										 <text class="card-text">{{course.student_name}}</text>
+									</view>
+									<view class="card-item margin-top-xs">
+										 <text class="card-label">老师：</text>
+										 <text class="card-text">{{course.teacher||'--'}}</text>
+									</view>
+								</view>
+							</view>
+							<view class="flex card-footer solid-bottom padding-bottom-xs">
+										<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
+											<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
+										</view>
+							</view>
+							<view class="card-bottom margin-top-xs flex justify-between">
+								<view>
+									<text class="text-price text-red">{{item.sum_money}}</text>
+								</view>
+								<view>
+										<button @tap="dropCourse(course.order_info_id)" class="cu-btn round bg-student text-white" v-if="dropStatus.includes(item.status)&&course.is_return===0">退课</button>
+										<button @tap="droping" class="cu-btn round sm line-cyan" v-if="dropStatus.includes(item.status)&&course.is_return===1">退课中</button>
+										<button @tap="pay(item.order_id)" class="cu-btn round bg-student text-white margin-right-sm" v-if="item.status===0">立即付款</button>
+										<button @tap="cancel(item.order_id)" class="cu-btn round bg-gray" v-if="item.status===0&&!isPaying">取消</button>
+								</view>
+							</view>
+					</view>
+				</view>
+			</view>
+			<view class="list" v-else>
+				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
+						<view class="cu-item">
+								<view class="card-header flex justify-between solid-bottom">
+								 <view>{{item.code}}</view>
+								 <view class="text-student course-status">
+									  {{item.status|dropStatus}}
+								 </view>
+							</view>
+							<view class="card flex">
+									<view class="card-left">
+										<img mode="scaleToFill" :src="item.image" alt="" class="card-image">
+									</view>
+									<view class="card-right flex-sub margin-left-sm">
+										<view class="card-title">{{item.name}}</view>
+										<view class="card-item margin-top-xs">
+											<text class="card-label">时间：</text>
+											<text class="card-text">{{item.attend_day}}</text>
+										</view>
+										<view class="card-item margin-top-xs" >
+											<text class="card-label">课时：</text>
+											<text class="card-text">{{item.class_total}}</text>
+										</view>
+										<view class="card-item margin-top-xs">
+											<text class="card-label">学生：</text>
+											<text class="card-text">{{item.student_name}}</text>
+										</view>
+										<view class="card-item margin-top-xs">
+											<text class="card-label">老师：</text>
+											<text class="card-text">{{item.teacher||'--'}}</text>
+										</view>
+									</view>
+							</view>
+							<view class="flex card-footer padding-bottom-xs">
+									<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
+										<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
+									</view>
+							</view>
+						</view>
+				</view>
+			</view>
+		</scroll-view>
+		<web-view v-if="showForm" :src="payurl"></web-view>
+  </view>
+</template>
+
+<script>
+import { _orderCenter, _dropList, _payOrder, _dropCourse, _cancelOrder } from '@/api/course'
+import swiperTab from '@/components/swiper-tab.vue'
+export default {
+  components: {
+    swiperTab
+  },
+  data () {
+    return {
+      title: '订单',
+      topHeader: this.globalCustomBarHeight,
+      noMore: false, // 加载判断
+      triggered: false, // 下拉
+      showForm: false, // 支付弹窗
+      isPaying: false, // 支付中...
+      payurl: '',
+      menuList: ['全部订单', '待付款', '已付款', '退课售后'],
+      currentIndex: 0,
+      list: [],
+      dropStatus: [1, 4],
+      orderTypes: {
+        0: 5,
+        1: 0,
+        2: 1,
+        3: 7
+      },
+      params: {
+        type: 5,
+        page: 1
+      }
+    }
+  },
+  filters: {
+    status: function(value) {
+      switch (value) {
+        case 0:
+          return '未付款'
+        case 1:
+          return '已付款'
+        case 2:
+          return '申诉'
+        case 3:
+          return '已取消'
+        case 4:
+          return '部分退课'
+        case 5:
+          return '全部退课'
+        case 6:
+          return '正在付款'
+        default:
+          return '状态未知'
+      }
+    },
+    dropStatus(v) {
+      return v === 0 ? '审核中' : v === 1 ? '审核通过' : '驳回'
+    }
+  },
+  onLoad (option) {
+    if (option.type) {
+      const index = decodeURIComponent(option.type)
+      this.changeTab(index)
+    } else {
+      this.get_list()
+    }
+  },
+  methods: {
+    refresh() {
+      this.currentIndex = 0
+      this.params.page = 1
+      this.params.type = 5
+      this.get_list()
+    },
+    onRefresh() {
+      this.triggered = true
+      this.refresh()
+      setTimeout(() => {
+        this.triggered = false
+      }, 1000)
+    },
+    loadMore() {
+      if (this.noMore) {
+        uni.showToast({ title: '没有更多了', icon: 'none' })
+        return false
+      }
+      this.params.page++
+      this.get_list()
+    },
+    get_list() {
+      if (this.params.type < 7) {
+        this.get_orders()
+      } else {
+        this.get_drops()
+      }
+    },
+    get_orders() {
+      _orderCenter(this.params).then(res => {
+        if (this.params.page > 1) {
+          if (Object.keys(res.data).length < this.page_size) this.noMore = true
+          this.list = Object.assign({}, this.list, res.data)
+        } else {
+          this.noMore = false
+          this.list = res.data
+        }
+      })
+    },
+    get_drops() {
+      _dropList({ page: this.params.page }).then(res => {
+        if (this.params.page > 1) {
+	        if (!res.data.drop_course_data) {
+            this.noMore = true
+            return
+          }
+          if (res.data.drop_course_data.length < this.page_size) this.noMore = true
+          this.list = this.list.concat(res.data.drop_course_data)
+        } else {
+          this.noMore = false
+          this.list = res.data.drop_course_data || []
+        }
+      })
+    },
+    droping() {
+      this.changeTab(3)
+    },
+    dropCourse(id) {
+      const params = { order_info_id: id, refund_explanation: '', type_id: 0 }
+      const _self = this
+      uni.showModal({
+        title: '提示',
+        content: '确定要删除？',
+        cancelText: '取消',
+        confirmText: '确定',
+        success: res => {
+          if (res.confirm) {
+            _dropCourse(params).then(res => {
+              uni.showToast({ title: '已经发起退课,请耐心等待', icon: 'none' })
+              _self.refresh()
+            })
+          }
+        }
+      })
+    },
+    pay(id) {
+      const _self = this
+      _self.isPaying = true
+      uni.showModal({
+        title: '温馨提示：',
+        content: '1、感谢您的购买;\n' +
+                  '2、退费规则请咨询客服;\n' +
+                  '3、本平台对以上细则有最终解释权。',
+        cancelText: '取消',
+        confirmText: '确定',
+        success: res => {
+          if (res.confirm) {
+            _payOrder({ order_id: id, pay_type: 'wechat', trade_type: 'JSAPI' }).then(res => {
+              if (res.code === 0) {
+                _self.isPaying = false
+                return false
+              }
+              if (res.code === 200) {
+                uni.showToast({ title: res.msg, icon: 'success', duration: 2000 })
+                _self.changeTab(2)
+                return true
+              }
+              if (res.code === 301) {
+                _self.showForm = true
+                _self.payurl = res.data
+                return true
+              }
+              // 进行支付
+              uni.requestPayment({
+                timeStamp: res.data.timeStamp,
+                nonceStr: res.data.nonceStr,
+                package: res.data.package,
+                signType: res.data.signType,
+                paySign: res.data.paySign,
+                success: function (res) {
+                  _self.isPaying = false
+                  _self.refresh()
+                },
+                fail: function(res) {
+                  _self.isPaying = false
+                }
+              })
+            })
+          } else if (res.cancel) {
+            _self.isPaying = false
+          }
+        }
+      })
+    },
+    cancel(id) {
+      const _self = this
+      uni.showModal({
+        title: '提示',
+        content: '确定取消？',
+        cancelText: '取消',
+        confirmText: '确定',
+        success: res => {
+          if (res.confirm) {
+            _cancelOrder({ order_id: id }).then(res => {
+              uni.showToast({ title: res.msg, icon: 'none' })
+              _self.refresh()
+            })
+          }
+        }
+      })
+    },
+    changeTab(index) {
+      this.params.page = 1
+      this.currentIndex = index
+      this.params.type = this.orderTypes[index]
+      this.get_list()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/common/css/mixin.scss';
+.scroll-main{
+	margin-top:74px;
+	padding:20rpx;
+}
+.cu-card{
+	.cu-item{
+		margin-top:10rpx;
+		padding:20rpx;
+		margin:0;
+	}
+}
+.card-header{
+	padding-bottom:10px;
+  @include title(10px,18px);
+}
+.card{
+	&-title{
+		font-size:16px;
+	}
+	&-image{
+		width:35vw;
+		height:35vw;
+		border-radius:10rpx;
+	}
+	&-label{
+		color:#999;
+	}
+	&-text{
+		color:#333;
+	}
+}
+.course-status{
+	font-size:14px;
+	font-weight:normal;
+}
+</style>