jigesi/pages/my/collectDetail/index.vue

<template>
	<view class="">
		<view class="page">
			<navBar :backType="navBarTitle" :title="navBarTitle?navBarTitle:'详情'" :back="true" color="black"
				background="white" />
			<view class="topImg">
				<u-swiper type='img' radius="0rpx 0rpx 0rpx 40rpx" :list="bannerList" keyName="image" indicator
					indicatorMode="line" :autoplay="true" height="850rpx" imgMode="heightFix" circular
					@change="e => currentNum = e.current">
					<view slot="indicator">
					</view>
				</u-swiper>

				<view class="indicatorBox1">
					<view class="indicator1">
						<view class="indicator1__dot1" style="" v-for="(item, index) in bannerList" :key="index"
							:class="[index === currentNum ?'indicator1__dot1--active1':'']">
						</view>
					</view>
				</view>
			</view>


			<view class="cen">
				<image class="water" src="/static/index/water.png" mode=""></image>
				<image class="halfC" src="/static/index/halfCircle_275.png" mode=""></image>
				<image class="love" :src="lovePic" mode="" @click="handleCol"></image>
				<view class="txtBox">
					<view class="left" v-if="content.name">
						{{content.name}}
					</view>
					<view class="right">
						{{totalCount}}人已收藏
					</view>
				</view>
			</view>
			<view class="parmasBox" v-for="(item,index) in Object.keys(skuParams.attrs)">
				<view class="con">
					<view class="title">
						{{item}}
					</view>
					<view class="list">
						<view class="item" @click="handleC(item,index,item1)"
							v-for="(item1,index1) in skuParams.attrs[item]"
							:class="[item1==saveCheckedObj[item]?'act':'']">
							{{item1}}
						</view>
					</view>
				</view>
			</view>

			<view class="parmasBox" style="border-bottom:1rpx solid #EAEAEA;">
				<view class="con" @click="handleOpenOrClose(1)">
					<view class="title1">
						<view class="txt">
							商品描述
						</view>
						<image class="add" :src="addOrLessIcon1" mode="" :style="{height:addOrLessIcon1=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}"></image>
					</view>
					<view class="des" v-if="show1">
						<u-parse :content="content1"></u-parse>
					</view>
				</view>
			</view>
		</view>

		<view class="bot">
			<view class="left">
				<view class="price">
					￥{{Number( totalPrice).toFixed(0)}}
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<button open-type="share" class="right">
				一键下单
			</button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getMyCollectDetailReq,
	} from '@/api/my/index.js'
	import {
		addCollReq,
		cancelCollReq,
		getGoodsPriceReq,
		postOrderReq,
	} from '@/api/test/index.js'
	export default {
		components: {

		},
		data() {
			return {
				picUrl: this.$picUrl,
				picBase: this.$picBase,
				currIndex: 0,
				currIndex1: 0,
				currIndex2: 0,
				show1: true,
				addOrLessIcon1: '/static/index/shortLine.png',

				lovePic: '/static/mall/love.png',

				content: null,

				currentNum: 0,
				bannerList: [],
				totalCount: 0,
				content1: '',

				totalPrice: 0,

				navBarTitle: '',
				ids: [],
				cutdownRatio: 1,

				// sku
				skuParams: {
					"attrs": {},
					"sku": []
				},
				saveCheckedObj: null,
				fullCheckArr: [],
				watchValue: null,
				conditions: [],
			}
		},
		async onLoad(o) {
			// o.id = 17
			if (o.id) {
				// this.ids = JSON.parse(o.ids)
				this.navBarTitle = '首页'
				let res = await getMyCollectDetailReq({
					id: o.id
				})
				if (res.code == 0) {
					console.log('我的收藏详情', res);
					this.skuParams = res.data.sku_params || {
						"attrs": {},
						"sku": []
					}
					// 动态生成判断条件对象数组
					let c = []
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						c.push({
							key: item,
							value: null
						})
					})
					this.conditions = c
					// 动态生成用于判断选中激活项的对象
					let saveCheckedObj = {}
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						// saveCheckedObj[item] = null
						saveCheckedObj[item] = this.skuParams.attrs[item][0]
					})
					this.saveCheckedObj = saveCheckedObj
					// 动态生成用于判断sku参数是否全部选中的中间数组
					this.fullCheckArr = new Array(Object.keys(this.skuParams.attrs).length).fill(0)
					//回显默认值
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						this.handleC(item, index, this.skuParams.attrs[item][0])
					})


					this.content = res.data
					this.bannerList = this.content.images
					this.totalCount = this.content.collect_total_count

					if (this.content.isCollect) {
						this.lovePic = "/static/mall/love.png"
					} else {
						this.lovePic = "/static/mall/no_love.png"
					}

					this.content1 = this.content.content
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} else {
				let res = await getMyCollectDetailReq({
					id: getApp().Sid
				})
				if (res.code == 0) {
					console.log('我的收藏详情', res);
					// this.skuParams = res.data.sku_params

					this.skuParams = res.data.sku_params || {
						"attrs": {},
						"sku": []
					}
					// 动态生成判断条件对象数组
					let c = []
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						c.push({
							key: item,
							value: null
						})
					})
					this.conditions = c
					// 动态生成用于判断选中激活项的对象
					let saveCheckedObj = {}
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						// saveCheckedObj[item] = null
						saveCheckedObj[item] = this.skuParams.attrs[item][0]
					})
					this.saveCheckedObj = saveCheckedObj
					// 动态生成用于判断sku参数是否全部选中的中间数组
					this.fullCheckArr = new Array(Object.keys(this.skuParams.attrs).length).fill(0)
					//回显默认值
					Object.keys(this.skuParams.attrs).forEach((item, index) => {
						this.handleC(item, index, this.skuParams.attrs[item][0])
					})

					this.content = res.data
					this.bannerList = this.content.images
					this.totalCount = this.content.collect_total_count

					if (this.content.isCollect) {
						this.lovePic = "/static/mall/love.png"
					} else {
						this.lovePic = "/static/mall/no_love.png"
					}

					this.content1 = this.content.content

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}
		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		onShareAppMessage(params) {
			if (params.from === 'button' || params.from === 'menu') {
				return {
					title: this.content.name,
					imageUrl: this.$picBase + this.content.cover,
					path: '/pages/my/collectDetail/index?id=' + this.content.id,
					mpId: this.$appId,
					type: this.$shareType,
				}
			}
		},
		watch: {
			watchValue(n, o) {
				let showPrice = this.fullCheckArr.every((item, index) => {
					return item == 1
				})
				if (showPrice) {
					const filterResult = this.skuParams.sku.filter(item => {
						return this.conditions.every(condition => {
							const attrValues = this.skuParams.attrs[condition.key];
							return attrValues.includes(item[condition.key]) && item[condition.key] ===
								condition.value;
						});
					});

					this.totalPrice = filterResult[0].price * this.cutdownRatio
					// console.log('所求价格:', filterResult[0].price);
				}
			}
		},
		methods: {
			handleC(item, index, item1) {
				this.fullCheckArr[index] = 1

				// 声东击西强行触发监听
				this.watchValue = Date.now()
				this.saveCheckedObj[item] = item1

				//此处个条件对象数组条件赋值(key==外围数组key)
				this.conditions.forEach((item2, index2) => {
					if (item2.key == item) {
						item2.value = item1
					}
				})
			},
			async handleCol() {
				if (this.lovePic == "/static/mall/no_love.png") {
					let res = await addCollReq({
						id: this.content.id,
					})
					if (res.code == 0) {
						console.log('添加收藏返回值: ', res);
						this.$toast('收藏成功')
						this.totalCount += 1
						if (this.lovePic == "/static/mall/love.png") {
							this.lovePic = "/static/mall/no_love.png"
						} else {
							this.lovePic = "/static/mall/love.png"
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else {
					let res = await cancelCollReq({
						id: this.content.id,
					})
					if (res.code == 0) {
						console.log('取消收藏返回值: ', res);
						this.$toast('取消收藏成功')
						this.totalCount -= 1
						if (this.lovePic == "/static/mall/love.png") {
							this.lovePic = "/static/mall/no_love.png"
						} else {
							this.lovePic = "/static/mall/love.png"
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}

			},
			handleOpenOrClose(i) {
				if (this['addOrLessIcon' + i] == '/static/index/shortLine.png') {
					this['addOrLessIcon' + i] = '/static/index/add.png'
					this['show' + i] = false
				} else if (this['addOrLessIcon' + i] == '/static/index/add.png') {
					this['addOrLessIcon' + i] = '/static/index/shortLine.png'
					this['show' + i] = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>