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>黑色手提包</view>
					<view class="de_tag">运动休闲</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view>
						<text class="sale_price">￥1299.00</text>
						<text class="original_price">原价：2088</text>
					</view>
					<view style="font-size: 14px;color:#ababab;">销量：42</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?paramList.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="goDetail(item.id)" 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">{{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="jiarufuFun(item)" class="remenzan" src="/static/img/86.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="clear: both;"></view>
				<view 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="goBar">
				<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 {
				showList: ['名称', '款式', '商品编号', '尺寸', '货号'],
				xianshi: true,
				swipList: [{
						src: '../../static/img/99.png'
					}, {
						src: '../../static/img/99.png'
					},
					{
						src: '../../static/img/99.png'
					}
				],
				// 参数列表
				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() {},
		created() {
			this.sys = uni.getSystemInfoSync();
			this.randouh()
		},
		methods: {
			jiarufuFun(){
				
			},
			goDetail(){
				
			},
			randouh() {
				let list2 = [],
					that = this;
				for (let i = 0; i < 8; i++) {
					list2.push({
						image: '../../static/img/90.png',
						text: '帽子',
						jiage: '¥ 359.00',
						xiaol: '128'
					})
				}
				this.listdata = this.listdata.concat(list2)
				console.log(this.listdata)
			},
			xiugaiFun() {
				this.xianshi = false;
			},
			gengmore() {
				this.randouh()
			},
			goCollect() {
				console.log('收藏');
			},
			goBar() {
				console.log('购物车');
			},
			goBuy() {
				console.log('购买');
			}

		},
	}
</script>

<style lang="scss">
	/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: 33.3%;
			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>