hwnc/pagesD/pages/mall/Bargain_order.vue

<template>
	<view :class="[AppTheme]" class="box" v-if="shop_info">
		<u-popup :show="show" :custom-style="{background:'none'}" mode="center">
			<view class="bg">
				<view class="gx">
					恭喜您
					<view class="text">
						{{msg}}
					</view>
				</view>
				<view class="close" @click="close">
					我知道了
				</view>
			</view>
		</u-popup>
		<view class="info">
			<view class="left">
				<view class="icon" v-if="shop_info&&shop_info.vipinfo">
					<image :src="shop_info.vipinfo.headimgurl" mode=""></image>
				</view>
				<view class="user">
					<view class="name" v-if="shop_info&&shop_info.vipinfo">
						{{shop_info.vipinfo.nickname}}
					</view>
					<view class="time">
						开砍时间 :{{shop_info.kjtime}}
					</view>
				</view>
			</view>
			<view class="right text-primary" @click="go">
				首页
			</view>
		</view>
		<view class="content">
			<view class="cont-t" @click="go_shopinfo">
				<view class="cont-t-l">
					<image :src="shop_info.apppic" mode=""></image>
				</view>
				<view class="cont-t-r" v-if="shop_info.cache">
					<view class="shop-name">
						{{shop_info.cache.name}}
					</view>
					<view class="shop-num">
						库存: {{shop_info.cache.num}} | 已售{{shop_info.cache.sells}}
					</view>
					<view class="shop-time">
						剩余时间: <u-count-down color="#999" separator-color="#999" separator="zh" font-size="26"
							:timestamp="shop_info.data.time > timestamp ? shop_info.data.time - timestamp : 0">
						</u-count-down>
					</view>
				</view>
			</view>
			<view class="cont-c" v-if="shop_info.cache">
				<view class="cont-c-l border-primary">
					<view class="act text-primary">当前成交价</view>
					<view class="price text-neutral">￥{{shop_info.data.price || shop_info.cache.oprice}}</view>
					<view class="old-price ccc">原价 <text>￥{{shop_info.cache.oprice}}</text></view>
				</view>
				<view class="cont-c-r border-primary">
					<view class="act text-primary">已砍金额</view>
					<view class="price text-neutral">￥{{shop_info.data.pmoney}}</view>
					<view class="cishu ccc">砍价次数 {{shop_info.data.aboutnum==-1?'0':shop_info.data.aboutnum}} 次</view>
				</view>
			</view>
			<view class="cont-b">
				<view class="purchase bg-linear-gradient" v-if="shop_info.people==1 && shop_info.isbuyed==0"
					@click="buy">
					立刻购买
				</view>
				<view class="purchase bg-linear-gradient" v-if="shop_info.people==0">
					我也要砍
				</view>
				<view class="Bargaining" v-if="shop_info.selfkan==0 && shop_info.cankan==1 " @click="help">
					<image :src="settingFile.root_img+'/static/app/imgs/mine/kan.png'" mode=""></image>
					砍一刀
				</view>
				<view class="Bargaining" v-else-if="shop_info.cankan==1 && shop_info.over !=1" @click="opensharebox">
					<image :src="settingFile.root_img+'/static/app/imgs/mine/kan.png'" mode=""></image>
					邀请好友砍
				</view>
				<view class="Bargaining" v-else-if="shop_info.cankan==0 || shop_info.isbuyed==1"
					style="background: #ccc;">
					砍价已完成
				</view>
				<view class="Bargaining" v-else="shop_info.over==1" style="background: #ccc;">
					您的砍价已结束
				</view>
			</view>
		</view>
		<view class="footer"><strong></strong>
			<view class="tab">
				<u-tabs :activeStyle='primary' :lineColor="primary" lineWidth="40" :list="list" :scrollable="true"
					:current="current" @click="change" @change="change"></u-tabs>
			</view>
			<!-- 亲友团 -->
			<view class="qinyou" v-if="current==0">
				<view class="item-q" v-if="shop_info&&shop_info.vips.length>0" v-for="(item,index) in shop_info.vips"
					:key="index">
					<view class="item-img">
						<image :src="item.headimgurl" mode=""></image>
					</view>
					<view class="item-name">
						{{item.nickname}}
					</view>
					<view class="item-price text-neutral">
						- {{item.money}}元
					</view>
					<view class="item-time">
						{{$u.timeFormat(item.time,'yyyy.mm.dd:hh:MM')}}
					</view>
				</view>
				<u-empty margin-top="60" v-if="shop_info&&shop_info.vips&&shop_info.vips.length==0" text="暂无更多数据"
					mode="list"></u-empty>
			</view>

			<!-- 商品详情 -->
			<view class="detail" v-if="current==1">
				<u-parse :content="content" :lazy-load="true" :autoscroll="false" :show-with-animation="true"></u-parse>
				<u-empty margin-top="60" v-if="!content" text="暂无更多数据" mode="list"></u-empty>
			</view>

			<!-- 活动规则 -->
			<view class="detail" v-if="current==2">
				<u-parse :content="summary" :lazy-load="true" :autoscroll="false" :show-with-animation="true"></u-parse>
				<u-empty margin-top="60" v-if="!summary" text="暂无更多数据" mode="list"></u-empty>
			</view>

			<!-- 参与榜 -->
			<view class="qinyou" v-if="current==3">
				<view class="item-q" v-if="shop_info&&shop_info.vips.length>0" v-for="(item,index) in shop_info.vips"
					:key="index">
					<view class="item-img">
						<image :src="item.headimgurl" mode=""></image>
					</view>
					<view class="item-name">
						{{item.nickname}}
					</view>
					<view class="item-price text-neutral">
						- {{item.money}}元
					</view>
					<view class="item-time">
						{{$u.timeFormat(item.etime,'yyyy.mm.dd:hh:MM')}}
					</view>
				</view>
				<u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="shop_info.vips.length==0"
					text="暂无更多数据" mode="list"></u-empty>
			</view>
			<!-- 分享 -->
			<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
		</view>
	</view>
</template>
<!-- 商城 -->
<script>
	import api from '@/api/mall/index.js'
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				list: [{
						name: '亲友团'
					},
					{
						name: '商品详情'
					},
					{
						name: '活动规则'
					},
					// {name: '参与榜'},
				],
				shop_info: {
					vips: []
				},
				current: 0,
				vipid: '',
				settingFile: getApp().globalData.siteinfo,
				id: '',
				show: false,
				msg: '',
				timestamp: '',
				content: '',
				summary: '',
				svipid: '',
				cache: null,
				sid: '',
				sharedata: null,
			};
		},
		onLoad(options) {
			//如果没有vipid的话就是正常砍价
			console.log(options.vipid)
			this.$bindid.getbindid(options, this.$store);
			if (options.vipid == undefined) {
				this.timestamp = Date.parse(new Date()) / 1000;
				this.id = options.id
				this.vipid = uni.getStorageSync('userInfo').id
				this.getdata()
			} else {
				// 否则就是帮助好友砍价
				this.timestamp = Date.parse(new Date()) / 1000;
				this.vipid = options.vipid
				this.svipid = options.vipid
				this.sid = options.id
				this.getdata(options)
			}
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: `./Bargain_cart?id=${this.shop_info.cache.id}`
				})
			},
			change(e) {
				this.current = e.index;
			},
			getdata(options) {
				let data = {
					...options
				}
				console.log(data + '重新赋值')
				console.log(options + '帮你砍一刀')
				//有则是好友帮忙砍刀
				if (options) {
					api.bargain(options).then(ret => {
						if (ret.status == 200) {
							this.shop_info = ret.data
							this.cache = ret.data.cache
							this.content = this.shop_info.cache.content.replace(/\<img src="/gi,
								`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`);
							this.summary = this.shop_info.cache.summary.replace(/\<img src="/gi,
								`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`);
						}
					})
				} else {
					// 否则就是从详情页进行砍刀
					let data = {
						id: this.id,
						vipid: this.vipid
					}
					api.bargain(data).then(ret => {
						if (ret.status == 200) {
							this.shop_info = ret.data
							this.content = this.shop_info.cache.content.replace(/\<img src="/gi,
								`<img style='width:100%' src="${this.settingFile.root_rich_img}`);
							this.summary = this.shop_info.cache.summary.replace(/\<img src="/gi,
								`<img style='width:100%' src="${this.settingFile.root_rich_img}`);
							this.sharedata = {
								imageUrl: this.shop_info.apppic,
								title: `我正参加${this.shop_info.cache.price}元抢购${this.shop_info.cache.sname}活动，原价${this.shop_info.cache.oprice}，还差一刀到底价`,
								path: `/pagesD/pages/mall/Bargain_order?pid=` + this.$getuid() +
									`&id=${this.shop_info.cache.id}&vipid=${this.shop_info.helpvipid}`
							};
						}
					})
				}
			},
			//立即购买
			buy() {
				let obj = {
					goodsnum: this.shop_info.cache.num,
					goodstype: this.shop_info.cache.type,
					num: 1,
					goodsid: this.shop_info.cache.id,
					vipid: this.vipid,
					sid: 0,
					bid: this.shop_info.bid
				}
				if (parseInt(this.shop_info.cache.num) - 1 < 0) {
					this.$api.msg('该产品库存不足！请调整购买量或选择其他属性！')
					return;
				}
				api.fastbuys(obj).then(res => {

					if (res.status == 200) {
						uni.showToast({
							icon: 'loading',
							title: '生成订单',
							duration: 2000
						});
						setTimeout(() => {
							this.$u.route('/pagesD/pages/order/createOrder', {
								goodstype: this.shop_info.cache.type,
								bid: this.shop_info.bid,
								sid: 0,
								lasturl: this.shop_info.lasturl,
							});
						}, 2000);
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			//砍一刀
			help() {
				let that = this
				let data = {
					helpvipid: this.shop_info.helpvipid, //用户id
					goodsid: this.shop_info.cache.id //商品id
				}
				api.help(data).then(ret => {
					console.log(ret)
					if (ret.status == 200) {
						this.msg = ret.msg
						this.show = true
						let options = {
							id: this.sid,
							vipid: this.svipid
						}

						if (this.svipid != '') {
							this.getdata(options)
						} else {
							this.getdata()
						}
					} else {
						this.$u.toast(ret.msg)
					}
				})
			},
			//邀请好友砍刀
			opensharebox() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			close() {
				this.show = !this.show
			},
			go_shopinfo() {
				uni.navigateTo({
					url: './Bargain_cart?id=' + this.shop_info.cache.id
				})
			},
			go() {
				uni.switchTab({
					url: '/pages/mall/mall'
				})
			}
		},
	};
</script>

<style lang="scss">
	$color-fff: #fff;

	@mixin lineH($index) {
		height: $index;
		line-height: $index;
	}

	page {
		background: #f1f1f1;
	}

	.box {
		width: 100%;

		.u-mode-center-box {}

		.share {
			width: 100%;
			height: 100vh;

			image {
				width: 67vw;
				margin-top: 0upx;
			}
		}

		.bg {
			width: 400upx;
			background: none !important;

			.gx {
				width: 400upx;
				height: 350upx;
				background: url(../../../static/imgs/mine/bargain_bg.png) no-repeat;
				background-size: 100% 100%;
				padding-top: 80upx;
				box-sizing: border-box;
				text-align: center;
				font-size: 38upx;
				color: #ff0808;
			}

			.text {
				margin-top: 40upx;
				font-size: 24upx;
				color: #F29100;
			}

			.close {
				width: 70%;
				height: 70upx;
				background: $tab-color;
				margin: 60upx auto;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30upx;
			}
		}

		.info {
			box-sizing: border-box;
			align-items: center;
			display: flex;
			background: white;
			padding: 15upx 0 15upx 40upx;
			margin-bottom: 20upx;

			.left {
				display: flex;
				align-items: center;

				.icon {
					width: 85upx;
					height: 85upx;
					margin-right: 20upx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user {
					view {
						margin: 15upx 0;
					}

					.name {
						font-size: 30upx;
						font-weight: bold;
					}

					.time {
						color: #999999;
						font-size: 26upx;
					}
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 40upx;
				font-size: 30upx;
				box-sizing: border-box;
			}
		}

		.content {
			width: 100%;
			min-height: 500upx;
			background: #fff;
			margin-bottom: 20upx;
			padding-bottom: 40upx;

			.cont-t {
				width: 86%;
				margin: 0 auto;
				padding: 40upx 0 35upx 0;
				border-bottom: 1px solid #f1f1f1;
				display: flex;
				align-items: center;

				.cont-t-l {
					width: 160upx;
					height: 165upx;
					margin-right: 30upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}

				.cont-t-r {
					.shop-name {
						width: 450rpx;
						margin-bottom: 20upx;
						line-height: 40upx;
						font-weight: bold;
					}

					.shop-num {
						margin-bottom: 10upx;
						font-size: 24upx;
						color: #999999;
					}

					.shop-time {
						font-size: 24upx;
						color: #999999;
					}
				}
			}

			.cont-c {
				display: flex;
				justify-content: space-between;
				padding: 40upx;

				.act {
					width: 60%;
					padding: 5upx;
					position: absolute;
					top: -20upx;
					left: 50%;
					margin-left: -30%;
					background: #fff;
					font-size: 30upx;
				}

				.price {
					margin-top: 30upx;
				}

				.cont-c-l {
					width: 300upx;
					height: 125upx;
					border-width: 1px;
					border-style: solid;
					text-align: center;
					position: relative;

					.old-price {
						margin-top: 10upx;
						font-size: 22upx;
						margin-top: 15upx;
					}
				}

				.cont-c-r {
					width: 300upx;
					height: 125upx;
					position: relative;
					border-width: 1px;
					border-style: solid;
					text-align: center;

					.cishu {
						font-size: 22upx;
						margin-top: 15upx;
					}
				}
			}

			.cont-b {
				padding: 0 17px;
				display: flex;
				justify-content: flex-end;

				.purchase {
					width: 310upx;
					height: 75upx;
					border-radius: 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					color: #fff;
					margin-right: 65upx;
				}

				.Bargaining {
					width: 310upx;
					height: 75upx;
					border-radius: 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					color: #fff;
					background: red;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 14upx;
					}
				}
			}
		}

		.footer {
			width: 100%;
			min-height: 50vh;
			background: #ffff;

			.tab {
				margin-bottom: 20upx;
			}

			.no {
				width: 100%;
				text-align: center;
				padding-top: 100upx;
			}

			.detail {
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;
				padding: 0 20rpx 50rpx 20rpx;
				box-sizing: border-box;
			}

			.qinyou {
				width: 100%;

				.item-q {
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					font-size: 26upx;
					border-bottom: 1px solid #f1f1f1;
					padding: 10upx 0;

					.item-img {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.item-name {
						width: 105rpx;
						margin-left: -30upx;
						margin-right: 50upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.item-price {
						min-width: 133rpx;
					}

					.item-time {}
				}
			}
		}
	}
</style>