wardrobe/pages/shopdetail/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="详情" :shadow="0" :showback="true"></tm-menubars>
		<view class="C1b1b1b">
			<tm-swiper :list="swipList" :autoplay="true" :indicator-dots="true" height="288px" circular></tm-swiper>
			<view style="padding: 10px 20px;">
				<view class="del_title">
					<view>{{details.goods_name}}</view>
					<view class="de_tag">运动休闲</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view>
						<text class="sale_price">￥{{details.sale_price}}</text>
						<text class="original_price" v-if="details.market_price">原价：{{details.market_price}}</text>
					</view>
					<view style="font-size: 14px;color:#ababab;">销量：{{details.sale_num}}</view>
				</view>
			</view>
		</view>
		<div class="zhuti" style="padding-bottom:60px !important;">
			<tm-sheet class="kuang" style="padding-bottom: 30px !important;">
				<view style="width: 98%;margin:0 auto;margin-top:20px !important;position: relative;">
					<view style="padding: 10px 10px 0px;">
						<view class="line_bottom" style="font-size: 15px;">商品参数：</view>
						<view class="line_bottom">
							<view class="" v-for="(item,index) in showList" :key="index">
								<view class="line_my text-white">
									<view style="width: 100px;">{{item}}:</view>
									<view>
										{{index==0?details.goods_name:''}}
										{{index==1?paramList.style:''}}
										{{index==2?paramList.goodNo:''}}
										{{index==3?paramList.size:''}}
										{{index==4?paramList.artNo:''}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="padding: 10px 0px 0px;">
						<text v-html="explain"></text>
					</view>
				</view>
			</tm-sheet>
			<view class="" style="text-align: center;margin: 20px 0;font-size: 15px;">
				- 猜你喜欢 -
			</view>
			<view style="width: 94%;margin:0 auto;" class="remen">
				<view v-for="(item,index) in listdata" class="round-5 contone  mt-20" :class="index%2==0?'fl':'fr'"
					@click.stop="goDetail(item)" style="background-color: #1B1B1B;">
					<image class="logo" :src="item.image" mode="widthFix"></image>
					<view class="pa-15 text-size-s">
						<view class="fr biaoqian">运动休闲</view>
						<view class="">
							<text class="text-size-lg" style="box-sizing: border-box;">{{item.text}}</text>
							<view class="text-gray mt-6">销量：{{item.xiaol}}</view>

						</view>
						<view class="mt-2 flex-between flex-center">
							<view class="touxiang mt-30">
								<text class="text-white text-size-m text-weight-b">{{item.jiage}}</text>
							</view>
							<view>
								<image @click.stop="jiarufuFun(item)" class="remenzan" src="/static/img/86.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="clear: both;"></view>

				<view class="bottom-end" v-if="isEnd || listdata.length==0">没有更多~</view>
				<view v-else style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
					<image src="/static/img/30.png" mode="widthFix"></image>
					<text class="text-size-s">下拉加载更多~</text>
				</view>
			</view>
		</div>
		<view class="bottom_btn">
			<!-- <view class="btn_col" style="background: #1c1c1c;" @click="goCollect">
				<image style="width: 18px;height: 16px;" src="/static/img/98.png" mode="widthFix"></image>
				<text style="margin-left: 10px;">收藏</text>
			</view> -->
			<view class="btn_gouwu" style="background:#303030;" @click="jiarufuFun()">
				<image src="/static/img/97.png" mode="widthFix" style="width: 15px;height: 16px;"></image>
				<text style="margin-left: 10px;">添加购物车</text>
			</view>
			<view class="btn_buy" style="background: #0178fd;" @click="goBuy">立即购买</view>
		</view>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	export default {
		data() {
			return {
				isEnd: false,
				// id
				ids: '',
				// 分类id
				classId: '',
				page: 1,
				total: 0,
				showList: ['名称', '款式', '商品编号', '尺寸', '货号'],
				xianshi: true,
				swipList: [],
				// 商品数据详情
				details: {},
				// 参数列表
				paramList: {
					name: '黑色公文包',
					style: '黑色 QD2334664 L',
					goodNo: '19862088811',
					size: 'S/M/L',
					artNo: 'QD2334664'
				},
				// 说明
				explain: "<ul style='font-size: 14px;text-indent: 0.5em;'><li style='margin-bottom: 10px;'>划线价格，商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</li><li> 未划线价格，商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</li></ul>",
				listdata: []
			};
		},
		onLoad(ops) {
			console.log(ops);
			this.ids = ops.cartId;
			this.classId = ops.classId;
		},
		created() {
			this.sys = uni.getSystemInfoSync();
			// this.randouh()
			// 获取详情数据
			this.getDetail()
			// 获取猜你喜欢数据
			this.getLike()

		},
		methods: {
			// 获取详情
			getDetail() {
				console.log(this.ids, 'ids');
				let that = this;
				myRequest({
					url: "/api/ShopGoods/getShopGoodsDetail",
					method: 'get',
					data: {
						id: that.ids,
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data, '详情');
						that.details = res.data.data[0];
						that.swipList = that.swipList.concat(res.data.data[0].atlas_thumb)
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},

			// 猜你喜欢
			getLike() {
				let that = this;
				myRequest({
					url: "/api/ShopGoods/getRecommendGoods",
					method: 'get',
					data: {
						goods_id: that.ids,
						category_id: that.classId,
						page: that.page
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data, '喜欢');
						res.data.data.list.forEach(item => {
							that.listdata.push({
								image: item.image,
								text: item.goods_name,
								xiaol: item.sale_num,
								jiage: item.sale_price,
								id: item.id,
								category_id: item.category_id
							})
						})
						that.total = res.data.data.count;
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},

			// 喜欢加载更多
			gengmore() {
				if (this.listdata.length < this.total) {
					this.isEnd = false;
					this.page++;
					this.getLike()
				} else {
					this.isEnd = true;
				}
			},
			// 喜欢内容点击去详情
			goDetail(data) {
				uni.navigateTo({
					url: "/pages/shopdetail/index?cartId=" + data.id + '&classId=' + data.category_id,
				})
			},

			xiugaiFun() {
				this.xianshi = false;
			},

			// 收藏
			goCollect() {
				console.log('收藏');
			},

			// 加入购物车
			jiarufuFun(item) {
				console.log(item);
				var that = this;
				myRequest({
					url: "/api/ShopCart/addShopCart",
					method: 'post',
					data: {
						goods_id: item ? item.id : that.details.id,
						// goods_name: item ? item.text : that.details.goods_name,
						// goods_image: item ? item.image : that.details.image,
						// goods_price: item ? item.jiage : that.details.sale_price,
						goods_num: 1
					}
				}).then(res => {
					if (res.data.code == 200) {
						that.$refs.toast.show({
							model: 'success',
							label: res.data.msg
						})
						// that.getGwc()
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},

			// 立即购买
			goBuy() {
				console.log('购买');
			}
		},
	}
</script>

<style lang="scss">
	.bottom-end {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		padding: 25px 0px;
	}

	/deep/ .tm-menubars .body {
		background-color: #1b1b1b !important;
	}

	.del_title {
		display: flex;
		justify-content: space-between;
		margin: 0 0 15px;
		font-size: 16px;
	}

	.sale_price {
		color: #0E68CF;
		margin-right: 12px;
		font-weight: bold;
		font-size: 17px;
	}

	.de_tag {
		border-radius: 20px;
		background: rgba(156, 156, 156, 0.3);
		padding: 5px 14px;
		font-size: 13px;
	}

	.original_price {
		text-decoration: line-through;
		color: #ababab;
		font-size: 13px;
	}

	/deep/ .zhuti {
		padding: 0px 5px 10px;
	}

	/deep/ .kuang {
		margin: 0 !important;
		padding: 0px !important;
	}

	/deep/ .round-4 {
		border-radius: 0px !important;
	}

	.kuang .line_bottom {
		padding: 10px;
		border-bottom: 2px solid rgba(129, 129, 129, 0.2);
	}

	.line_my {
		margin: 10px 0;
		display: flex;
		font-size: 14px;
	}

	/deep/ .qiehuan1 .text-primary {
		color: white !important;
	}

	.touxiang {
		width: 100%;
		display: block;
		margin-top: 10px;
	}

	.xiugai image {
		width: 18px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.xiugai text {
		vertical-align: middle;
	}

	.xiugai {
		position: absolute;
		right: 5px;
		top: 10px;
	}

	.you {
		border-radius: 10px;
		padding: 10px;
		width: 88%;
		margin: 0 auto;
		margin-top: 20px;
	}

	/deep/ .you .grey-darken-5 {
		background-color: #0d0d0d !important;
		padding: 0px !important;
	}

	/deep/ .you .text-red {
		color: white;
	}

	/deep/ .tan .active {
		background-color: #AAAAAA !important;
	}

	/deep/ .tan .tm-poups .grey-darken-5 {
		background-color: gray !important;
	}

	/deep/ .tan uni-input {
		text-align: right;
	}

	/deep/ .you .border-grey-darken-4-b-1 {
		border-bottom: solid 1px #313131 !important;
	}

	.yiguicla image {
		width: 95%;
		display: block;
		margin: 0 auto;
		margin-top: 5px;
	}

	.yiguicla {
		width: 30%;
		border-radius: 10px;
	}

	.sao {
		width: 88%;
		margin: 0 auto;
		margin-top: 40px;
	}

	/deep/ .mx-32 {
		margin: 0px !important;
		margin-top: 15px !important;
	}

	.bottom_btn {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 50px;
		display: flex;
		position: fixed;
		font-size: 15px;
		justify-content: space-between;
		box-sizing: border-box;

		.btn_col,
		.btn_gouwu,
		.btn_buy {
			height: 100%;
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
	}

	.logo {
		width: 100%;
	}

	.dingwei {
		width: 21%;
		margin-top: 3%;
	}

	.contone {
		width: 48%;
	}

	.remenzan {
		width: 18px !important;
		margin-top: 10px;
	}

	.more {
		text-align: center;
	}

	.more image {
		margin-right: 10px;
		vertical-align: middle;
		width: 30px;
	}

	.biaoqian {
		background: #303440;
		padding: 4px 15px;
		border-radius: 30px;
	}
</style>