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">
						{{content.name}}
					</view>
					<view class="right">
						{{totalCount}}人已收藏
					</view>
				</view>
			</view>
			<!-- 	<view class="parmasBox" v-for="(item,index) in parmsList" v-if="navBarTitle">
				<view class="con">
					<view class="title">
						{{item.title}}
					</view>
					<view class="list">
						<view class="item" v-for="(item1,index1) in item.list" :class="[index1==ids[index]?'act':'']"
							@click="">
							{{item1.data}}
						</view>
					</view>
				</view>
			</view> -->
			<view class="parmasBox" v-for="(item,index) in parmsList">
				<view class="con">
					<view class="title">
						{{item.title}}
					</view>
					<view class="list">
						<view class="item" v-for="(item1,index1) in item.list" :class="[item1.isSelect?'act':'']"
							@click="handleSel(item.list,index1,item[index],index)">
							{{item1.data}}
						</view>
					</view>
				</view>
			</view>

			<view class="parmasBox" style="border-bottom: none;">
				<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">
					￥{{totalPrice.toFixed(2)}}
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<button open-type="share" class="right">
				一键下单
			</button>
			<!-- 	<view class="right" @click="testShare">
				分享
			</view> -->
		</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: false,
				addOrLessIcon1: '/static/index/add.png',

				lovePic: '',

				content: null,

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

				parmsObj: {},

				checkFullSel1: [],
				checkFullSel: 0,
				totalPrice: 0,

				totalCount: 0,

				navBarTitle: '',
				ids: [],
				cutdownRatio: 1
			}
		},
		async onLoad(o) {
			// o.id = 20
			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.content = res.data
					this.bannerList = res.data.images
					this.parmsList = res.data.skuParams
					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"
					}
					this.parmsList.forEach((item, index) => {
						this.parmsObj[item.title] = null
						this.checkFullSel1.push(0)

					})

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} else {
				let res = await getMyGoodsDetailReq({
					id: getApp().mallItem.id
				})
				if (res.code == 0) {
					console.log('进入详情返回值', res);
					this.content = res.data
					this.bannerList = res.data.images
					this.parmsList = res.data.skuParams
					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"
					}
					this.parmsList.forEach((item, index) => {
						this.parmsObj[item.title] = null
						this.checkFullSel1.push(0)

					})



				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}

				// this.content = getApp().mallItem
				// this.bannerList = getApp().mallItem.images


				// this.parmsList = getApp().mallItem.skuParams
				// this.totalCount = this.content.collect_total_count

				// this.parmsList.forEach((item, index) => {
				// 	this.parmsObj[item.title] = null
				// 	this.checkFullSel1.push(0)

				// })

				// this.content1 = getApp().mallItem.content

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

		watch: {
			checkFullSel: {
				async handler(n, o) {
					let res = this.checkFullSel1.every((item, index) => {
						return item == 1
					})
					if (res) {
						let parms = []
						Object.keys(this.parmsObj).forEach((item4, index8) => {
							parms.push(this.parmsObj[item4])
						})
						console.log(parms);
						let res = await getGoodsPriceReq({
							goods_id: this.content.id,
							stock: parms
						})
						if (res.code == 0) {
							console.log(res);

							this.totalPrice = res.data * this.cutdownRatio
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}

				},
			}
		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		onShareAppMessage(params) {
			let ids = []
			this.parmsList.forEach((item, index) => {
				item.list.forEach((item1, index1) => {
					if (item1.isSelect) {
						ids.push(index1)
					}
				})
			})
			console.log('选中的二维iindex数组', ids);
			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 + '&ids=' + JSON.stringify(ids),
					mpId: this.$appId,
					type: this.$shareType,
				}
			}
		},
		methods: {
			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);
			},
			handleSel(item, index1, outer, pindex) {
				console.log('this.checkFullSel1', this.checkFullSel1);

				this.checkFullSel = Date.now()
				item.forEach(async (item2, index) => {
					item2.isSelect = 0
					if (index == index1) {
						item[index1].isSelect = 1

						this.parmsObj[item[index1].title] = {
							classify: item[index1].title,
							value: item[index1].data
						}
						this.checkFullSel1[pindex] = 1
					}
				})
				console.log('this.parmsObj', this.parmsObj);
			},
			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>