yubaitong-c/src/pages/contrast/contrast-list.vue

<template>
	<view class="user-setting-box" @click.stop="optionActive = null">
		<!-- #ifndef MP-TOUTIAO -->
		<Navbar background-color="#fff" color="#333" title="对比" :showBack="false"></Navbar>
		<!-- #endif -->
		<view class="content">
			<view class="top">
				<view class="left">
					<image :src="staticUrl ? staticUrl + 'vs.png' : ''" class="pic" mode="heightFix"></image>
					我的对比
				</view>
				<view class="empty-btn" @click="emptyCollection">
					清空
				</view>
			</view>
			<view class="goods-list">
				<view class="good-item" v-for="item in goodsList" :key="item.id">
					<view class="left">
						<IconText class="icon" :code="`\ue842`" v-if="item.checked" size="14" color="#6B95FF"
							@click.native="handleChange(item)">
						</IconText>
						<IconText class="icon" :code="`\ue84e`" size="14" color="#999" v-else
							@click.native="handleChange(item)"></IconText>
						<image :src="item.masterPic" class="pic" mode="aspectFill"></image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="price">参考价：<text>￥{{item.price}}</text></view>
						</view>
					</view>
					<view class="right">
						<view @click.stop="optionModal(item)" class="option-btn">
							··
						</view>
						<view class="option-box" v-if="optionActive === item.id">
							<view class="arrow"></view>
							<view class="option" @click="topCollection(item)">
								<IconText class="icon" :code="`\ue61e`" size="14" color="#fff"></IconText>
								顶置
							</view>
							<view class="option" @click="moveCollection(item, index)">
								<IconText class="icon" :code="`\ue8a7`" size="14" color="#fff"></IconText>
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="toContrast">开始对比（{{selected.length}}）</view>
		<TabBar></TabBar>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Mixins
	} from 'vue-property-decorator';
	import loginMixin from '@/common/mixins/loginMixin.ts';
	import {
		types
	} from '@/common/store/index';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})
	export default class SelectBaby extends Mixins(loginMixin) {
		@baseModule.Getter('_contrastGoodId') _contrastGoodId: any;
		@baseModule.Mutation(types.SET_TABBARINDEX) setTabBarIndex : any;
		@baseModule.Mutation(types.SET_CONTRAST_GOOD_ID) setContrastGoodId : any;
		staticUrl : string = this.$oss_url; 	//oss地址
		goodsList : any = [];
		optionActive : any = null;
		selected : any = [];
		shareInfo : any = {};

		onShow() {
			this.selected = [];
			this.setTabBarIndex(1);
			this.getGoodsList();
			this.getShareInfo();
		}

		onShareAppMessage() {
			return {
				title: '育百通',
				path: '/pages/front/front',
				imageUrl: this.shareInfo.pic
			};
		}

		onShareTimeline() {
			return {
				title: '育百通', // 分享标题
				imageUrl: this.shareInfo.pic, // 分享的图片路径，可选
			};
		}

		getGoodsList() {
			this.$http
				.get({
					url: this.$api.getGoodsList,
					data: {
						queryCompared: 1,
						status: '3',
					}
				})
				.then((res : any) => {
					this.goodsList = res.list.map((item : any) => {
						return {
							...item,
							checked: this._contrastGoodId.includes(item.id)
						}
					});
					if(this._contrastGoodId.length){
						this.selected = this.goodsList.filter((item : any) => {
							return item.checked;
						});
					}
				}, (err : any) => {
					console.log(err);
				});
		}

		getShareInfo() {
			this.$http
				.get({
					url: this.$api.getShareInfo
				})
				.then((res : any) => {
					this.shareInfo = res;
				}, (err : any) => {
					console.log(err);
				});
		}

		optionModal(item : any) {
			this.optionActive = item.id;
		}

		handleChange(item : any) {
			item.checked = !item.checked;
			this.selected = this.goodsList.filter((item : any) => {
				return item.checked;
			})
		}

		moveCollection(item : any, index: any) {
			this.$http
				.post({
					url: this.$api.moveCollection,
					data: {
						types: 3,
						rid: item.id
					}
				})
				.then((res : any) => {
					uni.showToast({
						title: '已取消对比'
					});
					let arr = [...this._contrastGoodId];
					arr.splice(index, 1);
					this.setContrastGoodId(arr);
					this.getGoodsList();
				}, (err : any) => {
					console.log(err);
				});
		}

		topCollection(item : any) {
			this.$http
				.post({
					url: this.$api.topCollection,
					data: {
						types: 3,
						rid: item.id
					}
				})
				.then((res : any) => {
					// uni.showToast({
					// 	title: '已取消对比'
					// });
					this.getGoodsList();
				}, (err : any) => {
					console.log(err);
				});
		}

		emptyCollection() {
			this.$http
				.post({
					url: this.$api.emptyCollection,
					data: {
						types: 3,
					}
				})
				.then((res : any) => {
					// uni.showToast({
					// 	title: '已取消对比'
					// });
					this.setContrastGoodId([]);
					this.getGoodsList();
				}, (err : any) => {
					console.log(err);
				});
		}

		toContrast(item : any) {
			if (!this.selected.length) {
				uni.showToast({
					title: '请选择需要对比的产品',
					icon: 'none'
				})
				return;
			};
			// console.log(this.selected.map((item : any) => item.id) )
			let ids = this.selected.map((item : any) => item.id);
			this.setContrastGoodId(ids);
			this.$Router.push({
				path: '/pages/contrast/contrast',
				query: { 
					ids
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.user-setting-box {
		// background: #F5F5F5;
		height: 100vh;
		// @include flex-y(flex-start);

		.content {
			width: 100%;
			// padding: 0 vw(15);
			box-sizing: border-box;
			@include flex-y(flex-start);
			padding-bottom: vw(50);

			.top {
				width: 100%;
				height: vw(42);
				@include flex-x();
				padding: 0 vw(12);
				box-sizing: border-box;

				.left {
					@include word-vw(14, #333);
					@include flex-x(flex-start);

					.pic {
						height: vw(16);
						margin-right: vw(6);
					}
				}

				.empty-btn {
					@include word-vw(12, #999);
				}
			}

			.goods-list {
				width: 100%;
				border-radius: vw(5);
				// overflow: hidden;
			}

			.good-item {
				width: 100%;
				height: vw(80);
				@include flex-x();
				padding: 0 vw(18);
				box-sizing: border-box;
				background: #fff;
				margin-top: vw(1);
				@include flex-x();

				.left {
					@include flex-x();

					.pic {
						@include wh(64, 64);
						margin: 0 vw(10);
					}

					.info {
						@include flex-y(center, flex-start);

						.name {
							@include word-vw(14, #333);
							font-weight: bold;
						}

						.price {
							margin-top: vw(6);
							@include word-vw(12, #999);

							text {
								@include word-vw(14, #FF5733);
								font-weight: bold;
							}
						}
					}
				}

				.right {
					position: relative;

					.option-btn {
						@include wh(32, 18);
						border-radius: vw(4);
						background: #F2F2F2;
						@include flex-x(center);
						@include word-vw(14, #BDBDBD);
						font-weight: bold;
					}

					.option-box {
						width: vw(85);
						background: #424242;
						position: absolute;
						@include flex-y();
						right: vw(-8);
						border-radius: vw(4);
						z-index: 10;

						.option {
							width: vw(72);
							height: vw(36);
							@include word-vw(12, #fff);
							@include flex-x(center);

							.icon {
								margin-right: vw(10);
							}

							&:nth-last-of-type(1) {
								border-top: vw(1) solid rgba(232, 232, 232, 0.11);
							}
						}

						.arrow {
							width: 0;
							height: 0;
							border-left: vw(5) solid transparent;
							border-right: vw(5) solid transparent;
							border-bottom: vw(5) solid #424242;
							border-top: vw(5) solid transparent;
							margin: 0;
							position: absolute;
							top: vw(-10);
							right: vw(16);
						}
					}
				}
			}
		}

		.btn {
			@include wh(150, 50);
			border-radius: vw(25);
			background: #618EFF;
			@include flex-x(center);
			@include word-vw(16, #fff);
			position: fixed;
			bottom: 100px;
			right: vw(10);
		}
	}
</style>