installmentinfo.vue

<template>
	<view class="info_content">
		<view class="topbar_icon_box" :class="bg_show && 'bg_show'">
			<text class="info_icon back_icon" @click="backup()"></text>
			<view>
				<text class="info_icon home_icon" @click="jumpPhpPage()"></text>
				<text class="info_icon collection_icon" v-if="data.EquipmentInfo.collect_goods ===  1" @click="collectGoods(data.EquipmentInfo.goods_id, 0)"></text>
				<text class="info_icon uncollection_icon" v-if="data.EquipmentInfo.collect_goods ===  0" @click="collectGoods(data.EquipmentInfo.goods_id, 1)"></text>
			</view>
		</view>
		<swiper class="img_swiper">
			<swiper-item v-for="(val, index) in data.EquipmentImgs" :key="index">
				<image :src="val.img_url" class="img_item"></image>
			</swiper-item>
		</swiper>
		<view class="goods_info">
			<view class="goods_info_flex">
				<view>
					<text class="symbol" v-if="isLogin">￥</text>
					<text class="goods_price">{{isLogin ? e_info.equipment_price : '登录显示价格'}}</text>
					<text class="goods_label">分期购 </text>
				</view>
			</view>
			<view class="goods_name">{{data.EquipmentInfo.equipment_name}}</view>
			<view class="goods_subname">{{data.EquipmentInfo.goods_subname}}</view>
		</view>
		<view class="freight common_item_bar">
			<view>
				<text class="info_commom_title">快递</text>
				<text class="info_common_con">0.00</text>
				<text class="info_common_label">包邮</text>
			</view>
			<!-- <view class="info_operation">
				<text>选择</text>
				<text class="right_arrow_icon"></text>
			</view> -->
		</view>
		<!-- <view class="common_item_bar">
			<view>
				<text class="info_commom_title">活动</text>
				<text class="info_common_label info_common_label2">分期</text>
				<text class="info_common_con">金融分期限时免息</text>
			</view>
			<view class="info_operation">
				<text>查看</text>
				<text class="right_arrow_icon"></text>
			</view>
		</view> -->
		<view class="common_item_bar">
			<view>
				<text class="info_commom_title">分期</text>
				<text class="info_common_con">已选：x{{Number(e_info.periods_num)+1}}期</text>
			</view>
			<view class="info_operation" @click="open()">
				<text>选择</text>
				<text class="right_arrow_icon"></text>
			</view>
		</view>
		<view v-if="isLogin">
			<view class="title_label">分期信息</view>
			<view class="installment_table_box">
				<view class="installment_table">
					<view class="table_title">
						<view>分期数</view>
						<view>定金 (元)</view>
						<view>第1期还款</view>
						<view>剩余每期还款</view>
					</view>
					<view class="table_item" v-for="(val, index) in data.Equipmentproperty" :key="index">
						<view>{{Number(val.periods_num)+1}}期</view>
						<view>{{val.advance_payment}}</view>
						<view>{{val.first_payment}}</view>
						<view>{{val.remaining_payment}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="entry_shop">
			<view>
				<image class="shop_logo" :src="data.StoreInfo.store_logo || $defaultPortrait"></image>
				<view class="dlb dlb_box" @click="jumpPhpPage(`app=store&id=${data.StoreInfo.store_id}`)">
					<view class="shop_name">{{data.StoreInfo.store_name}}<i class="right_arrow_icon"></i></view>
					<view class="focus_num">{{data.StoreInfo.collect_count}}人关注</view>
				</view>
			</view>
			<text class="focus_shop" v-if="data.EquipmentInfo.collect_store === 0" @click="collectShop(data.StoreInfo.store_id, 1)">关注店铺</text>
			<text class="focus_shop" v-if="data.EquipmentInfo.collect_store === 1" @click="collectShop(data.StoreInfo.store_id, 0)">已关注</text>
		</view>
		<view class="shop_goods">
			<view class="shop_goods_item" v-for="(val, index) in data.EquipmentList" :key="index" @click="jumpDetail(val.equipment_id)">
				<image :src="val.img_url"></image>
				<view class="shop_goods_name">{{val.equipment_name}}</view>
				<view class="shop_goods_price"><text v-if="isLogin">¥</text>{{isLogin ? val.equipment_price : '登录显示价格'}}</view>
			</view>
		</view>
		<view class="equipment_detail">
			<view class="title_label">产品信息</view>
			<view v-if="equipment_detail" v-html="equipment_detail"></view>
			<view v-if="!equipment_detail" class="no_data">暂无产品信息</view>
		</view>
		<view class="goods_info_bottom_bar">
			<view class="bottom_bar_tool">
				<view class="tool contact_tool"></view>
				<view class="tool_title">联系客服</view>
			</view>
			<view class="bottom_bar_tool" @click="jumpPhpPage(`app=store&id=${data.StoreInfo.store_id}`)">
				<view class="tool shop_tool"></view>
				<view class="tool_title">店铺</view>
			</view>
			<view class="bottom_bar_tool">
				<view class="tool cart_tool" @click="jumpPhpPage('app=cart')"></view>
				<view class="tool_title">购物车</view>
			</view>
			<!-- <view class="bottom_btn join_cart">加入购物车</view> -->
			<view class="bottom_btn join_buy" @click="open()">立即分期</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="poupp_content">
				<text class="eosfont close" @click="close()">&#xe615;</text>
				<view  :style="{padding: '0 24rpx'}">
					<view class="poupp_flex">
						<image class="poupp_img" :src="data.EquipmentInfo.default_image || $noGoodsImg"></image>
						<view class="dlb">
							<view class="poupp_goods_name">{{data.StoreInfo.equipment_name}}</view>
							<view class="poupp_goods_price">
								<text class="symbol">¥</text>{{e_info.equipment_price}}
								<text class="poupp_label">分期购</text>
							</view>
						</view>
					</view>
					<view class="poupp_nper">
						<view><text class="dlb">期数</text><text class="dlb limit_free">限时免息</text></view>
						<view class="poupp_nper_box">
							<text v-for="(val,index) in data.Equipmentproperty" :key="index" :class="{act: periodTab === index}" @click="choosePeriod(index)">{{Number(val.periods_num)+1}}期</text>
						</view>
					</view>
					<view class="poupp_deposit">
						<text>定金</text>
						<text>¥ {{e_info.advance_payment}}</text>
					</view>
					<view class="poupp_nper_detail">
						<view>
							<text>第1期 支付</text>
							<text>¥ {{e_info.first_payment}}</text>
						</view>
						<view>
							<text>剩余{{e_info.periods_num}}期 每期支付</text>
							<text>¥ {{e_info.remaining_payment}}</text>
						</view>
					</view>
				</view>
				<view class="poupp_tips">金融分期需要上传金融资质, 包含法人信息/企业执照/银行流水等…</view>
				<view class="poupp_btn" @click="buy_now()">立即分期</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import { php, go } from '../../common/host.js';
	export default {
		data() {
			return {
				visible: false,
				bg_show: false,
				data: {
					EquipmentImgs: [],
					EquipmentInfo: {},
					EquipmentList: [],
					Equipmentproperty: [],
					StoreInfo: {}
				},
				e_info: {
					equipment_price: 0.00,
					advance_payment: 0.00,
					remaining_payment: 0.00,
					first_payment: 0.00
				},
				equipment_detail: '',
				periodTab: 0,
				isLogin: 0,
				contract_no: '',
				equipment_id: '',
				is_auth: '0',
				type: 2
			}
		},
		onPageScroll(e){
			const {scrollTop} = e;
			if(scrollTop > 300){
				this.bg_show = true;
			}else{
				this.bg_show = false;
			}
		},
		onLoad(option) {
			this.equipment_id = option.id;
			this.getData(option.id);
			// #ifdef H5
			//默认请求微信分享
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({titie: this.$getNavigationBarTitle()});
			}
			// #endif
		},
		methods: {
			open()  {
				if(!this.isLogin) {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.$jump(`${php}app=member&act=login`)
					}, 2000)
					return
				}
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			getData(id) {
				uni.request({
					url: `/uni/api/equipment_index/GetEquipmentDetail/${id}`,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						this.data = {
							...this.data,
							...res.data.data
						}
						res.data.data.Equipmentproperty.forEach((item, index) => {
							if(item.is_def ==  1) {
								this.e_info = {
									...this.e_info,
									...item
								}
								this.periodTab = index
							}
						});
						this.equipment_detail = res.data.data.EquipmentInfo.equipment_details ? res.data.data.EquipmentInfo.equipment_details.replace(/\<img/g, `<image style="max-width: 100%;width: auto !important;height: auto !important"`) : '';
						this.isLogin = res.data.login_flg;
						this.contract_no = res.data.data.contract_no;
						this.is_auth = res.data.data.is_auth;
						this.type = res.data.data.EquipmentInfo.type;
					}
				});
			},
			choosePeriod(key) {
				this.e_info = this.data.Equipmentproperty[key];
				this.periodTab = key;
			},
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			},
			backup() {
				this.$backup();
			},
			buy_now() {
				const data = {
					contract_no: this.contract_no,
					equipment_id: this.equipment_id,
					property_id: this.e_info.property_id
				}
				if(this.is_auth === '1') {
					uni.setStorage({
						key: 'installment',
						data: data,
						success: () => {
							uni.navigateTo({
								url: '/pages/apply/choosetype'
							});
						}
					});
				} else {
					if(this.type === '1') {
						uni.showToast({
							title: '提交中',
							icon: 'none'
						})
						uni.request({
							url: '/uni/api/certification/AddRealnameAuth',
							data: {
								enterprise_name: '深圳市派特堡扬子宠物医院有限公司',
								social_credit_code: '91440300MA5FNCJRX2',
								legal_name: '汪秀举',
								legal_card: '341103198209194417',
								card_positive: '11',
								card_reverse: '11',
								enterprise_type: 1,
								organ_type: 11
							},
							method: 'POST',
							success: (res) => {
								if(res.data.code === 0) {
									uni.setStorage({
										key: 'installment',
										data: data,
										success: () => {
											uni.navigateTo({
												url: '/pages/signcontract/signcontract'
											});
										}
									});
								} else {
									uni.hideToast();
									uni.showToast({
										icon: 'none',
										title: res.data.message
									})
								}
							}
						})
					} else {
						uni.setStorage({
							key: 'installment',
							data: data,
							success: () => {
								uni.navigateTo({
									url: '/pages/certification/certification'
								});
							}
						});
					}
				}
			},
			collectGoods(id, type) {
				uni.request({
					url: `/uni/api/collect/UpdateCollectGoods`,
					method: 'POST',
					dataType: 'json',
					data: {
						flag: type,
						item_id: id
					},
					success: (res) => {
						if(res.data.code === 0) {
							this.data.EquipmentInfo.collect_goods = type;
						}
					}
				})
			},
			collectShop(id, type) {
				uni.request({
					url: `/uni/api/collect/UpdateCollectStore`,
					method: 'POST',
					dataType: 'json',
					data: {
						flag: type,
						item_id: id
					},
					success: (res) => {
						if(res.data.code === 0) {
							this.data.EquipmentInfo.collect_store = type;
						}
					}
				})
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: `/pages/installment/installmentinfo?id=${id}`,
				});
			},
		},
		components: {
			uniPopup,
		}
	}
</script>

<style lang="less" scoped>
	.info_content {
		background: #F5F5F5;
		padding-bottom: 100rpx;
	}
	.topbar_icon_box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 14rpx 20rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(255, 255, 255, 0);
		z-index: 99;
		// border-radius: 100%;
		.info_icon {
			display: inline-block;
			vertical-align: middle;
			width: 60rpx;
			height: 60rpx;
		}
		.back_icon {
			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAABYUlEQVRIx6XXO46DMBAGYN9zBAWic7aOKFxQ0VJQcQgarkBLARdYbVZJGkiFkKiy5LEPssaD/f+l4ZMQ4PGMuGoz1kUWydD3QxllRT3q7xKatb5UHi3iqbLfhNvkRT590rK4UbQa1Rhxl5IxabeOq4CYBNUKnnLakHzS4SGmTYmH//iyp43ZX17xsNnOeljiKSaLxNMC52SV/C+uyDLVL+4CWxx0Pzgl66TfuCGHNE+sXLB64Ja5bXd41y23d5ww9nT91K0nN9x7nD2/aatDP+PSzRKVM1aOdn5lYvTM9rRmyRtFzdjd+uVaFM6WCpE5W8pE5GwpEtLZkhShs6VQ+PoLB96Sj2HosaEXBn0q6CeBfs/adVPdNga3Jc+mLQkVA6wMcQXwaCqAXOmVR0PpZYu+/DAUfei4wQ466IjFDneorcAaGqyVgpo4rH3EGlesZcaadXBMwAYUcDQChzKLcfALHjIc96F4z0sAAAAASUVORK5CYII=') no-repeat;
			background-size: 100% 100%;
			border-radius: 100%;
		}
		.home_icon {
			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAACjUlEQVRIx62Xz0sbQRTH5/98bKxpCpYtlWIgCXWFeAluK1EasAQCUqiXYgSDhx68aLAiRJtcpEUF0dJDN8HDdmWbZL89bH7s7M5skk6/p53vvA8sM2/evGEQymlUSzk9lUik9Fyp2nDEUUzgtWuGRpw0o9aeCm4VQuSAL7Qmwk2DpDKasbC1QbHasORwPUkTlKxLYLdMU6jsimA7T1Mpb0fhToamVKYThu2pWaKMzcNunmZQ3uXgMs2kchCu04yqj2FLsr/Zu7usZL+tESzJqy0XcLckuTaEm8LpuUMPZ2fwDueE080BLDwLi9fo7RDt9HC9KDwlPtwSza3ZeFglIlp9gL0mimgBDCgIZvb6uNT9T/0S/T1BSAFgaEfP/kIL3sHI1g48tBai1aENhlrEXrHgFING0YG1EgmrgUWXa7uL2yXeWrpFdzu6ZMwJ/XXyBDieDwfOHwMnoVTSHNbgnfQ9/lREi1vp4S7NWw1W5cabj8BHcU5dA4+bnFNlpeBw34OLihi+wk94+0GnxHLBodPfPZXD67t9J+jkmB4cLhsUA78lYzno6CwViomFeaVY4t/hhBqs9Nt6DPwk+yoO1vmt4uDnRy7Q+SCHc3ySBOEXv+B1bOBICpdC6RmAz3H/mqjSxTsZXA0fjBH80uumiYg+4ZsMbkSO5BAu4rtfCPFbAmtOpBgM4S18JSKip+hKYCNahqaHa9ECOITf4yIe1trR0nuKz6ZpmubBGDZN0zTNHyG4ICj6X0ZNg78P8+MW5I2g6PNLtnZ14+tq3TcOB+Ob82eC60Zy0U1Qc8IVG9vOTbzcY5o56/+0FWoNjVorpdTEqbWPao2rWsus1qwrPhPUHiiKTyPFR9kMz8G/v1mIKuFxp8YAAAAASUVORK5CYII=') no-repeat;
			background-size: 100% 100%;
			margin-right: 20rpx;
			border-radius: 100%;
		}
		.collection_icon {
			background:url('data:image/jpeg;base64,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') no-repeat;
			background-size: 100% 100%;
			border-radius: 100%;
		}
		.uncollection_icon {
			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAAC6ElEQVRIx6VXz0tqURA+/+eoSQkuDKIoyoWYbYQKyrIIixZh4creSyITIjIFCVx4N6HQpjaSPxBS8de931uovXuPc824s7oz53yXc+bMfDMjwEo7Hw97PS6Hw+XxhuP5Nr9LMLZawmcng9h9idpMYCUoIUf4oPIjuOAjU/EVpoKr+zRV9qvm4Mw8/SDzGRNwN0IzSKTLgZsBmkkCzUlwfZ1mlPW6DG7OjCVabxrB3QD9QgJdAzhCv5KIHpyhX0rmP7jKv68j2W4nHfx7V7/BJnH1FwD+mMTaGFzg190dhELouPnVwghskgtxFImKiJtkyRCsmITxF3aJdvFlEvAKIIAgvxjFBxHRB6L8ehAQqNl5V9dxRER0hDrvcHsNAgn+x6f4tBER2T5xyu9IQJi4y1bG+fDrHGWbictEmzn1gv8ki8bcUJlrIHviX2DO3RZ5g8G5E30oNjQA6nfk7KsAtEbxIbrjNGzOC8Mzrg05alBRErrb+BJKZTDkuDVDIIiwXn1F5enqYINxr2Pj4Oqpgle9LSy8erWHxWm5tIieXvUKj16t4XIa+BI1veoRLr16Bu3MHHumwbDqEsb7XUM1JZWIimujHyQw3UA95rHHKm4kJxqPTUS3UMMcNqziVjK5jA4jIkpiEJrEhgZIyjaP8amIiCiFvl+2+ftITWz0CuaMz8jJphyemZsIhmVCKMmmEpirxKXEGHFIWjalOT7Jcyn5OBlnl3jkUpIhgzfsyaY9vHFkwNBQC8uyaRktloYmCHARnTEXbW2NGagzkW/2Gke923gfUUgZKI8I5R3bHPVOkP4FskREgRLQaAClABFRFhcs6csuu0eMaPVFQyvmdMZa0F5WiWK4Z8uNXOjukF5K9dFPuomI3Mk++qmlNO74QieV2E0VgJZbGesrOQ2AusmXWLm4H1Z7iiE1/EqvemhW3C21FdYaGmutlKUmzlr7aK1xtdYyW2vWLY4J1gYUi6ORxaHsF+PgPyIWgG2yq3F6AAAAAElFTkSuQmCC') no-repeat;
			background-size: 100% 100%;
			border-radius: 100%;
		}
	}
	.bg_show{
		background-color: #f8f8f8;
	}
	.img_swiper {
		width: 750rpx;
		height: 716rpx;
		background: #fff;
		.img_item {
			max-width: 100%;
			max-height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: auto;
			height: auto;
		}
	}
	.goods_info {
		width: 100%;
		height: 210rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		.goods_info_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.symbol {
				height: 42rpx;
				line-height: 42rpx;
				font-size: 30rpx;
			}
			.goods_price {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 44rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.goods_label {
				width: 88rpx;
				height: 40rpx;
				line-height: 40rpx;
				background:rgba(234,218,191,1);
				border-radius:20rpx;
				font-size: 22rpx;
				color: #464646;
				text-align: center;
				display: inline-block;
				position: relative;
				bottom: 6rpx;
				margin-left: 10rpx;
			}
			.sales_num {
				color: #7C7C7C;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
		.goods_name {
			height: 42rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			margin-top: 16rpx;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.goods_subname {
			color: #979797;
			font-size: 26rpx;
			height: 36rpx;
			line-height: 36rpx;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 8rpx;
		}
	}
	.freight {
		margin-top: 20rpx;	
	}
	.common_item_bar {
		padding: 24rpx;
		width: 100%;
		box-sizing: border-box;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		position: relative;
	}
	.common_item_bar:after {
		width: 650rpx;
		height: 1px;
		background-color: #ECECEC;
		position: absolute;
		right: 0;
		bottom: 0;
		content: '';
	}
	.info_commom_title {
		height:36rpx;
		line-height: 36rpx;
		font-size:26rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		margin-right: 24rpx;
		color: #212121;
	}
	.info_common_con {
		height:36rpx;
		font-size:26rpx;
		color: #464646;
		margin-right: 26rpx;
	}
	.info_common_label {
		height:40rpx;
		line-height: 40rpx;
		background:rgba(254,244,232,1);
		border-radius:8rpx;
		padding: 0 12rpx;
		display: inline-block;
		color: #AE8A57;
		font-size: 26rpx;
	}
	.info_common_label2 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		margin-right: 20rpx;
	}
	.info_operation {
		color: #AEAEAE;
		font-size: 26rpx;
		text {
			vertical-align: middle;
		}
	}
	.right_arrow_icon {
		display: inline-block;
		width: 24rpx;
		height: 24rpx;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAElBMVEVubm59fX1/f3+BgYHq6ur/////jxb0AAAAPklEQVQY02MIRQIMZHKCVZA4QYyuCE6IgAiSHkeoFEMokhTENKgUhBMioIqDg6wMxQBko1EsRXEOikMp8jYAjsJZhd56tsAAAAAASUVORK5CYII=') no-repeat;
		background-size: 100% 100%;
	}
	.title_label {
		height:44rpx;
		line-height: 44rpx;
		font-size:32rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		background: #fff;
		padding: 36rpx 0 36rpx 24rpx;
	}
	.installment_table_box {
		padding: 0 28rpx 40rpx;
		background: #fff;
		.installment_table {
			background: #FBFBFB;
			border-radius:16rpx;
			border:1px solid rgba(236,236,236,1);
			padding: 40rpx 40rpx 16rpx;
			display: flex;
			overflow: scroll;
			.table_title {
				margin-right: 20rpx;
				min-width: 160rpx;
				view {
					height:36rpx;
					line-height: 36rpx;
					font-size:26rpx;
					color: #7C7C7C;
					margin-bottom: 24rpx;
				}
			}
			.table_item {
				border-right: 1px solid #DCDCDC;
				view {
					height:34rpx;
					line-height: 34rpx;
					font-size:24rpx;
					color: #464646;
					margin-bottom: 26rpx;
					min-width: 120rpx;
					padding: 0 10rpx;
					text-align: center;
				}
			}
			.table_item:last-child {
				border-right: none;
			}
		}
	}
	.entry_shop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;
		background: #fff;
		width: 750rpx;
		height: 120rpx;
		padding: 24rpx;
		box-sizing: border-box;
		color: #212121;
		margin-top: 20rpx;
		.shop_logo {
			width: 72rpx;
			height: 72rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
		.dlb_box {
			.shop_name {
				height: 42rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium,PingFang SC;
				font-weight: 500;
				margin-bottom: 2rpx;
			}
			.focus_num {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 20rpx;
			}
		}
		.focus_shop {
			width: 124rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background-color: #FFCD00;
			border-radius: 16rpx;
			font-size: 24rpx;
			display: block;
		}
	}
	.shop_goods::-webkit-scrollbar {
		display: none;
	}
	.shop_goods {
		display: flex;
		justify-content: flex-start;
		padding: 40rpx 24rpx 24rpx;
		background: #FFFFFF;
		overflow: scroll;
		.shop_goods_item {
			width: 160rpx;
			margin-right: 20rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				margin: 0 auto 16rpx;
				display: block;
			}
			.shop_goods_name {
				color: #464646;
				font-size: 24rpx;
				height: 34rpx;
				line-height: 34rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				margin-bottom: 10rpx;
			}
			.shop_goods_price {
				height: 36rpx;
				line-height: 36rpx;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFangSC-Medium,PingFang SC;
				font-weight: 500;
				text-align: center;
			}
		}
		.shop_goods_item:last-child {
			margin-right: 0;
		}
	}
	.goods_info_bottom_bar {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		.bottom_bar_tool {
			width: 72rpx;
			text-align: center;
			.tool_title {
				color: #6E6E6E;
				font-size: 18rpx;
				line-height: 26rpx;
			}
		}
		.tool {
			width: 48rpx;
			height: 48rpx;
			margin: 0 auto 2rpx;
		}
		.contact_tool {
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAAAAAByaaZbAAACBklEQVRIx+3Vy0sVcRTAcf+V7/gA9ZpFhYkJvSZRNwWFlRomtjCQoIgasDJz0Y1LcL0bb5nlIhSMe6lWRbjRopRC6WEKRbnxUVgIkZTjaTFzq/nd34y3luHZDed8GOb3O3NOlvxlZK0BN94nu2KxeHI6MzBkFeNGsTW8KnhYgScqBwPBfAMARnmddbapPBuAxk/+4PkGgPrEV+fxW6IRYOOYH3icCxyc+jP9pg7Ie6oHEwWQ3a9+5HUDCid1YK4UCkfTz3G4AMo+asARyBnRnfxoDjSlgwdAv/5ybwGDaWA31Pq1Qy1UqWAImPQDE8ATBZyGBtsP2PXQqoAigJJeXXnPZoD1XvDBbZ2T6fXH3dSMBwykmk3tNbmfyiQ9oAvWvVrYBydU0AI1X16E4JoHRKFNpA8qVbALBkQsiKkgIpIAUwXb4K5IB3T+j+CyyG0N2A53RC6oIA6mLefgsKZT22V5h3oPU8CWKuCGCrqB6hLgnbf5Tjn3b35XwdJOJ3NG6Va71QBqZkXEjptFoVBoa8dn51/PB4zzmiHQ1/tSRGRlf6rdyuZFRCwgMhcwW7t/z8ljIq8PAEcDh3E1ND8bHx+7ArnhCoC9S4GgFO6JiCym3tPyI3jcN8Omi+HwJdMp3/Notf0wYvz6hkORnpkMNlAiz61vz3RlLdzsjEajV9+uLfZ/Bj8BX6KDetsz+VEAAAAASUVORK5CYII=') no-repeat;
			background-size: 100% 100%;
		}
		.shop_tool {
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAAAAAByaaZbAAABp0lEQVRIx+3Vz0sUcRjHcf+V97qiuZs/8MdFrSSNDuJBw0MJithBPFmXyAQ7mmguqKiFIN3cLYQEPawsYjriYXVvHepihRCLsESgMPZ4mN0VvvN8A0Vv+5w+h+9rhnmeZ2aK5JJVVACXA4dddXrVD52pYBhrxVRQZQfPNLAPLH9SahhCGohAi/qYmQB8UUArTOmNaYM3fpAGkjqYhSY/WIJKS+u/Aj99oB9e2oZVB+9N4JbCig28hscmWIPgqQ2sQ/DEAKP5izgVnX+8tBdu/J6/fdQAIZj20n2Y8dJAvtF98NYAd2HeS+F815vhhZd6IGKAEWh1RUQ2gIrfIiKbQMk3EZGDAKwawAF60yLx2wAPUiIrYYCGbZF4LdS65hyeAsF7Nbn9DJXm0q0ygDXf4P52ZA8Eos+zqfjjWE4tKMvnTpYDtO+JfG4GirtTIok2IPBoV3+n/21+iB168Sixkx3G8dZ25po+As7DUcuZdN+THwq4A44OpmFMAdUXwzFqCl4VwBVBEzR0qlUJ4wqY4D/laNs6aD1esqgvX/LdnFpLvwq/3ZsG53VVe7nay4EpAAAAAElFTkSuQmCC') no-repeat;
			background-size: 100% 100%;
		}
		.cart_tool {
			background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABQ5JREFUaAXtmEtoY2UUgPuYJk1bUCipoLFM2sQ6dpSBgFKluFAXs7DqxkHxgbhS8IHiRmdRR0FwREQZKIOoiy4EV74GHVwEwYUupD5qQk3TQQdLK0Odaottk9TvXO653NxX7o0pUzEX/p7zn/c5//kfaUdH+2tXoF2BdgXaFfg/V6BzPyU/Ojp6eHd391ViGtK4mJe7u7ufKZVK55Vmhwfsk0uNE+xLjKOOOHK1Wu1HaCccdGPa5UW8hLTrPXwvdXV1fexBN0j7poVyuVzP2traJitwoLOz84dyuXyDX9B2+r5ZAYJPS/BmcCV7kEG4KrhkMplMqlqtvkY1ki5m84Rz8Xj8eKFQWPYwkbHRfrbhgahvAgT/JJrHqEqggajMra2tX9GZ9tDLKg2foRMIaqGLarBVkNVcZZz1sWclwLEZOgHfFcBR0Vb9kxh92cdxaHIqldrM5/MVLwV8tTYBjq4CbaS+DnKRrOukWYiNIFVNYLNYLC5TwCBZi+fbQmw28WZkgLFDlsYeIOPj4zHMDotpfJUYoTeebwLz8/PbGCqb8Wanp6ddslz9Q+l0+sORkZEzcmqZsh3QJqF9xThl12P+NONrxiMqK7BSqaQB3SYtdP+LvCso04gB6MuCIMD47OysOKn7uOKfgDAF/yj4s8ok8deh3cx4HL07hE6CSeZCv5HpjFxcKr+zs6PtI6TWJUAgRXVCgNcqrpB9crniQE+cgA068DJkjMYGj3Fx9dl09yYBHFgJkMxe7gMrAZJr3QpQYSsBDLtWwFbBf4taCfT29gYeVU5HgXtgYGDA2AOmkisBktq0GfTEkdkQmVgsZkBTvkpx/lZdZDKCs8p/+TwzVNQFAxOYm5v7A6MrooUTVwsRxGn438MugJ+yWT8B/hu8M8PDw18IXQJj/gZjFdkXuRO2hM7mjgOMIxQfkaov+samEsTv40jMw7tV+NzGQzj+XfBWfdls9hDH6E+mvQ+WlpbujWI7cAXEEBWz2oib2dVGUZx5yVJ1q/9ZmUgbWOw1TAAZayPjwNVGXkFFoVEUK4FmWsj3MadBEHRR30Q4eIFb9EHltQgexK6airwCDRPgArNaCEey2YwNpx5bCWnXhaj2GrYQv01/wfC7GK5FNR5BvoaPmcXFxdUIOoZow1NIDcpxl0wmGyas8lHg+vp6VR6PUXRUNnQCqmC+JB9gLpuvSOXeoXLvKz8I8nq9hZZ8DpkjDPld/ElfX9/JZoMXX5ES4E54D52HRdHxvcn5/ZSDVjdF91EIpxl1q0gBvkkkEpPNJqFv8DpnXhOqdzeb+BXl4Vj6td+c3zQ4OPglL8xzyrdD+a2A7qfQ5NaV7wJDcEnmKi6yGrp58MhfXTWCtAngLuUT/P1s7iuAjykN/pTiTgjvNmhGsujMoJvs6enJge+IrN22U7fRPHQCGEqpsf7+/s8E54FmQJN+tfI9oMUj6LOM3YWFhe+Qk30gt71l20M3kNTwHrBpy6PtdplvbGy8RVu8vb29be974Xt+BGjxqPZxDoI/EZwE1zvF4nsaCCCG3sQ4vQaHc9hKOO0R4EVu7MM89M47eTKXI5jT51v0r/PiQ5viEPD9B66PjkEO3UL0rdySD0mwDoMXoN3nF7zIytMZmWOMupuWeYXxfLPBi+3QKyDC8o2NjV3JqXEnaJaqFqn8R2Fv0ImJicTKyso9rMQRAl9G93OS06e0Yb/9p12BdgXaFfhvVeAf8lrWllSlNkQAAAAASUVORK5CYII=') no-repeat;
			background-size: 100% 100%;
		}
		.bottom_btn {
			width: 452rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
		.join_cart {
			color: #fff;
			background-color: #000;
			margin-left: 12rpx;
		}
		.join_buy {
			color: #483E2E;
			background-color: #EADABF;
			font-weight: 500;
			font-family: PingFangSC-Medium,PingFang SC;
		}
	}
	.poupp_content {
		border-radius:24px 24px 0px 0px;
		background-color: #fff;
		padding: 40rpx 0 20rpx;
		color: #212121;
		position: relative;
		.close {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			right: 48rpx;
			top: 26rpx;
			color: #212121;
		}
		.poupp_flex {
			display: flex;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #ececec;
			.poupp_img {
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
			}
			.poupp_goods_name {
				width: 440rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 10rpx;
			}
			.poupp_goods_price {
				color: #000;
				font-size: 40rpx;
				line-height: 56rpx;
				.symbol {
					font-size: 28rpx;
					line-height: 40rpx;
				}
				.poupp_label {
					display: inline-block;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #EADABF;
					padding: 0 12rpx;
					color: #483E2E;
					font-size: 22rpx;
					margin-left: 6rpx;
					border-radius: 20rpx;
					position: relative;
					bottom: 6rpx;
				}
			}
		}
		.poupp_nper {
			margin-top: 38rpx;
			font-size: 26rpx;
			text {
				height: 40rpx;
				line-height: 40rpx;
				vertical-align: middle;
			}
			.limit_free {
				padding: 0 12rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				color: #AE8A57;
				border: 1px solid #CFAE7F;
				background-color: #FEF4E8;
			}
		}
		.poupp_nper_box {
			margin-top: 22rpx;
			display: flex;
			flex-wrap: wrap;
			text {
				width: 122rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 28rpx;
				text-align: center;
				border: 1px solid #DCDCDC;
				color: #483E2E;
				font-size: 26rpx;
				margin-right: 20rpx;
			}
			.act {
				border-color: #000000;
			}
		}
		.poupp_deposit {
			height: 80rpx;
			background-color: #F8F8F8;
			padding: 22rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #464646;
			border-radius: 16rpx;
			margin-top: 40rpx;
		}
		.poupp_nper_detail {
			padding: 36rpx 32rpx;
			background-color: #F8F8F8;
			border-radius: 16rpx;
			margin-top: 24rpx;
			view {
				display: flex;
				justify-content: space-between;
				color: #464646;
				font-size: 26rpx;
			}
			view:nth-of-type(2) {
				margin-top: 26rpx;
			}
		}
		.poupp_tips {
			width:100%;
			height:60rpx;
			line-height: 60rpx;
			background:rgba(252,248,240,1);
			border-radius:8rpx;
			color: #A79981;
			font-size: 24rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 14rpx 0 24rpx;
			box-sizing: border-box;
			margin-top: 172rpx;
		}
		.poupp_btn {
			width: 702rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 16rpx;
			background-color: #EADABF;
			font-size: 28rpx;
			margin: 20rpx auto 0;
		}
	}
	.no_data {
		font-size: 32rpx;
		padding: 24rpx;
	}
</style>