hwnc/pagesD/pages/mall/Bargain_cart.vue

<template>
	<view v-if="cacheData" :class="[AppTheme]">
		<swiper class="carousel" indicator-active-color=" #007aff">
			<swiper-item v-for="(item, index) in appalbum" :key="index" class="carousel-item" @click="">
				<image class="s-img" :src="item" />
			</swiper-item>
		</swiper>
		<view class="carousel_tag bg-linear-gradient">
			<view>
				<view>
					底价:
					<span class="text-neutral">¥{{cacheData.price}}</span>
				</view>
				<view>
					原价:
					<span>¥{{cacheData.oprice}}</span>
				</view>
			</view>
			<span>{{data.kjcount}}人参与</span>
		</view>
		<view class="title-text">
			<p>{{cacheData.name}}</p>
		</view>
		<view class="title-text-cnent">
			<span>
				库存:
				<span style="margin-left: 10rpx;">{{cacheData.num}}件</span>
			</span>
			<span>
				单位:
				<span style="margin-left: 10rpx;">{{cacheData.unit}}</span>
			</span>
			<span>
				砍刀数:
				<span style="margin-left: 10rpx;">{{cacheData.blimit== 0 ?'无限制':cacheData.blimit}}</span>
			</span>
		</view>
		<view class="title-text-cnent" style="color: #999999;" v-if="cacheData.score<=0">本次活动不赠送积分</view>
		<view class="title-text-cnent" style="color: #999999;" v-else>本次活动赠送 {{cacheData.score}} 积分</view>
		<view class="circuit">
			<view class="title">
				<i class="bg-primary"></i>
				砍价流程
			</view>
			<view class="title-list">
				<view class="title-list-inner " v-for="(item, index) in titleList" :key="index">
					<view class="num" :class="{ 'bg-primary': index + 1 == num }">{{ index + 1 }}</view>
					<p class="title-list-inner-boder" :class="{ 'border-primary': index + 1 == num }">{{ item }}</p>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_img">
				<p class="subtitle">商品详情</p>
				<view class="content-box">
					<u-parse :content="content" :lazy-load="true" :autoscroll="false" :show-with-animation="true">
					</u-parse>
				</view>
			</view>

			<view class="bottom_but">
				<view @click="go">
					<u-icon :color="primary" labelSize="12" color="#909399" label="首页" labelPos="bottom"
						labelColor="#909399" size="25" name="home-fill"></u-icon>
				</view>
				<view @click="Bargain" v-if="data.over==0" class="start bg-linear-gradient">
					<span class="haggle">立即砍价</span>
				</view>
				<view v-if="data.over==1" class="end">
					<span class="haggle">已经结束</span>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<nologin ref="nologin" v-on:loginback="loginback"></nologin>
		<!-- #endif -->
		<!-- 站位 -->
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	import api from '@/api/mall/index.js'
	import nologin from '@/components/nologin/nologin.vue';
	export default {
		components: {
			nologin
		},
		data() {
			return {
				primary: this.$theme.primary,
				num: 1,
				titleList: ['选择心仪商品', '邀请好友砍价', '砍刀最低支付'],
				carouselList: [{
					src: 'http://www.zzfcd.com/images/Upload/201507101533569.jpg'
				}, {
					src: 'http://www.zzfcd.com/images/Upload/201507101533569.jpg'
				}],
				cacheData: '',
				appalbum: '',
				apppic: '',
				data: '',
				settingFile: getApp().globalData.siteinfo,
				vipid: '',
				content: ''
			};
		},
		onLoad(options) {
			let data = {
				id: options.id,
			}
			this.$bindid.getbindid(options, this.$store);
			api.bargoods(data).then(ret => {
				console.log(ret)
				this.cacheData = ret.data.cache
				this.appalbum = ret.data.appalbum
				this.apppic = ret.data.apppic
				this.data = ret.data
				/* 处理富文本*/
				this.content = this.cacheData.content.replace(/\<img src="/gi,
					`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`);
			})
		},
		methods: {
			loginback() {
				//登录回调
			},
			Bargain2() {
				// //订阅模板消息
				let that = this
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['priceCutting']], tmplIdsone, function() {
						setTimeout(() => {
							uni.navigateTo({
								url: './Bargain_order?id=' + that
									.cacheData.id
							})
						}, 0)
					});
				}else{
					setTimeout(() => {
						uni.navigateTo({
							url: './Bargain_order?id=' + that
								.cacheData.id
						})
					}, 0)
				}
			},
			Bargain() {
				let that = this;
				// #ifdef MP-WEIXIN
				if (that.$store.state.islogin()) {
					that.Bargain2()
				} else {
					that.$refs.nologin.open();
				}
				// #endif
				// #ifdef H5 || APP-PLUS
				that.Bargain2()
				// #endif
			},
			go() {
				uni.switchTab({
					url: '/pages/mall/mall'
				})
			}
		}
	};
</script>

<style lang="scss">
	// * { background-color: rgba(255,0,0,.2); }
	// * * { background-color: rgba(0,255,0,.2); }
	// * * * { background-color: rgba(0,0,255,.2); }
	// * * * * { background-color: rgba(255,0,255,.2); }
	// * * * * * { background-color: rgba(0,255,255,.2); }
	// * * * * * * { background-color: rgba(255,25,0,.2); }
	page {
		background: #f5f5f5;
	}

	.carousel {
		height: 500rpx;
	}

	.carousel_tag {
		height: 88rpx;
		width: 100%;
		padding: 20rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			display: flex;
			align-items: center;

			view:nth-child(1) {
				span {
					font-size: 36rpx;
				}
			}

			view:nth-child(2) {
				margin-left: 50rpx;

				span {
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}
		}

		>span {
			width: 120rpx;
			height: 48rpx;
			border-radius: 50rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			margin-right: 30rpx;
		}
	}

	.carousel-item {
		width: 100%;

		.s-img {
			width: 100%;
			height: 100%;
		}

		.swiper-dots {
			left: 45rpx;
			bottom: 40rpx;
		}
	}

	.title-text {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		min-height: 90rpx;
		line-height: 45rpx;
		width: 100%;
		background-color: #fff;

		p:nth-child(1) {
			font-size: 30rpx;
		}

		p:nth-child(2) {
			font-size: 32rpx;
			color: red;

			span {
				text-decoration: line-through;
				margin: 0 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.title-text-cnent {
		padding: 30rpx;
		box-sizing: border-box;
		margin: 10rpx;
		height: 90rpx;
		// width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;

		.people {
			margin-left: 15rpx;
			color: #ff9800;
		}
	}

	.circuit {
		padding: 30rpx;
		box-sizing: border-box;
		margin: 10rpx;
		height: 246rpx;
		// width: 100%;
		background-color: #fff;
		font-size: 24rpx;

		.title {
			height: 62rpx;
			width: 100%;
			border-bottom: 0.5rpx solid #dedede;

			i {
				height: 20rpx;
				width: 8rpx;
				margin: 0 10rpx;
				border-radius: 5rpx;
				display: inline-block;
			}
		}

		.title-list {
			display: inline-block;
			height: 62rpx * 2;
			width: 100%;
			padding: 7.5rpx * 2;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-list-inner {
				width: 105rpx * 2;
				height: 90rpx;
				position: relative;

				.num {
					width: 30rpx;
					height: 30rpx;
					// background-color: #999999;
					// color: #ffffff;
					border-radius: 50%;
					text-align: center;
					line-height: 30rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					z-index: 1;
				}

				.title-list-inner-boder {
					height: 64rpx;
					// border: 1px dashed #999999;
					border-width: 1px;
					border-style: dashed;
					color: #999999;
					position: absolute;
					top: 15rpx;
					left: 0;
					right: 0;
					margin: 0 1px;
					line-height: 64rpx;
					text-align: center;
				}
			}

			.active {}
		}
	}

	.detriment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.bottom_img {
		background-color: #fff;
		padding-bottom: 20rpx;

		.content-box {
			width: 100%;
			line-height: 40rpx;
			padding: 0 20rpx 50rpx 20rpx;
			line-height: 41rpx;

			image {
				width: 100%;
			}
		}
	}

	.subtitle {
		position: relative;
		font-size: 0.24rem;
		color: #999999;
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 14px;

		&:before {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			left: 25%;
		}

		&:after {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			right: 25%;
		}
	}

	.bottom_but {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		z-index: 999;

		.home {
			margin-top: -20rpx;
		}

		.icon {
			margin-top: -18rpx;
		}

		.haggle {
			font-size: 32rpx;
		}

		view {
			font-size: 24rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
			// padding: 10rpx 0;
		}

		view:nth-child(1) {
			width: 200rpx;
		}

		.start {
			flex: 1;
			color: #ffffff;
		}

		.end {
			flex: 1;
			color: #ffffff;
			background-color: #ccc !important;
		}
	}
</style>