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="$fileUrl() + '/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="content" v-if="activeIndex == 1">
			<view class="tabs2">
				<image class="tabs2_bk" :src="$fileUrl() + '/knapsack/tabBk2.png'" mode="widthFix"></image>
				<view class="tabs2_info">
					<span class="text">选择排序方式：</span>
					<uni-data-select class="select" v-model="params.sort" :localdata="sortList"></uni-data-select>
				</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="$fileUrl() + '/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 @click="decompose(item)" style="width: 44px;" :src="$fileUrl() + '/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" @click="clickCheckType(2)" :src="$fileUrl() + '/knapsack/button3.png'" mode="heightFix"></image>
				<image class="button" @click="clickCheckType(1)" :src="$fileUrl() + '/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="$fileUrl() + '/knapsack/check.png'" mode="widthFix"></image>
					<image class="radio2" @click="clickCheckAll(false)" v-else
						:src="$fileUrl() + '/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">
					<view class="button button1" @click="cancelOrder">
						取消
					</view>
					<view class="button button2" v-if="checkType == 1" @click="toConfirmConfirm">
						选择地址
					</view>
					<view class="button button2" v-if="checkType == 2" @click="decompose">
						分解
					</view>
				</view>
			</view>
		</view>
		<view class="content " v-if="activeIndex == 2">
			<view class="tabs2 tabw">
				<image class="tabs2_bk" style="width: 100%; height: 30px;" :src="$fileUrl() + '/knapsack/tabBk2.png'"
					mode=""></image>
				<view class="tabs2_info">
					<view :class="['tabItem', tab2Active == 1 ? 'active': '']" @click="tabs2Click(1)">
						待付款
					</view>
					<view :class="['tabItem', tab2Active == 2 ? 'active': '']" @click="tabs2Click(2)">
						待发货
					</view>
					<view :class="['tabItem', tab2Active == 3 ? 'active': '']" @click="tabs2Click(3)">
						待收货
					</view>
					<view :class="['tabItem', tab2Active == 4 ? 'active': '']" @click="tabs2Click(4)">
						全部
					</view>
				</view>
			</view>

			<view class="list">
				<view class="card" style="position: relative;" v-for="(item, index) in list2">
					<view class="row text" style="font-weight: 600;">
						{{ item.order.addTime }}
						<view class="status2 type1" v-if="item.order.orderStatus == 101">
							待付款
						</view>
						<view class="status2 type2" v-if="item.order.orderStatus == 201">
							待发货
						</view>
						<view class="status2 type3" v-if="item.order.orderStatus == 301">
							待收货
						</view>
						<view class="status2 type4" v-if="item.order.orderStatus == 401">
							已完成
						</view>
					</view>
					<view class="row text" style="font-size: 12px;">
						订单ID：{{item.order.orderSn}}
					</view>
					<view class="row" style="margin-top: 10px;" v-for="(item2, index2) in item.prizeList">
						<view class="left">
							<image class="img2" :src="item2.prizeIcon" mode="aspectFill"></image>
						</view>
						<view class="right" style="font-size: 14px;">
							<view class="row" style="font-size: 12px;">
								{{item2.prizeName}}
							</view>
							<view class="row" style="font-weight: 600;color: #FF2C43;">
								￥：9.9
								<span style="color: #000;"> × {{item2.prizeNum}}</span>
							</view>
						</view>
					</view>
					<view class="row button" style="font-size: 14px;">
						<span></span>
						<span>
							实付金额:
							<span style="font-weight: 600;color: #FF2C43;">
								￥<span style="font-size: 18px;">{{item.order.actualPrice}}</span>
							</span>
						</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		packagePrizeListApi,
		packageOrderListApi,
		prizerRecoverApi
	} from "@/api/knapsack.js"
	export default {
		data() {
			return {
				showCheck: false,
				// 多选类型 1下单 2分解
				checkType: 1,
				activeIndex: 1,
				list: [],
				allCheck: false,
				params: {
					limit: 999,
					page: 1,
					status: 0,
					sort: null,
				},
				list2: [],
				params2: {
					limit: 999,
					page: 1,
				},
				selectIndex: [],
				sortList: [{
						value: 0,
						text: "按时间排序"
					}
				],
				tab2Active: 4,
			}
		},
		onShow() {
			// 重置页面状态
			this.cancelOrder()
			this.selectIndex = []
			this.showCheck = false
			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()
			// 获取商城订单数据（全部）
			this.getList2()
		},
		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: {
			tabs2Click(index) {
				this.tab2Active = index
				let type = null
				switch (index){
					case 1:
						type = 101
						break;
					case 2:
						type = 201
						break;
					case 3:
						type = 301
						break;
					case 4:
						type = null
						break;
				}
				this.getList2(type)
			},
			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)
					}
				}
			},
			clickCheckType(type) {
				// 下单或分解多选打开
				this.checkType = type
				this.showCheck = true
			},
			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
				})
			},
			getList2(type) {
				// 获取商城订单列表
				if(type) {
					this.params2.status = type
				} else {
					this.params2.status = ''
				}
				packageOrderListApi(this.params2).then(res => {
					console.log(res, '商城订单列表')
					this.list2 = res.data.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('动画支持完毕')
					})
				}
			},
			decompose(value) {
				// 分解卡牌
				let _this = this
				let prizeIdList = []
				if (value.prizeName) {
					prizeIdList = [value.id]
				} else if (this.selectIndex.length > 0) {
					prizeIdList = this.selectIndex
				} else {
					wx.showToast({
						title: '请选则要分解卡牌。',
						icon: 'none',
					})
					return
				}
				wx.showModal({
					title: '确认分解卡牌？',
					content: '卡牌分解后将无法找回。',
					success: (res) => {
						if (res.confirm) {
							prizerRecoverApi(prizeIdList).then(res => {
								console.log(res, 'res')
								wx.showToast({
									title: '分解成功。',
									icon: 'none',
								})
								_this.getList()
							})
						} else if (res.cancel) {
							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 10px 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;
			}
		}

		.tabs2 {
			width: 240px;
			margin: 0 auto;
			position: relative;

			.tabs2_bk {
				width: 100%;
			}

			.tabs2_info {
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				font-size: 12px;

				.text {
					color: #fff;
				}

				.select {
					width: 80px;
				}
			}

		}

		.tabw {
			width: calc(100% - 20px);
			margin: 0 auto;

			.tabs2_info {
				justify-content: space-around;

				.tabItem {
					color: #fff;
					padding: 5px 0;
					font-size: 13px;
				}

				.active {
					color: #8EF1FF !important;
					border-bottom: solid 2px #8EF1FF;
				}
			}
		}

		.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;
					.status2 {
						position: absolute;
						right: 10px;
						width: 44px;
						height: 16px;
						font-size: 12px;
						border-radius: 2px;
						text-align: center;
						padding: 2px 5px;
					}
					.type1 {
						background: #FFE4E7;
						color: #FF2C43;
					}
					.type2 {
						background: #E2EDFB;
						color: #005ECC;
					}
					.type3 {
						background: #00BCC8;
						color: #00C537;
					}
					.type4 {
						background: #DEF2E4;
						color: #00BCC8;
					}
					.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;
						}
						.img2 {
							width: 75px;
							height: 75px;
							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;
			margin-bottom: 30px;
			
			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;
					padding: 0 20px;
					border-radius: 15px;
					font-size: 14px;
					line-height: 30px;
					margin-left: 15px;
				}
				.button1 {
					height: 28px;
					border: solid 1px #FF8015;
					color: #FF8015;
				}
				.button2 {
					// border: solid 1px #FF8015;
					background: linear-gradient(180deg, #FFAD3D 0%, #FF740A 100%);
					color: #fff;
				}
			}
		}
	}
</style>

<style scoped>
	.tabs2_info>>>.uni-stat__select {
		background: none;
	}

	.tabs2_info>>>.uni-select {
		border: none !important;
		font-size: 12px;

	}

	.tabs2_info>>>.uni-icons {
		font-size: 20px !important;
	}

	.tabs2_info>>>.uni-select__input-text {
		color: #8EF1FF !important;
	}

	.tabs2_info>>>.uni-icons {
		color: #8EF1FF !important;
	}

	.tabs2_info>>>.uni-select__selector {
		width: 100px;
	}

	.tabs2_info>>>.uni-select__selector-item {
		font-size: 12px;
	}
</style>