uniAppXCX/pages/knapsack/knapsack.vue

<template>
	<view class="container">
		<view class="tabs">
			<uni-transition ref="ani" class="tabsTransition" :styles="styles" :show="true">
				<image class="tabsBk" src="@/static/img/knapsack/tabBk.png" mode="widthFix"></image>
			</uni-transition>

			<view :class="['tab', activeIndex == 1 ? 'active' : '']" @click="tabClick(1)">
				现货奖品
			</view>
			<view :class="['tab', activeIndex == 2 ? 'active' : '']" @click="tabClick(2)">
				商城订单
			</view>
		</view>
		<view class="list">
			<uni-swipe-action  :autoClose="false">
				<uni-swipe-action-item v-for="(item, index) in list" :key="index" :show="showCheck ? 'left':'none'" :disabled="true">
					<template v-slot:left>
						<view class="swipeLeft">
							<radio class="radio" :checked="item.check == true" @click="checkClick($event, item)" />
						</view>
					</template>
					<view class="card" >
						<view class="row" style="margin-top: 10px;">
							<view class="left">
								<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
							</view>
							<view class="right" style="font-size: 14px;">
								<view class="row title">
									{{item.prizeName}}
								</view>
								<view class="row text">
									获得时间：{{ item.creatTime }}
								</view>
								<view class="row" style="color: #FF2C43;">
									回收积分：{{ item.integral }}
									<span class="status">{{ item.prizeStatus }}</span>
								</view>
								<view class="row button">
									<span></span>
									<span>
										<image style="width: 44px;" src="@/static/img/knapsack/button5.png" mode="widthFix"></image>
									</span>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		
		<view class="buttons" v-if="!showCheck">
			<image class="button" src="@/static/img/knapsack/button3.png" mode="heightFix"></image>
			<image class="button" @click="showCheck = true" src="@/static/img/knapsack/button4.png" mode="heightFix"></image>
		</view>
		<view class="bottom" v-if="showCheck">
			<view class="left">
				<image class="radio1" @click="clickCheckAll(true)" v-if="!allCheck" src="@/static/img/knapsack/check.png" mode="widthFix"></image>
				<image class="radio2" @click="clickCheckAll(false)" v-else src="@/static/img/knapsack/checkActive.png" mode="widthFix"></image>
				<view class="text" style="color: #000;">
					全选
				</view>
				<view class="text">
					已选 (<span style="color: #000;">{{selectIndex.length}}</span>)
				</view>
			</view>
			<view class="right">
				<image class="button" @click="cancelOrder" style="margin-right: 5px;" src="@/static/img/knapsack/button2.png" mode="heightFix"></image>
				<image class="button" @click="toConfirmConfirm" src="@/static/img/knapsack/button1.png" mode="heightFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		packagePrizeListApi
	} from "@/api/knapsack.js"
	export default {
		data() {
			return {
				showCheck: false,
				activeIndex: 1,
				list: [],
				allCheck: false,
				params: {
					limit: 999,
					page: 1,
					status: 0,
				},
				selectIndex: [],
			}
		},
		onShow() {
			this.activeIndex = 1
			this.$refs.ani.init({
				duration: 100,
				timingFunction: 'linear',
				transformOrigin: '50% 50%',
				show: true,
			})
			this.$refs.ani.step({
				translateX: '0'
			})
			this.$refs.ani.run(() => {
				console.log('动画支持完毕')
			})
			this.getList()
		},
		onReady() {
			
		},
		onLoad() {
			
		},
		watch: {
			list: {
				deep: true,
				handler(newValue, oldValue) {
					// console.log(newValue, 'newValue')
					let bool = true
					for (var i = 0; i < newValue.length; i++) {
						if(!newValue[i].check) {
							bool = false
						}
						
					}
					this.allCheck = bool
				}
			}
		},
		methods: {
			toConfirmConfirm() {
				if (this.selectIndex.length == 0) {
					wx.showToast({
						title: '请选则要发货卡牌。',
						icon: 'none',
					})
					return
				}
				getApp().globalData.orderConfirmIds = this.selectIndex
				getApp().globalData.selectAddrss = null
				this.$navigateTo('/pages/orderConfirm/orderConfirm')
			},
			// 取消下单
			cancelOrder() {
				this.showCheck = false
				this.selectIndex = []
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].check = false
				}
			},
			clickCheckAll(bool) {
				this.selectIndex = []
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].check = bool
					if (bool) {
						this.selectIndex.push(this.list[i].id)
					}
				}
			},
			checkClick(e, item) {
				console.log(item, 'item')
				item.check = !item.check
				
				let index = this.selectIndex.indexOf(item.id)
				if (item.check && index == -1) {
					this.selectIndex.push(item.id)
				} else if (!item.check && index != -1) {
					this.selectIndex.splice(index, 1)
				}
				console.log(this.selectIndex, 'this.selectIndex')
			},
			getList() {
				packagePrizeListApi(this.params).then(res => {
					console.log(res, '奖品背包')
					let list = res.data.list
					for (var i = 0; i < list.length; i++) {
						list[i].check = false
					}
					this.list = list
				})
			},
			tabClick(index) {
				this.activeIndex = index
				if (index == 1) {
					this.$refs.ani.step({
						translateX: '0'
					})
					this.$refs.ani.run(() => {
						console.log('动画支持完毕')
					})
				}
				if (index == 2) {
					this.$refs.ani.step({
						translateX: '120px'
					})
					this.$refs.ani.run(() => {
						console.log('动画支持完毕')
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #9EC8F9;
		overflow: auto;

		.tabs {
			width: 240px;
			height: 44px;
			border-radius: 22px;
			background: rgba(255, 255, 255, 0.8);
			margin: 20px auto;
			color: #005ECC;
			font-size: 14px;
			display: flex;
			position: relative;

			.tabsTransition {
				width: 50%;
				height: 44px;
				position: absolute;

				.tabsBk {
					width: 100%;
					height: 100%;
				}
			}

			.tab {
				width: 50%;
				height: 44px;
				text-align: center;
				line-height: 44px;
				z-index: 2;
			}

			.active {
				color: #fff;
			}
		}
		.list {
			padding: 10px;
			padding-bottom: 70px;
			.swipeLeft {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				.radio {
					transform: scale(0.8);
				}
			}
			.card {
				margin-bottom: 10px;
				border-radius: 8px;
				background: #fff;
				padding: 10px;
				
				.row {
					display: flex;
					justify-content: space-between;
					
					.left {
						display: flex;
						align-items: center;
						
						.photo {
							margin-right: 5px;
							width: 30px;
							height: 30px;
							border-radius: 50%;
						}
						
						.name {
							font-size: 14px;
							font-weight: 600;
							
						}
						
						.img {
							width: 100px;
							height: 100px;
							border-radius: 2px;
							margin-right: 10px;
						}
					}
					.right {
						flex: 1;
						.row {
							margin-bottom: 5px;
						}
						.title {
							font-size: 16px;
							font-weight: 600;
						}
					}
					.text1 {
						color: #666666;
						font-size: 12px;
					}
				}
			}
		}
		.buttons {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			width: 100%;
			padding: 10px 0;
			image {
				height: 42px;
			}
		}
		.bottom {
			background: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			width: calc(100% - 20px);
			padding: 10px;
			.left {
				display: flex;
				justify-content: center;
				align-items: center;
				
				.text {
					color: #999;
					font-size: 14px;
					margin-left: 10px;
				}
				.radio1 {
					width: 20px;
					height: 20px;
				}
				.radio2 {
					width: 18px;
					height: 18px;
				}
			}
			
			.right {
				display: flex;
				
				.button {
					height: 30px;
				}
			}
		}
	}
</style>