jigesi/pages/mall/detail/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="bannerChange">
					<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: none;"> -->
			<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 {
		addCollReq,
		cancelCollReq,
		getGoodsPriceReq,
		getMyGoodsDetailReq,
	} from '@/api/test/index.js'

	export default {
		components: {

		},
		data() {
			return {
				currIndex1: 0,

				currentNum: 0,
				show1: true,
				addOrLessIcon1: '/static/index/shortLine.png',

				lovePic: '',

				content: null,

				picBase: this.$picBase,
				bannerList: [],
				content1: '',

				totalPrice: 0,

				totalCount: 0,

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

				// sku
				skuParams: {
					"attrs": {},
					"sku": []
				},
				saveCheckedObj: null,
				fullCheckArr: [],
				watchValue: null,
				conditions: [],


				cutdownRatio: 1,
			}
		},
		async onLoad(o) {
			// o.id = 17

			this.cutdownRatio = this.$getCutDown()
			console.log('哪种折扣价格-商城详情', this.cutdownRatio);
			if (o.id) {
				// this.ids = JSON.parse(o.ids)
				this.navBarTitle = '首页'
				let res = await getMyGoodsDetailReq({
					id: o.id
				})
				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 = res.data.images
					this.totalCount = res.data.collect_total_count
					this.content1 = res.data.content
					if (this.content.isCollect) {
						this.lovePic = "/static/mall/love.png"
					} else {
						this.lovePic = "/static/mall/no_love.png"
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} else {
				let res = await getMyGoodsDetailReq({
					id: getApp().mallItem.id
					// id: 70
				})
				if (res.code == 0) {
					console.log('进入详情返回值666', res);
					// this.skuParams = res.data.sku_params


					this.skuParams = res.data.sku_params || {
						"attrs": {},
						"sku": []
					}
					// this.skuParams = {
					// 	"attrs": {
					// 		"颜色": ['红色', '绿色'],
					// 		"尺寸": ['1cm', '2cm'],
					// 	},
					// 	"sku": [{
					// 			'颜色': '红色',
					// 			'尺寸': '1cm',
					// 			"price": 1
					// 		},
					// 		{
					// 			'颜色': '红色',
					// 			'尺寸': '2cm',
					// 			"price": 2
					// 		},
					// 		{
					// 			'颜色': '绿色',
					// 			'尺寸': '1cm',
					// 			"price": 3
					// 		},
					// 		{
					// 			'颜色': '绿色',
					// 			'尺寸': '2cm',
					// 			"price": 4
					// 		},

					// 	]
					// }

					// 动态生成判断条件对象数组
					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]
					})


					console.log('this.skuParams-----', this.skuParams);
					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 = res.data.images
					this.totalCount = res.data.collect_total_count
					this.content1 = res.data.content
					if (this.content.isCollect) {
						this.lovePic = "/static/mall/love.png"
					} else {
						this.lovePic = "/static/mall/no_love.png"
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}
		},

		watch: {
			// watchValue: {
			// 	handler(n, o) {
			// 		let showPrice = this.fullCheckArr.every((item, index) => {
			// 			return item == 1
			// 		})
			// 		if (showPrice) {
			// 			this.calcPrice()
			// 			// console.log('所求价格:', filterResult[0].price);
			// 		}
			// 	},
			// 	immediate: true
			// }

			watchValue(n, o) {
				let showPrice = this.fullCheckArr.every((item, index) => {
					return item == 1
				})
				if (showPrice) {
					this.calcPrice()
					// console.log('所求价格:', filterResult[0].price);
				}

			}
		},
		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/mall/detail/index?id=' + this.content.id,
					mpId: this.$appId,
					type: this.$shareType,
				}
			}
		},
		methods: {
			calcPrice() {
				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
			},
			testShare() {
				console.log('parmsList', this.parmsList);
				let ids = []
				this.parmsList.forEach((item, index) => {
					item.list.forEach((item1, index1) => {
						if (item1.isSelect) {
							ids.push(index1)
						}
					})
				})

				console.log('选中的二维iindex数组', ids);
			},
			handleC(item, index, item1) {
				console.log('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
					}
				})
			},
			bannerChange(e) {
				this.currentNum = e.current
			},
			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>