待支付订单支付

src/pages/merit-box/index.vue

@@ -16,11 +16,11 @@
 						<b class="sub-title">{{info.unit_name}}</b>
 					</span>
 					<div class="list">
-						<span :class="[n.id === type_id && 'current']" v-for="n in nav" :key="n.id">{{n.title}}</span>
+						<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{n.title}}</span>
 					</div>
 				</div>
 				<div class="body">
-					<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @change="onSwiperChange">
+					<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @swiper="onSwiper" @slideChange="onSlideChange">
 						<swiper-slide v-for="swipe in nav" :key="swipe.id">
 							<scroll-view 
 								:height="containerHeight - 20" 
@@ -45,8 +45,14 @@
 
 <script>
 import { getMeritBox } from "@/api";
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+
 
 export default {
+    components: {
+        swiper,
+        swiperSlide
+    },
 	data(){
 		return {
 			query: this.$route.query,
@@ -76,26 +82,46 @@ export default {
 			}
 		}
 	},
+    computed: {
+        swiper(){
+            return this.$refs.swiper.swiper;
+        }
+    },
 	mounted(){
 		this.width = window.innerWidth;
-		console.log(this.$refs.swiper)
 		this.containerHeight = this.$refs.swiper.$el.offsetHeight;
 		this.getMeritBox();
 		this.$nextTick(() => {
 		})
 	},
 	methods: {
-		onSwiperChange(e){
-			console.log(e)
-		},
+        onSwiper(swiper){
+            console.log('on swiper', swiper)
+        },
+        onSlideChange(){
+            const { activeIndex } = this.swiper;
+            const { id } = this.nav[activeIndex];
+            this.type_id = id;
+            this.getMeritBox()
+        },
+
 		async getMeritBox(){
 			const current = this.nav.find(item => item.id === this.type_id);
 			const res = await getMeritBox(this.query.temple_id || '1', current.id, current.page, current.size);
 			this.info = res.merit_box_info;
-			// this.list = res.merit_box_order.list;
+			this.total = res.merit_box_order.total;
 			current.list = res.merit_box_order.list
-			this.total = res.merit_box_order.total
+
+            const query =  this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
+            if(!this.$route.query.temple_id){
+                history.pushState('', '', location.href + query)
+            }
 		},
+        onListBy(n, index){
+            this.type_id = n.id;
+            this.swiper.slideTo(index, 300, false)
+            this.getMeritBox();
+        },
 		loadMore(){
             console.log('加载更多')
 			const current = this.nav.find(item => item.id === this.type_id);