mh/pages/index/details.vue

<template>
	<view class="index-main">
		<view class="vheight"></view>
		<!-- <audio id="audio" src="/static/image/home/bj.mp3" loop></audio> -->
		<view class="details">
			<!-- nav start -->
			<view class="details_title">
				<view class="details_nav"></view>
				<view class="details-title_head flex">
					<view class="details_title_return" @click="returnTop"><image src="/static/image/publice/fanhui@2x.png" mode=""></image></view>
					<view class="details_title_name">{{ boxDetail.box_name }}</view>
					<!-- <view class="details_title_mp3" @click="changePlay">
    			<image :src="isPlay ? '/static/image/home/bofang@2x.png' : '/static/image/home/guanbiyinyue@2x.png' " mode=""></image>
    		</view> -->
				</view>
			</view>
		</view>
		<!-- nav end -->
		<!-- 灯光 -->
		<view class="bjt">
			<!-- <image class="light" src="/h5/static/image/new_home/dg.png" mode="widthFix"></image> -->
			<!-- 上半部分 -->
			<view class="top">
				<!-- 	<view class="title">
				<view class="oval" @click="toRecharge()">
					<image class="small-img" src="/static/image/new_home/yecz.png" mode="widthFix"></image>
					<text> {{capital.coin}} </text>
					<span>金币充值</span>
				</view>
				<view class="oval1" @click="toMyBox()">
					<image class="small-img" src="/static/image/new_home/tbxg.png" mode="widthFix"></image>
					<text> {{capital.box}} </text>
					<span>物品盒柜</span>
				</view>
				<view class="right" @click="wfashuiming()">
					<image class="small-img" src="/static/image/new_home/wfsm.png" mode="widthFix"></image>
					<span>玩法说明</span>
				</view>
			</view> -->

				<lunbobox></lunbobox>
				<!-- <view class="play-explain" @tap="$refs.regulation.open()">
					<image class="small-img" src="/static/image/tabbar/wodeyixuanzhong@2x1.png" mode="widthFix"></image>
					<text>买家须知</text>
				</view> -->
				<view class="details_footer_coll" @click="changeStar" v-if="type == 0">
					<image
						:src="boxDetail.is_star == 1 ? 'https://www.chaomangdao.com/image/home/shoucangyixuanzhong@2x.png' : '/static/image/home/shoucangweixuanzhong@2x.png'"
						mode="widthFix"
					></image>
				</view>
				<view class="loop-container">
					<!-- 图片轮播主区域 -->
					<view class="loop-image-main">
						<prize-flying v-if="box_id" :key="`flying`" :box-id="box_id"></prize-flying>
						<!-- 图片轮播 -->
						<view class="loop-image-warapper">
							<swiper autoplay circular class="swiper">
								<swiper-item>
									<view :class="['image-box']">
										<template v-for="(item, index) in boxDetail.box_banner">
											<view :key="index">
												<image
													:class="[boxDetail.box_banner.length > 1 ? `box-banner-${index}` : 'box-banner']"
													:src="item.image"
													mode="heightFix"
													@click="lookImg(item.image)"
												></image>
												<text>{{ item.desc }}</text>
											</view>
										</template>
									</view>
								</swiper-item>
							</swiper>
							<!-- <image src="/static/image/home/erji@2x.png" mode=""></image> -->
						</view>
						<!-- 底座 -->
						<!-- <view class="pedestal">
						<image src="/h5/static/image/new_home/dizhuo.png" mode="heightFix"></image>
					</view> -->
						<!-- 手指 -->
						<!-- <view class="finger">
						<image src="/h5/static/image/new_home/sz.png" mode="heightFix"></image>
					</view> -->
					</view>
				</view>
			</view>
			<!-- 下半部分 -->
			<view class="bottom">
				<view>
					<!-- 下方按钮区 -->
					<view class="button-container">
						<view class="side-btn" @click="haveTry()"><image src="/static/image/new_home/swmhan.png" mode="widthFix"></image></view>
						<view class="center-btn" @click="selectNum()">
							<image src="/static/image/new_home/khan.png" mode="widthFix"></image>
							<!-- <text>立即开箱</text> -->
						</view>
						<view class="side-btn" @click="$refs.regulation.open()"><image src="/static/image/new_home/gdmhan.png" mode="widthFix"></image></view>
					</view>
					<!-- 	<view class="button-container">
						<view class="side-btn" @click="haveTry()">
							<image src="/static/image/new_home/swmhan.png" mode="widthFix"></image>
						</view>
						<view class="center-btn" @click="selectNum()">
							<image src="/static/image/new_home/khan.png" mode="widthFix"></image>
						</view>
					</view> -->
					<!-- 下方价格 -->
					<!-- <view class="price-container">
						<text class="price">{{ boxDetail.box_name }}{{ boxDetail.coin_price }}元/个</text>
					</view> -->
					<!-- <view class="kxbz">盲盒开箱必中以下宝贝之一</view> -->
				</view>
			</view>
		</view>
		<uni-popup ref="num-popup" type="bottom" :mask-click="false">
			<view class="num-popup">
				<view class="popup-close" @click="closeNumPopup"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="num-button-group">
					<view class="num-button" @click="createOder(1)">
						<image src="/static/image/new_home/btn-1.png" mode="widthFix"></image>
						<text>一发入魂</text>
					</view>
				</view>
				<view class="num-button-group">
					<view class="num-button" @click="createOder(5)">
						<image src="../../static/image/new_home/btn-3.png" mode="widthFix"></image>
						<text>五连绝世</text>
					</view>
					<view class="num-button" @click="createOder(9)">
						<image src="../../static/image/new_home/btn-2.png" mode="widthFix"></image>
						<text>九连更稳</text>
					</view>
				</view>
				<view class="order-info">
					<view>开盒数量：{{ boxNum }}</view>
					<view class="total-price">订单金额：￥{{ totalPrice }}</view>
				</view>
				<view class="popup-btn"><!-- <button type="primary" @click="$refs['payment'].open(0, boxNum)">创建订单</button> --></view>
			</view>
		</uni-popup>

		<payment ref="payment" :box-id="box_id" :box-num="boxNum" :type="type" @create-success="closeNumPopup" @show-result="showResult"></payment>
		<show-result ref="resultPopup" :num="boxNum" @accept="toMyBox()" @recycle="recycle" :type="type"></show-result>
		<recycle ref="recycle"></recycle>
		<!-- <image src="https://www.chaomangdao.com/image/kxbz.png" mode=""></image> -->
		<!-- 商品预览start -->
		<view class="goods-view">
			<view class="rate-view flex">
				<!-- <text class="rate-txt">获得概率</text> -->
				<!-- <view class="rate-list flex">
					<view class="rate-item" v-for="(item, index) in rates" :key="item.value">
						<text :class="['rate-name', `rate-name-${index}`]">{{ item.name }}</text>
						<text class="rate-value">{{ item.value }}%</text>
					</view>
				</view> -->
			</view>
			<view class="goods-list-view flex">
				<view class="goods-item" v-for="(item, index) in boxDetail.goodslist" :key="index">
					<text class="goods-tag" :class="'goods-tag-' + (item.tag == '传说' ? 0 : item.tag == '史诗' ? 1 : item.tag == '稀有' ? 2 : 3)">
						{{ item.tag == '传说' ? rates[0].value : item.tag == '史诗' ? rates[1].value : item.tag == '稀有' ? rates[2].value : rates[3].value }}%
					</text>
					<view class="goods-img-view">
						<image :src="item.image.indexOf('http') == -1 ? 'https://www.chaomangdao.com' + item.image : item.image" mode="" @click="lookDetail(item)"></image>
					</view>
					<view class="goods-name clamp2">{{ item.goods_name }}</view>
					<view class="goods-price">￥{{ item.price }}</view>
					<!-- <view class="goods-price-view">
						<span class="rmb">￥</span>
						{{ item.price }}
					</view> -->
				</view>
			</view>
		</view>
		<!-- 商品预览end -->
		<!-- 开盒记录start -->
		<!-- <view class="record-view">
		  <view class="title flex">
		    <text class="title-left">开盒记录</text>
		    <view class="title-right flex" @tap="$refs.morerecord.open()">
		      <text>更多记录</text>
		      <view class="rule-box">
		        <image src="../../static/image/publice/jinruer@2x.png" mode="aspectFit"></image>
		      </view>
		    </view>
		  </view>
		  <view class="record-list-view">
		    <view class="record-item flex" v-for="(item, index) in record3" :key="index">
		      <view class="goods-img-view">
		        <image :src="item.goods_image" mode="aspectFit"></image>
		      </view>
		      <view class="record-item-right">
		        <view class="goods-name-view flex">
		          <text class="username">{{item.nickname}}</text>
		          <text class="txt">开出了</text>
		          <text class="goods-name">{{item.goods_name}}</text>
		        </view>
		        <view class="goods-price-view">
		          参考价 ￥{{item.goods_rmb_price}}
		        </view>
		        <view class="goods-time-view">
		          开盒时间：{{item.create_time}}
		        </view>
		      </view>
		    </view>
		  </view>
		</view> -->
		<!-- 开盒记录end -->
		<!--S  更多记录 -->
		<!-- <uni-popup ref="morerecord" :mask-click="true">
		  <view class="regulation">
				<view class="regulation_close" @click="$refs.morerecord.close()">
					<image src="/static/image/home/guanbi@2x.png" mode=""></image>
				</view>
		  	<view class="regulation_name">开盒记录</view>
				<view class="regulation_main">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="record-item flex" v-for="(item, index) in boxDetail.record" :key="index">
		          <view class="goods-img-view">
		            <image :src="item.goods_image" mode="aspectFit"></image>
		          </view>
		          <view class="record-item-right">
		            <view class="goods-name-view flex">
		              <text class="username">{{item.nickname}}</text>
		              <text class="txt">开出了</text>
		              <text class="goods-name">{{item.goods_name}}</text>
		            </view>
		            <view class="goods-price-view">
		              参考价 ￥{{item.goods_rmb_price}}
		            </view>
		            <view class="goods-time-view">
		              开盒时间：{{item.create_time}}
		            </view>
		          </view>
		        </view>
					</scroll-view>
				</view>
		  </view>
		</uni-popup> -->
		<!-- 购买须知start -->
		<!-- <view class="buy-rule-view">
		      <view class="title flex">
		        <text class="title-left">购买须知</text>
		      </view>
		      <view class="box-view" v-html="notice_to_buyers"> -->
		<!-- <view class="rule-item">
		          <view class="rule-title">
		            【盲盒规则】
		          </view>
		          <view class="rule-html">
		            这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则
		          </view>
		        </view>
		        <view class="rule-item">
		          <view class="rule-title">
		            【关于配送】
		          </view>
		          <view class="rule-html">
		            这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则
		          </view>
		        </view>
		        <view class="rule-item">
		          <view class="rule-title">
		            【售后问题】
		          </view>
		          <view class="rule-html">
		            这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则这是一段规则
		          </view>
		        </view> -->
		<!--  </view>
		    </view> -->
		<!-- 购买须知end -->
		<!--S  买家须知 -->
		<uni-popup ref="regulation" :mask-click="false">
			<view class="regulation">
				<view class="regulation_close" @click="$refs.regulation.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="regulation_name">买家须知</view>
				<view class="regulation_main">
					<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="message"></u-parse></scroll-view>
				</view>
			</view>
		</uni-popup>
		<!--E  买家须知 -->
		<!-- 更多商品详情 -->
		<goods-detail ref="goods-detail"></goods-detail>
	</view>
</template>

<script>
import payment from '@/components/payment.vue';
import showResult from '@/components/show-result.vue';
import recycle from '@/components/recycle.vue';
import goodsDetail from '@/components/goods-detail.vue';
import lunbobox from '@/components/lunbobox.vue';
import prizeFlying from '@/components/prize-flying.vue';
const innerAudioContext = uni.createInnerAudioContext();
export default {
	components: {
		payment,
		showResult,
		recycle,
		goodsDetail,
		lunbobox,
		prizeFlying
	},
	data() {
		return {
			box_id: null, //盲盒ID
			message: '', //玩法规则
			boxDetail: {}, //盲盒详情
			capital: {
				box: 0,
				coin: 0
			},
			//金额
			price: 0,
			//数量
			boxNum: 1,
			//开盒类型 0：正式开盒 1：试玩
			type: 0,
			record3: [],
			notice_to_buyers: '',
			rates: [
				{
					value: '0.1%',
					// name: '传说款',
					tag: '传说'
				},
				{
					value: '10.9%',
					// name: '史诗款',
					tag: '史诗'
				},
				{
					value: '22.5%',
					// name: '稀有款',
					tag: '稀有'
				},
				{
					value: '76.5%',
					// name: '普通款',
					tag: '普通'
				}
			]
		};
	},
	computed: {
		//订单总金额
		totalPrice() {
			return this.boxNum * this.boxDetail.coin_price;
		}
	},
	created() {
		console.log(this.box_id);
	},
	mounted() {
		// let audio = document.getElementById('audio').querySelector('audio');
		// audio.play();
	},
	methods: {
		lookImg(url) {
			uni.previewImage({
				urls: [url],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		//查看详情
		lookDetail(goods) {
			let rate = this.rates.find(item => item.tag == goods.tag);
			console.log(this.rates);
			this.$refs['goods-detail'].open(goods, rate);
		},
		changePlay() {
			this.isPlay = !this.isPlay;
			uni.setStorageSync('isPlay', this.isPlay);
			this.isPlay ? innerAudioContext.play() : innerAudioContext.pause();
		},
		//去充值
		recharge() {
			uni.navigateTo({ url: '/pages/me/recharge' });
		},
		//是否点赞
		changeStar() {
			this.$api.star({ box_id: this.box_id }).then(res => {
				if (res.code === 1) {
					res.data.is_star == 1 ? (this.boxDetail.is_star = 1) : (this.boxDetail.is_star = 0);
					uni.showToast({ title: res.msg });
				}
			});
		},
		//跳转说明
		wfsm() {
			uni.navigateTo({ url: '/pages/index/wfsm' });
		},
		//跳转盒柜
		toMyBox() {
			this.$refs['num-popup'].close();
			uni.navigateTo({ url: '/pages/me/myBox' });
		},
		returnTop() {
			uni.navigateBack();
		},
		//获取详情
		getDetails() {
			this.$api.boxDetail({ box_id: this.box_id }).then(res => {
				if (res.code === 1) {
					this.boxDetail = res.data;
					this.record3 = res.data.record.slice(0, 3);
					this.rates[0].value = (res.data.more.tags.legend * 1).toFixed(2);
					this.rates[1].value = (res.data.more.tags.supreme * 1).toFixed(2);
					this.rates[2].value = (res.data.more.tags.rare * 1).toFixed(2);
					this.rates[3].value = (res.data.more.tags.normal * 1).toFixed(2);
					console.log(this.boxDetail);
				}
			});
		},
		//试玩
		haveTry() {
			this.type = 1;
			this.boxNum = 1;
			this.$refs['payment'].open(1, 1);
		},
		//选择数量
		selectNum() {
			this.type = 0;
			this.boxNum = 1;
			this.$refs['num-popup'].open();
		},
		//创建订单
		createOder(num) {
			this.boxNum = num;
			this.$refs['payment'].open(0, this.boxNum);
		},
		//创建订单成功或者试玩返回结果
		closeNumPopup() {
			//关闭数量弹窗
			this.$refs['num-popup'].close();
		},
		//展示结果
		showResult(result) {
			//试玩
			if (this.type == 1) {
				this.$refs['resultPopup'].open({ prizeInfo: result.goodsInfo });
				return;
			}
			this.$refs['resultPopup'].open(result);
		},
		//回收
		recycle(prizedata) {
			this.$refs['num-popup'].close();
			this.$refs['recycle'].recycle(prizedata.prizeInfo);
		},
		//玩法规则
		getMessage() {
			this.$api.agreement({ name: 'notice_to_buyers' }).then(res => {
				if (res.code === 1) {
					this.message = res.data.content;
				}
			});
		}
	},
	onUnload() {
		innerAudioContext.pause();
	},
	onLoad({ id }) {
		console.log(id, '123456');
		this.box_id = parseInt(id);
		this.getDetails();
		this.getMessage();
	},
	onShow() {
		this.isPlay = uni.getStorageSync('isPlay');
		this.isPlay ? innerAudioContext.play() : innerAudioContext.pause();
	},
	//刷新金币和盒子数量
	onShow() {
		this.$api.getUserCapital().then(({ code, data }) => {
			if (code == 1) {
				this.capital = data;
			}
		});
		let is_notice = uni.getStorageSync('is_notice');
		uni.removeStorageSync('is_notice');
		if (is_notice == 1) {
			setTimeout(() => {
				uni.showModal({
					title: '提示',
					content: '恭喜，获得10金币',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}, 1000);
		}
	}
};
</script>
<style lang="scss">
.bottom-top {
	// height: 50rpx;
	height: 140rpx;
	margin: 20rpx 0;
}
.vheight {
	height: var(--status-bar-height);
	width: 100%;
}
.bottom-top .bottom-top-left {
	width: 25%;
	float: left;
	margin-left: 5rpx;
}
.bottom-top .bottom-top-center {
	width: 26%;
	display: block;
	float: left;
	uni-image {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
		float: right;
	}
}
.bottom-top .bottom-top-right {
	float: right;
	margin-right: 5rpx;
}
.kxbz {
	display: block;
	font-size: 35rpx;
	text-align: center;
	margin: 5rpx 0;
}
.details_footer_coll {
	position: absolute;
	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
	background-color: #fff;
	top: 8vh;
	right: 0;
	display: flex;
	z-index: 99;
	align-items: center;
	border-radius: 100rpx;
	padding: 8rpx 20rpx;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	uni-text {
		color: #5348c9 !important;
		margin-left: 10rpx;
	}
	uni-image {
		width: 40rpx;
	}
}
uni-page-body {
	height: 100%;
}
.play-explain {
	position: absolute;
	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
	background-color: #fff;
	top: 62vh;
	right: 0;
	display: flex;
	z-index: 99;
	align-items: center;
	border-radius: 100rpx;
	padding: 8rpx 20rpx;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	uni-text {
		color: #5348c9 !important;
		margin-left: 10rpx;
	}
	uni-image {
		width: 40rpx;
	}
}
uni-page-body {
	height: 100%;
}
.bjt {
	background: url(https://www.chaomangdao.com/image/bj.jpg);
	background-size: 100% 100%;
}
.index-main {
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	flex-direction: column;
	.light {
		position: absolute;
		top: 0;
	}
	> view {
		display: flex;
		flex-direction: column;
	}
	.top {
		flex: 0.6;
		.title {
			display: flex;
			margin-top: 30rpx;
			height: 130rpx;
			z-index: 19;
			padding: 0 30rpx;
			> view {
				align-items: center;
				font-size: 28rpx;
				image {
					margin-right: 10rpx;
				}
			}
			.oval1,
			.oval {
				position: relative;
				width: 100rpx;
				text-align: center;
				margin: 0 auto;
			}
			.oval span,
			.oval1 span {
				display: block;
				position: absolute;
				bottom: 0rpx;
				font-size: 26rpx;
			}
			index-xg.png .oval1 text {
				color: #4e2ea9 !important;
			}
			.oval text,
			.oval1 text {
				color: #fff !important;
				border-radius: 100rpx;
				width: 80rpx;
				background: #cf0000;
				position: absolute;
				top: 0px;
				right: -50rpx;
			}
			.right {
				position: relative;
				width: 100rpx;
				text-align: center;
				margin: 0 auto;
				span {
					display: block;
					position: absolute;
					bottom: 0rpx;
					font-size: 26rpx;
				}
			}
		}
		.loop-container {
			background: url(https://www.chaomangdao.com/image/hzbj.gif);
			.loop-image-main {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				height: 580rpx;
				.loop-image-warapper {
					z-index: 20;
					position: absolute;
					height: 65%;
					margin-top: 100rpx;
					width: 100%;
					.image-box {
						display: flex;
						justify-content: center;
						height: 100%;
						.box-banner {
							height: 80%;
						}
						.box-banner-0 {
							width: 118px;
							height: 80%;
							left: 50%;
							transform: translateX(-50%);
							position: absolute;
							bottom: 0;
						}
						.box-banner-1 {
							left: 50%;
							transform: translateX(-50%);
							position: absolute;
							top: 0;
							height: 50%;
						}
					}
				}
				.pedestal {
					position: absolute;
					height: 400rpx;
					width: 100%;
					bottom: 0;
					uni-image {
						margin: 0 auto;
					}
				}
				.finger {
					position: absolute;
					z-index: 21;
					height: 140rpx;
					right: 180rpx;
					bottom: 50rpx;
				}
				.prize {
					position: absolute;
					height: 120rpx;
					right: 10rpx;
					bottom: 50rpx;
					z-index: 22;
				}
			}
			.loop-label-warapper {
				height: 180rpx;
				.label-box {
					height: 75%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.loop-label {
					transition: 0.2s;
					margin: 0 auto;
					width: 60%;
					height: 65%;
					background-image: linear-gradient(45deg, #89f7fe, #7c66ff);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 14rpx;
					text {
						transition: 0.2s;
						color: #ffffff;
						font-size: 28rpx;
						letter-spacing: 2rpx;
						font-weight: 400;
					}
				}
				.label-active {
					.loop-label {
						width: 90%;
						height: 80%;
						background-image: linear-gradient(45deg, #84f8ff, #1030ff);
						text {
							font-size: 42rpx;
							font-weight: bold;
						}
					}
				}
			}
			uni-swiper {
				height: 90%;
			}
		}
	}
	.bottom {
		flex: 0.4;
		.button-container {
			flex: 1;
			display: flex;
			padding-bottom: 10rpx;
			position: fixed;
			bottom: 0px;
			width: 100%;
			z-index: 99;
			background: #fff;
			> view {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
			}
			.center-btn {
				flex: 0.87;
				uni-image {
					width: 75%;
				}
				uni-text {
					position: absolute;
					font-size: 40rpx;
					line-height: 1.1;
					color: #ffffff;
					font-weight: bold;
					font-style: italic;
					letter-spacing: 2px;
				}
			}
			.side-btn {
				flex-direction: column;
				flex: 0.28;
				image {
					width: 60%;
				}
				text {
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
		.price-container {
			text-align: center;
			.price {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.look-rule {
			font-size: 30rpx;
			padding-left: 14rpx;
			color: #575757;
		}
		.banner {
			display: flex;
			margin: 20rpx 14rpx;

			> view {
				display: flex;
				font-size: 28rpx;
				image {
					margin-right: 10rpx;
				}
			}
			.center {
				flex: 1;
			}
		}
	}
}
.small-img {
	width: 80rpx;
	margin: 0 auto;
	margin-right: 0px;
}
//选择数量弹窗
.num-popup {
	background: #ffffff;
	border-radius: 10px 10px 0px 0px;
	padding: 50px 25px 90px 25px;
	.popup-close {
		top: 30rpx;
		right: 30rpx;
		width: 44rpx;
		height: 44rpx;
		position: absolute;
	}
	.num-button-group {
		display: flex;
		justify-content: center;
		gap: 50rpx;
	}
	.num-button {
		position: relative;
		width: 300rpx;
		text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			text-shadow: 1px 1px 1px black;
		}
	}
	.order-info {
		display: flex;
		> view {
			flex: 1;
			display: flex;
			align-items: center;
		}
		> view {
			font-size: 28rpx;
			font-weight: bold;
		}
		.total-price {
			color: red;
		}
	}
	> view {
		margin-bottom: 30rpx;
	}
}
/deep/ .pay {
	padding-bottom: 100px !important;
}
// 动画
@keyframes updown {
	0% {
		top: 0px;
	}
	50% {
		top: 10px;
	}
	100% {
		top: 0px;
	}
}
.bottom-top-center uni-image {
	animation: jt 2s infinite;
	-webkit-animation: jt 2s infinite;
}
.loop-image-warapper {
	animation: updown 2s infinite;
	-webkit-animation: updown 2s infinite;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.finger {
	animation: rotate 1.8s infinite;
	-webkit-animation: rotate 1.8s infinite;
}
.details_title {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 2021;
	.details_nav {
		width: 100%;
	}
	.details-title_head {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		background: #ffffff;
		.details_title_return {
			width: 44rpx;
			height: 44rpx;
		}
		.details_title_name {
			width: 100%;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 36rpx;
			font-weight: bold;
		}
		.details_title_mp3 {
			width: 44rpx;
			height: 44rpx;
		}
	}
}
.goods-view {
	.title {
		padding: 0 30rpx;
		margin: 30rpx 0 22rpx;
		.title-left {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			line-height: 48rpx;
		}
		.title-right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7a808d;
			line-height: 34rpx;
			.rule-box {
				width: 28rpx;
				height: 28rpx;
				margin-left: 6rpx;
			}
		}
	}
	.rate-view {
		background: #fff;
		padding: 20rpx 0;
		.rate-txt {
			display: inline-block;
			width: 172rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #696969;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			border-top-right-radius: 30rpx;
		}
		.rate-list {
			background: #ffff;
			margin: 5rpx 20rpx;
			border-radius: 20rpx;
			padding: 10rpx 0;
			justify-content: space-around;
			flex: 1;
			.rate-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.rate-value {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #0c0d10;
					line-height: 34rpx;
				}
				.rate-name {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 1000;
					line-height: 34rpx;
				}
			}
			.rate-value {
				color: #666666 !important;
				display: block;
				margin-top: 10rpx;
			}
			.rate-name-0 {
				background: url(../../static/image/new_home/cs.png);
				background-size: 100% 100%;
				height: 80rpx;
				width: 80rpx;
			}
			.rate-name-1 {
				background: url(../../static/image/new_home/ss.png);
				background-size: 100% 100%;
				height: 80rpx;
				width: 80rpx;
			}
			.rate-name-2 {
				background: url(../../static/image/new_home/xy.png);
				background-size: 100% 100%;
				height: 80rpx;
				width: 80rpx;
			}
			.rate-name-3 {
				background: url(../../static/image/new_home/pt.png);
				background-size: 100% 100%;
				height: 80rpx;
				width: 80rpx;
			}
		}
	}
	.goods-list-view {
		margin-bottom: 134rpx;
		flex-wrap: wrap;
		padding: 0 16rpx;
		margin-top: 14rpx;

		&::after {
			content: '';
			width: 220rpx;
		}
		.goods-item {
			width: 227rpx;
			height: 291rpx;
			// padding: 20rpx;
			background: #ffffff;
			// background: #000;
			border-radius: 16rpx;
			position: relative;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			.goods-price {
				position: absolute;
				right: 0;
				top: 188rpx;
				background-color: #ff7184;
				width: 88rpx;
				height: 30rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 30rpx;
				border-radius: 15rpx 0 15rpx 0;
				color: #fff;
			}
			.goods-tag {
				position: absolute;
				top: 0;
				left: 0;
				width: 88rpx;
				height: 30rpx;
				// background-color: #ff5423;
				z-index: 9;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				line-height: 30rpx;
				border-radius: 15rpx 0 15rpx 0;
				&-0 {
					background-color: #ff5423;
				}
				&-1 {
					background-color: #ffaa40;
				}
				&-2 {
					background-color: #46aaff;
				}
				&-3 {
					background-color: #7162ff;
				}
			}

			.goods-img-view {
				// width: 40%;
				width: 100%;
				height: 218rpx;
				image {
					width: 100%;
					height: 218rpx;
					// margin: auto;
					display: inline-block;
				}
				// float: left;
				// margin-right: 10rpx;
			}
			.goods-price-view {
				width: 260rpx;
				height: 40rpx;
				font-size: 45rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #ff495d;
				line-height: 40rpx;
				float: left;
				margin: 26rpx 0;
				display: block;
				.rmb {
					font-size: 28rpx;
				}
			}
			.goods-name {
				// width: 58%;
				// font-size: 32rpx;
				// font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				// color: #171a20;
				// line-height: 50rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
				font-size: 20rpx;
				padding: 5rpx 20rpx 0;
			}
		}
	}
	.record-view {
		.title {
			padding: 0 30rpx;
			margin: 30rpx 0 22rpx;
			.title-left {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #171a20;
				line-height: 48rpx;
			}
			.title-right {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7a808d;
				line-height: 34rpx;
				.rule-box {
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}
		}
		.record-list-view {
			.record-item {
				margin: 20rpx auto 0;
				width: 690rpx;
				height: 180rpx;
				background: #ffffff;
				border-radius: 16rpx;
				padding: 12rpx 0 10rpx 18rpx;
				.goods-img-view {
					width: 158rpx;
					height: 158rpx;
				}
				.record-item-right {
					flex: 1;
					margin-left: 22rpx;
					line-height: 42rpx;
					.goods-name-view {
						justify-content: flex-start;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #171a20;
						.username,
						.goods-name {
							color: #0091ff;
						}
						.goods-name {
							display: inline-block;
							width: 200rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.txt {
							display: inline-block;
							margin: 0 8rpx;
						}
					}
					.goods-price-view {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ff495d;
					}
					.goods-time-view {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #7a808d;
					}
				}
			}
		}
	}
}
.record-view {
	.title {
		padding: 0 30rpx;
		margin: 30rpx 0 22rpx;
		.title-left {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			line-height: 48rpx;
		}
		.title-right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7a808d;
			line-height: 34rpx;
			.rule-box {
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}
	}
	.record-list-view {
		.record-item {
			margin: 20rpx auto 0;
			width: 690rpx;
			height: 180rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 12rpx 0 10rpx 18rpx;
			.goods-img-view {
				width: 158rpx;
				height: 158rpx;
			}
			.record-item-right {
				flex: 1;
				margin-left: 22rpx;
				line-height: 42rpx;
				.goods-name-view {
					justify-content: flex-start;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #171a20;
					.username,
					.goods-name {
						color: #0091ff;
					}
					.goods-name {
						display: inline-block;
						width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.txt {
						display: inline-block;
						margin: 0 8rpx;
					}
				}
				.goods-price-view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ff495d;
				}
				.goods-time-view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #7a808d;
				}
			}
		}
	}
}
.regulation {
	width: 650rpx;
	height: 900rpx;
	padding: 0 0 0 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.regulation_close {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		top: 30rpx;
		right: 30rpx;
	}
	.regulation_name {
		padding: 40rpx 0;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.scroll-view {
		height: 735rpx;
	}
}
.regulation {
	.record-item {
		margin: 20rpx auto 0;
		width: 616rpx;
		height: 180rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.goods-img-view {
			width: 158rpx;
			height: 158rpx;
		}
		.record-item-right {
			flex: 1;
			margin-left: 22rpx;
			line-height: 42rpx;
			.goods-name-view {
				justify-content: flex-start;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #171a20;
				.username,
				.goods-name {
					color: #0091ff;
				}
				.goods-name {
					display: inline-block;
					width: 150rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.txt {
					display: inline-block;
					margin: 0 8rpx;
				}
			}
			.goods-price-view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff495d;
			}
			.goods-time-view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7a808d;
			}
		}
	}
}
.buy-rule-view {
	padding-bottom: 46rpx;
	.title {
		padding: 0 30rpx;
		margin: 30rpx 0 22rpx;
		.title-left {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #171a20;
			line-height: 48rpx;
		}
	}

	.box-view {
		width: 690rpx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 28rpx 0;
		.rule-item {
			.rule-title {
				padding: 0 10rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2e333f;
			}
			.rule-html {
				padding: 0 26rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7a808d;
				line-height: 40rpx;
				margin: 12rpx 0 24rpx;
			}
		}
	}
}
.center-btn uni-text {
	-webkit-animation-name: living; /*关键帧名称*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	-webkit-animation-iteration-count: infinite; /*动画播放的次数*/
	-webkit-animation-duration: 5s; /*动画所花费的时间*/
}
//放大动画
@keyframes living {
	0% {
		transform: scale(0.8);
		opacity: 0.8;
	}
	50% {
		transform: scale(1);
		opacity: 1; /*圆形放大的同时，透明度逐渐减小为0*/
	}
	100% {
		transform: scale(0.8);
		opacity: 0.8;
	}
}
// 动画
@keyframes updown {
	0% {
		top: 0px;
	}
	50% {
		top: 10px;
	}
	100% {
		top: 0px;
	}
}
// 动画
@keyframes jt {
	0% {
		top: 0px;
	}
	50% {
		top: 5px;
	}
	100% {
		top: 0px;
	}
}
</style>