Kirin_mp/pages/product/index.vue

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view>
		<view class="product_image_box" v-if="!productInfo.photo_list.length">
			<image class="product_image" :src="sku_thumb"></image>
		</view>
		<view class="product_image_box" v-if="productInfo.photo_list.length">
			<swiper class="photo_list" :autoplay="true">
				<swiper-item v-for="(item,index) in productInfo.photo_list" :key="index">
					<image :src="item.thumb" class="photo_image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="product_info">
			<view class="stock_price" v-if="isShowPrice">
				<view class="product_price">
					<text>￥{{productInfo.price}} </text>
					<text class="product_market">￥{{productInfo.market_price}} </text>
				</view>
			</view>
			<view class="product_name">
        <text v-if="productInfo.regiment_title" class="regiment_title">{{productInfo.regiment_title}}</text>
        <text v-if="productInfo.promo_title" class="regiment_title">{{productInfo.promo_title}}</text>
        {{productInfo.name}}
      </view>
			<view class="product_spec">
				<view class="spec_name">{{productInfo.spec}}</view>
				<view class="product_stock">剩{{productInfo.stock}}个</view>
			</view>
		</view>
		<view class="regiment_list" v-if="productInfo.regiment_list.length">
			<view class="regiment_list_title">
				<text class="title1">{{productInfo.regiment_list.length}}人正在拼单</text>
				<text class="title2" @click="openRegiment()">查看更多</text>
			</view>
			<view class="regiment">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="2000"
					:circular="true" :vertical="true" :display-multiple-items="2" easing-function="linear">
					<swiper-item v-for="item in productInfo.regiment_list" :key="index">
						<view class="swiper-item">
							<view class="username">
								<image class="user_image" :src="item.userpic"></image>
								<text class="username_text">{{item.username}}</text>
							</view>
							<view class="regiment_right">
								<button class="regiment_but" data-eventsync="true"
									@click="showSpecPopup(4,item.id)">去拼单</button>
							</view>
							<view class="regiment_center">
								<view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
								<view class="regiment_center_time">
									<view class="center_title">还剩</view>
									<uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
										:minute="remainder(item.end_time,2)"
										:second="remainder(item.end_time,3)"></uni-countdown>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="product_business" v-if="productInfo.business_info.name">
			<image class="logopic" :src="productInfo.business_info.logopic"></image>
			<view class="business_info">
				<view class="business_name">
					{{productInfo.business_info.name}}
				</view>
				<view class="business_desc">
					{{productInfo.business_info.desc}}
				</view>
			</view>
		</view>
		<view class="product_description">
			<rich-text :nodes="productInfo.description"></rich-text>
		</view>
		<view class="product_poster" v-if="productInfo.poster">
			<image class="product_image" :src="productInfo.poster" mode="widthFix"></image>
		</view>
		<view class="order_car" v-if="productInfo.regiment_type === 2">
			<navigator url="/pages/car/index" open-type="switchTab" class="to_car">
				<image src="../../static/icon/car.png" class="car_icon"></image>
			</navigator>
			<button class="show_order" data-eventsync="true"
				@click="showSpecPopup(3)">{{this.productInfo.regiment_title}}专享/{{this.productInfo.regiment_price}}</button>
			<button class="show_car" data-eventsync="true"
				@click="showSpecPopup(1)">单独购买/{{this.productInfo.price}}</button>
		</view>
		<view class="order_car" v-else-if="productInfo.regiment_type === 1">
			<navigator url="/pages/car/index" open-type="switchTab" class="to_car">
				<image src="../../static/icon/car.png" class="car_icon"></image>
			</navigator>
			<view class="show_order_regiment" @click="showSpecPopup(4)">
				<view>立即参与多人团拼单</view>
				<view class="regiment_countdown">
					<uni-countdown color="#FFFFFF" :show-day="false"
						:hour="remainder(productInfo.automatic_info.end_time,1)"
						:minute="remainder(productInfo.automatic_info.end_time,2)"
						:second="remainder(productInfo.automatic_info.end_time,3)"></uni-countdown>
				</view>
			</view>
		</view>
		<view class="order_car" v-else>
			<navigator url="/pages/car/index" open-type="switchTab" class="to_car">
				<image src="../../static/icon/car.png" class="car_icon"></image>
			</navigator>
			<button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即购买</button>
			<button class="show_car" data-eventsync="true" @click="showSpecPopup(2)">加入购物车</button>
		</view>
		<view class="to_bottom"> --- 到底了 --- </view>
		<uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF"
			@change="popupChange">
			<view class="order_info">
				<view class="custom_addr" v-if="specBtnType==1 || specBtnType==3 || specBtnType==4"
					@click="showAddrPopup()">
					<view class="contact_user">
						<text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
						<text class="contact_name">{{checkedAddr.contact_name}}</text>
						<text class="contact_phone">{{checkedAddr.contact_phone}}</text>
						<text class="contact_more"> &gt;</text>
						<text class="contact_shop">{{checkedAddr.contact_shop}}</text>
					</view>
					<view class="contact_addr">
						{{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}}
						{{checkedAddr.contact_addr}}
					</view>
				</view>
				<view class="car_item">
					<view class="box_left">
						<image class="car_image" :src="sku_thumb" mode=""></image>
					</view>
					<view class="box_right">
						<view class="car_name">{{productInfo.name}}</view>
            <view v-if="productInfo.promo_title" class="promo_title">{{productInfo.promo_title}}</view>
						<view class="stock_price">
							<view class="product_price" v-if="isShowPrice">
								<text v-if="specBtnType==1">￥{{productInfo.price}} </text>
								<text v-if="specBtnType==3 || specBtnType==4">￥{{productInfo.regiment_price}} </text>
								<text class="car_market">￥{{productInfo.market_price}}</text>
							</view>
							<view class="product_quantity_box">
								<button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
									<image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
								</button>
								<input type="number" class="product_quantity" placeholder="数量" v-model="quantity"
									@blur="changeQuantity(0)"></input>
								<button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
									<image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
								</button>
							</view>
						</view>
						<view class="product_stock">剩{{productInfo.stock}}个</view>
					</view>
				</view>
				<view class="select_sku" v-if="productInfo.product_attr.length">
					<scroll-view scroll-y="true" class="scroll_max">
						<view class="product_attr" v-for="(spec,spec_index) in productInfo.product_attr"
							:key="spec_index">
							<scroll-view scroll-y="true" class="scroll_y">
								<view class="spec_name">{{ spec.spec_name }}</view>
								<view class="arrt_list">
									<view class="arrt_option" :class="option.active?'active':''"
										v-for="(option,attr_index) in spec.attr_list" :key="attr_index"
										@click="attrChange(spec_index,attr_index)">
										<text> {{option.name}}</text> <text
											v-if="option.remark">【{{option.remark}}】</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</scroll-view>
				</view>
				<!-- 选择优惠券 -->
				<view class="to_select_coupon" v-if="specBtnType==1" @click="openCoupon()">
					<text>优惠券</text>
					<view class="coupon_deduction">{{couponUsed}}</view>
				</view>
				<view class="order_price" v-if="specBtnType==1 || specBtnType==3">合计： ￥{{priceTotal}}</view>
				<view class="order_btn">
					<button class="to_order" @click="createOrder()" v-if="specBtnType==1"
						data-eventsync="true">购买</button>
					<button class="to_car" @click="createCart()" v-if="specBtnType==2"
						data-eventsync="true">加入购物车</button>
					<button class="to_order" @click="createOrder()" v-if="specBtnType==3"
						data-eventsync="true">拼团购买</button>
					<button class="to_order" @click="createOrder()" v-if="specBtnType==4"
						data-eventsync="true">{{ productInfo.regiment_title }}购买</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="couponPopup" type="bottom" class="popup" background-color="#FFFFFF">
			<view class="popup_title">优惠券</view>
			<view class="coupon_list">
				<view class="coupon_item" v-for="(item,index) in couponList" @click="checkedCoupon(index,false)"
					:key="index">
					<view class="box_left">
						<view class="rebate" v-if="item.rebate_type == 1"> ￥{{item.rebate}}</view>
						<view class="rebate" v-if="item.rebate_type == 2"> 打 {{item.rebate}} 折</view>
						<view class="rebate" v-if="item.rebate_type == 3"> 赠 <text v-if="item.rebate_scope.length">
								{{item.rebate_scope[0].product_name}}
							</text> </view>
						<view class="std_pay"> 满{{item.std_pay}}</view>
					</view>
					<view class="box_right">
						<view class="coupon_title">
							<view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
							<view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
							<view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
						</view>
						<view class="product_scope">
							<text class="" v-if="item.type_id == 1">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
							<text class="" v-if="item.type_id == 2">全场可用</text>
							<text class="" v-if="item.type_id == 3">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
							<view class="check_label">
								<view class="isstd" v-if="!item.is_std">未达标</view>
								<image class="checkbox" v-if="item.is_std"
									:src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'">
								</image>
							</view>
						</view>
						<view class="coupon_info">
							<view class="coupon_exp">{{item.exp_time}} 到期</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
			<view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理
				</navigator>
			</view>
			<view class="addr_list">
				<view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
					<view class="radio_label">
						<image class="radio_icon"
							:src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'">
						</image>
					</view>
					<view class="contact_user">
						<text class="contact_name">{{item.contact_name}}</text>
						<text class="contact_phone">{{item.contact_phone}}</text>
						<text class="contact_default" v-if="item.is_default">默认</text>
						<text class="contact_shop">{{item.contact_shop}}</text>
					</view>
					<view class="contact_addr">
						{{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
					</view>
				</view>
			</view>
			<view class="create_box">
				<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
			</view>
		</uni-popup>
		<uni-popup ref="addFollow" type="center" class="center_popup" @change="popupChange">
			<view class="add_follow">
				<view class="close_area"><button class="close_btn" @click="closeAddFollow()">关闭</button></view>
				<view class="info_alter">
					<text v-if="follow_linkurl">点击二维码添加客服</text>
					<text v-if="!follow_linkurl">长按二维码添加客服</text>
				</view>
				<view class="qr_code_area" @click="followLinkurl">
					<image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress>
					</image>
				</view>
				<view class="rule_info">
					<view class="">报单规则：</view>
					<view class="">1、预约报单需要添加客服人员</view>
					<view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
					<view class="">3、开始预约报单</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="regiment" type="bottom" class="popup" background-color="#FFFFFF">
			<view class="popup_title">可参与的拼单</view>
			<view class="regiment_popup_list">
				<view class="regiment_popup_item" v-for="(item,index) in productInfo.regiment_list"
					@click="checkedCoupon(index,false)" :key="index">
					<view class="username">
						<image class="user_image" :src="item.userpic"></image>
						<text class="username_text">{{item.username}}</text>
					</view>
					<view class="regiment_right">
						<button class="regiment_but" data-eventsync="true"
							@click="showSpecPopup(4,item.id)">去拼单</button>
					</view>
					<view class="regiment_center">
						<view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
						<view class="regiment_center_time">
							<view class="center_title">还剩</view>
							<uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
								:minute="remainder(item.end_time,2)"
								:second="remainder(item.end_time,3)"></uni-countdown>
						</view>

					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false, // 使用Popup组件时,阻止禁止滚动穿透
				productInfo: {
					id: 0,
					name: "",
					price: "0.00",
					market_price: "0.00",
					spec: "",
					stock: 0,
					thumb: "",
					poster: "",
					description: "",
					regiment_title: '',
          promo_title: '',
					automatic_info: {
						end_time: '',
					},
					regiment_active: [],
					business_info: {
						name: "",
						logopic: "",
						desc: "",
					},
					regiment_price: "0.00",
					regiment_quota: 0,
					regiment_list: [],
					product_attr: [],
					photo_list: [],
					product_sku: [],
					regiment_type: 0,
					regiment_number: 0,
				},
				requestParam: {
					id: 0,
				},
				// 数量
				quantity: 1,
				// 总价
				priceTotal: "0.00",
				// 优惠券列表
				couponList: [],
				// 总价
				priceTotal: '0.00',
				// 优惠券使用
				couponUsed: "去使用 >",
				// 扣减金额
				rebatePrice: 0.00,
				// 已经选择的优惠券ID
				customCoupon: 0,
				// 规格选择按钮类型
				specBtnType: 1, // 1预约。2购物车。3拼团
				// 地址列表
				addrList: [],
				// 已选地址
				checkedAddr: {
					id: 0,
					contact_name: "",
					contact_shop: "",
					contact_phone: "",
					contact_province: "",
					contact_city: "",
					contact_area: "",
					contact_addr: "",
					is_default: 0,
				},
				// 客服二维码
				followQrcode: "",
				// 二维码链接
				follow_linkurl: "",
				// 是否登录状态
				isShowPrice: false,
				// 选择的skuid
				sku_id: 0,
				sku_thumb: "",
				regiment_id: 0,
				specBtnType:0,
			}
		},
		onLoad(param) {
			// 接受路由参数，产品ID
			this.requestParam.id = param.product_id;
			var that = this;
			// 监听地址变动
			uni.$on('addr_list_change', function(data) {
				// 地址列表
				that.addrList = data.list;
			});
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShareAppMessage(obj) {
			return {
				title: this.productInfo.name,
				path: '/pages/product/index?product_id=' + this.productInfo.id
			}
		},
		onShow() {
			// 没有添加客服就不显示
			this.isShowPrice = this.$checkAccess.checkShowPrice();
			// 如果有添加二维码的话，获取客户信息
			if (this.$checkAccess.getFollowQrcode()) {
				// 判断数据
				this.$http.request('api/custom/get_info').then((callback) => {
					if (callback.code == 'success') {
						if (!callback.data.userpic) callback.data.userpic = "../../static/icon/doctor.png";
						// 存储登录标识
						uni.setStorageSync('userInfo', callback.data);
					}
				});
			}
			// 如果存在产品ID的话
			if (this.requestParam.id > 0) {
				// 请求详情
				this.$http.request('api/product/get_detail', this.requestParam).then((re) => {
					// 成功渲染数据
					if (re.code == 'success') {
						// 刷新数据
						this.productInfo = re.data;
						if (this.productInfo.automatic_info.id) {
							this.regiment_id = this.productInfo.automatic_info.id
						}
						//设置默认sku
						this.sku_id = 0;
						// 显示图片
						this.sku_thumb = this.productInfo.thumb;
					} else {
						if (re.code != 'no_login') {
							uni.showModal({
								content: re.msg,
								showCancel: false,
							})
						}
					}
				});
			}
		},
		methods: {
			//计算剩余时间
			remainder(end_time, type) {
				const now = Math.floor(Date.now() / 1000);
				const distance = end_time - now;

				if (distance < 0) {
					return 0
				}
				const hours = Math.floor(distance / (60 * 60));
				const minutes = Math.floor((distance % (60 * 60)) / (60));
				const seconds = Math.floor((distance % (60)));
				if (type === 1) {
					return hours
				}
				if (type === 2) {
					return minutes
				}
				if (type === 3) {
					return seconds
				}
			},
			// 地址弹出层
			showAddrPopup() {
				// 显示下单弹出层
				this.$refs.addrPopup.open('bottom');
			},
			// 规格弹出层
			showSpecPopup(type, regiment_id = 0) {
				// 登录提示
				if (!this.$checkAccess.alterLogin()) return;
				// 判断是否弹出
				//if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
				if (regiment_id) {
					this.regiment_id = regiment_id
				}
				// 显示类型，1预约，2购物车,3拼团
				this.specBtnType = type;
				// 恢复优惠券使用按钮
				this.couponUsed = "去使用 >";
				// 恢复扣减金额
				this.rebatePrice = 0.00;
				// 选择优惠券重置
				this.customCoupon = 0;
				// 计算价格
				this.priceHandler();
				// 显示下单弹出层
				this.$refs.specPopup.open('bottom');
				// 结果
				this.$http.request('api/custom_coupon/get_checked', this.requestParam).then((re) => {
					if (re.code == 'success') {
						// 赋值
						this.couponList = re.data;
						// 优惠券是否可用
						this.checkCoupon();
					}
				});
				// 地址列表
				this.getAddrList();
				//只有一组sku时是否下架
				if (this.productInfo.product_sku.length === 1) {
					this.defaultSkuStatus();
				}
			},
			// 拼团列表弹出层
			openRegiment() {
				this.$refs.regiment.open('bottom')
			},
			// 优惠券弹出层
			openCoupon() {
				this.$refs.couponPopup.open('bottom')
			},
			// 数量调整
			changeQuantity(number) {
				// 如果不是0.表示两侧按钮点击，0表示输入的修改
				if (number != 0) {
					// 计算个数
					this.quantity = parseInt(this.quantity) + parseInt(number);
				}
				// 如果大于库存设置为库存
				if (this.quantity > this.productInfo.stock) {
					this.quantity = this.productInfo.stock;
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
				}
				if ((this.specBtnType === 3 || this.specBtnType == 4) && this.quantity > this.productInfo.regiment_quota) {
					this.quantity = this.productInfo.regiment_quota;
					uni.showToast({
						title: "拼团限购" + this.productInfo.regiment_quota + "份",
						icon: "none"
					})
				}
				// 如果小于1.设置为1
				if (this.quantity < 1) {
					this.quantity = 1;
					uni.showToast({
						title: "数量不可以小于0",
						icon: "none"
					})
				}
				// 计算价格
				this.priceHandler();
				// 优惠券是否可用
				this.checkCoupon();
			},
			// 创建订单
			createOrder() {
				// 不可预约
				if (!this.$checkAccess.alertCity()) return;
				// 如果有SKU，但是没有选择
				if (this.productInfo.product_sku.length && !this.sku_id) {
					uni.showToast({
						title: "请选择规格",
						icon: "none"
					})
					return;
				}
				// 下单数量小于0
				if (this.quantity < 1) {
					uni.showToast({
						title: "至少购买1个",
						icon: "none"
					})
					return;
				}
				// 如果大于库存设置为库存
				if (this.productInfo.stock < 1) {
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
					return;
				}
				// 如果大于库存设置为库存
				if (this.productInfo.stock < this.quantity) {
					this.quantity = this.productInfo.stock;
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
					return;
				}
				if (this.specBtnType === 3 || this.specBtnType === 4) {
					if (this.quantity > this.productInfo.regiment_quota) {
						this.quantity = this.productInfo.regiment_quota;
						uni.showToast({
							title: "拼团限购" + this.productInfo.regiment_quota + "份",
							icon: "none"
						})
						return;
					}
					const timestamp = Math.round(new Date().getTime() / 1000).toString();
					if (timestamp > this.productInfo.regiment_active.end_time) {
						uni.showToast({
							title: "拼团活动已结束",
							icon: "none"
						})
						return;
					}
					if (this.specBtnType === 4 && timestamp > this.productInfo.automatic_info.end_time) {
						uni.showToast({
							title: "该团已过期",
							icon: "none"
						})
						return;
					}
				}
				// 地址未填
				if (!this.checkedAddr.id) {
					this.showAddrPopup();
					return;
				}
				//需要下单的产品信息参数传给completion页面
				let productInfo = [{
					name: this.productInfo.name,
					spec: this.productInfo.spec,
					price: this.productInfo.price
				}]
				//转成json字符串
				productInfo = JSON.stringify(productInfo);
				//加密json格式成编码数组
				let encodedArray = encodeURIComponent(productInfo);
				// 需要下单的产品列表
				let productList = [{
					product_id: this.productInfo.id,
					buy_num: this.quantity,
					product_skuid: this.sku_id
				}];
				// 转成json字符串传输
				productList = JSON.stringify(productList);
				if (this.specBtnType === 3 || this.specBtnType === 4) { //拼团
					// 请求接口
					this.$http.request('api/orders/create_regiment', {
						"product_list": productList,
						"custom_coupon_id": this.customCoupon,
						'addr_id': this.checkedAddr.id,
						'btn_type': this.specBtnType,
						'regiment_id': this.regiment_id,
						'regiment_active_id': this.productInfo.regiment_active_id
					}, 'post').then((re) => {
						// 判断结果
						if (re.code == 'success') {
							// 处理结果
							this.productInfo.stock = this.productInfo.stock - this.quantity;
							// 关闭弹窗
							this.$refs.specPopup.close();
              //订单详情
              let orderInfo = re.data;
              orderInfo = JSON.stringify(orderInfo)
              let params = encodeURIComponent(orderInfo);
              // 跳转到确认支付页面
              uni.navigateTo({url:`/pages/orders/confirm?params=${params}`});
						} else {
							uni.showModal({
								title: re.msg,
								showCancel: false
							});
						}
					});
				} else {
					// 请求接口
					this.$http.request('api/orders/create', {
						"product_list": productList,
						"custom_coupon_id": this.customCoupon,
						'addr_id': this.checkedAddr.id
					}, 'post').then((re) => {
						// 判断结果
						if (re.code == 'success') {
							// 处理结果
							this.productInfo.stock = this.productInfo.stock - this.quantity;
							// 关闭弹窗
							this.$refs.specPopup.close();
              //订单详情
              let orderInfo = re.data;
              orderInfo = JSON.stringify(orderInfo)
              let params = encodeURIComponent(orderInfo);
              // 跳转到确认支付页面
              uni.navigateTo({url:`/pages/orders/confirm?params=${params}`});
						} else {
							uni.showModal({
								title: re.msg,
								showCancel: false
							});
						}
					});
				}
			},
			// 加入购物车
			createCart() {
				// 不可预约
				if (!this.$checkAccess.alertCity()) return;
				// 如果有SKU，但是没有选择
				if (this.productInfo.product_sku.length && !this.sku_id) {
					uni.showToast({
						title: "请选择规格",
						icon: "none"
					})
					return;
				}
				// 下单数量小于0
				if (this.quantity < 1) {
					uni.showToast({
						title: "至少购买1个"
					})
					return;
				}
				// 如果库存不足
				if (this.productInfo.stock < 1) {
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
					return;
				}
				// 如果大于库存设置为库存
				if (this.productInfo.stock < this.quantity) {
					this.quantity = this.productInfo.stock;
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
					return;
				}
				// 商品信息
				let data = {
					product_id: this.productInfo.id,
					buy_num: this.quantity,
					skuid: this.sku_id
				};
				// 请求接口
				this.$http.request('api/shop_cart/add', data, 'post').then((re) => {
					// 判断结果
					if (re.code == 'success') {
						// 跳转到订单列表
						uni.showToast({
							icon: "success",
							title: "加入购物车成功"
						})
						// 关闭结果
						this.$refs.specPopup.close();
					} else {
						// 跳转到订单列表
						uni.showToast({
							icon: "error",
							title: "加入购物车失败"
						})
					}
				});
			},
			// 检查优惠券是否可用
			checkCoupon() {
				// 如果存在的话
				if (this.couponList.length) {
					// 推荐使用的优惠券
					let oldrebatePrice = 0.00;
					let hasIsStd = false;
					// 循环优惠券
					for (let i in this.couponList) {
						/* 商品的总价格，决定是否可用 */
						let totalPrice = 0.00;
						// 如果是商品券
						if (this.couponList[i].type_id == 1) {
							// 判断商品是不是在商品范围
							let isScope = false;
							// 循环商品范围
							for (let k in this.couponList[i].product_scope) {
								// 如果存在商品范围
								if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
							}
							// 范围内的做计算
							if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
								.price, this.quantity));
							// 是否在可用范围
							this.couponList[i].is_scope = isScope;
							// 排除券
						} else if (this.couponList[i].type_id == 3) {
							// 判断商品是不是在商品范围
							let isScope = true;
							// 循环排除范围
							for (let k in this.couponList[i].product_exclude) {
								// 如果在排除范围
								if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope =
									false;
							}
							// 范围内的做计算
							if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
								.price, this.quantity));
							// 是否在可用范围
							this.couponList[i].is_scope = isScope;
							// 店铺券
						} else {
							// 店铺券
							totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this
								.quantity));
							// 是否在可用范围
							this.couponList[i].is_scope = true;
						}
						// 判断价格到不到限额
						this.couponList[i].is_std = parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this
							.couponList[i].std_pay, 1).toFixed());
						// 如果不可用的话，该项已选择则不选
						if (!this.couponList[i].is_std && this.couponList[i].checked) this.checkedCoupon(i, false);
						// 如果可用的话，并且优惠券没有选中
						if (this.couponList[i].is_std) {
							// 优惠金额
							let newRebatePrice = 0.00;
							// 计算满减价格
							if (this.couponList[i].rebate_type == 1) {
								// 计算扣减数据
								newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
							}
							// 计算折扣价格
							if (this.couponList[i].rebate_type == 2) {
								// 折扣
								newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
								// 减数
								newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
							}
							// 判断哪个比较优惠
							if (parseFloat(oldrebatePrice.toFixed(2)) <= parseFloat(newRebatePrice.toFixed(2))) {
								// 覆盖价格
								oldrebatePrice = parseFloat(newRebatePrice.toFixed(2));
								// 如果选中的是自己，不需要取消
								if (this.customCoupon == this.couponList[i].id && this.couponList[i].checked) {
									// 选中
									this.checkedCoupon(i, true);
								} else {
									// 选中
									this.checkedCoupon(i, false);
								}
							}
						}
					}
				}
			},
			// 选择优惠券
			checkedCoupon(index, save_checked = false) {
				// 单个设置选中/未选（如果保持选中，则不变）
				this.couponList[index].checked = save_checked ? this.couponList[index].checked : (this.couponList[index]
					.checked ? 0 : 1);
				// 循环处理
				for (let i in this.couponList) {
					// 有未选的就不做全选
					if (index != i) this.couponList[i].checked = 0;
				}
				// 如果未选中，提示可用
				if (!this.couponList[index].checked) this.couponUsed = '去使用 >';
				// 已经选择的优惠券ID
				this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
				// 计算扣减
				this.couponRebate();
				// 计算价格
				this.priceHandler();
				// 关闭弹窗
				this.$refs.couponPopup.close();
			},
			// 计算价格
			priceHandler() {
				// 总价格
				let priceTotal = 0
				if (this.specBtnType == 3) {
					priceTotal = this.$decimal.mul(this.productInfo.regiment_price, this.quantity);
				} else {
					priceTotal = this.$decimal.mul(this.productInfo.price, this.quantity);
				}
				// 扣减数据
				priceTotal = priceTotal.sub(this.rebatePrice);
				// 小数点保留
				this.priceTotal = priceTotal.toFixed(2);
			},
			// 计算优惠券扣减
			couponRebate() {
				// 默认扣减0
				this.rebatePrice = 0;
				// 循环优惠券
				for (let i in this.couponList) {
					// 判断是否选中
					if (this.couponList[i].id != this.customCoupon) {
						// 未选择的不管
						continue;
					}
					/* 商品的总价格，决定是否可用 */
					var totalPrice = 0.00;
					// 如果是商品券
					if (this.couponList[i].type_id == 1) {
						// 判断商品是不是在商品范围
						var isScope = false;
						// 循环商品范围
						for (let k in this.couponList[i].product_scope) {
							// 如果存在商品范围
							if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
						}
						// 范围内的做计算
						if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
						// 排除券
					} else if (this.couponList[i].type_id == 3) {
						// 判断商品是不是在商品范围
						var isScope = true;
						// 循环排除范围
						for (let k in this.couponList[i].product_exclude) {
							// 如果存在排除范围
							if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope = false;
						}
						// 范围内的做计算
						if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
						// 店铺券
					} else {
						// 折扣券以及满减券的话，计算价格
						totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
					}
					// 如果是可以用的话
					if (parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1)
							.toFixed())) {
						// 扣减金额
						let rebatePrice = this.$decimal.mul(1, 0);
						// 满减
						if (this.couponList[i].rebate_type == 1) {
							// 计算扣减数据
							rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						// 折扣
						if (this.couponList[i].rebate_type == 2) {
							// 折扣
							rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
							// 减数
							rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						//  赠品
						if (this.couponList[i].rebate_type == 3) {
							// 替换文字
							this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i]
								.rebate_scope[0].product_name : "");
						}
						// 小数点保留
						this.rebatePrice = rebatePrice.toFixed(2);
					}
				}
			},
			popupChange(e) {
				// 禁止滚动穿透
				this.show = e.show
			},
			// 选择地址
			checkedAddrItem(item) {
				this.checkedAddr = item;
				this.$refs.addrPopup.close();
			},
			getAddrList() {
				// 判断数据
				this.$http.request('api/custom_addr/get_list').then((callback) => {
					// 获取成功
					if (callback.code == 'success') {
						this.addrList = callback.data;
						// 如果有的话
						if (this.addrList.length) {
							// 获取默认的
							for (let i in this.addrList) {
								// 如果是默认的
								if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
							}
							// 如果没有默认的话
							if (!this.checkedAddr.id) {
								this.checkedAddr = this.addrList[this.addrList.length - 1];
							}
						}
					}
				});
			},
			// 客服显示
			openAddFollow() {
				// 返回结果
				this.followQrcode = this.$checkAccess.getFollowQrcode();
				// 返回结果
				this.follow_linkurl = this.$checkAccess.getFollowLinkUrl();
				// 有图才展示
				if (this.followQrcode) this.$refs.addFollow.open('center');
			},
			closeAddFollow() {
				this.$refs.addFollow.close();
			},
			// 属性变更
			attrChange(spec_index, attr_index) {
				// 判断当前属性是否选择。选择的跳过
				if (this.productInfo.product_attr[spec_index].attr_list[attr_index].active) return;
				// 先记录当前规格下所有属性原来的active状态
				let originalActiveStates = {};
				for (let i in this.productInfo.product_attr[spec_index].attr_list) {
					originalActiveStates[i] = this.productInfo.product_attr[spec_index].attr_list[i].active;
				}
				//循环规格下的属性
				for (let i in this.productInfo.product_attr[spec_index].attr_list) {
					// 全部改为未选中
					this.productInfo.product_attr[spec_index].attr_list[i].active = 0;
				}
				//选择选项
				this.productInfo.product_attr[spec_index].attr_list[attr_index].active = 1;
				//选中的规格
				var attr_ids = [];
				// 循环规格
				for (let i in this.productInfo.product_attr) {
					// 再循环属性
					for (let j in this.productInfo.product_attr[i].attr_list) {
						// 如果选中的
						if (this.productInfo.product_attr[i].attr_list[j].active) {
							attr_ids.push(this.productInfo.product_attr[i].attr_list[j].id);
						}
					}
				}
				// 转成字符串
				var attrids = attr_ids.join(",");
				// 如果选项不足的话
				if (attr_ids.length != this.productInfo.product_attr.length) return;
				// 如果当前点击的属性对应的SKU状态为未下架（初始化为0）
				let currentSKUStatus = 0;
				// 匹配规格
				if (this.productInfo.product_sku.length) {
					// 是否有对应的SKU
					let haveSku = 0;
					// 循环sku
					for (let i in this.productInfo.product_sku) {
						// 如果sku不匹配
						if (this.productInfo.product_sku[i].attr_ids != attrids) continue;
						// 设置有SKU
						haveSku = 1;
						// 获取当前匹配到的SKU的状态
						currentSKUStatus = this.productInfo.product_sku[i].status;
						// 如果商品已经下架（status等于1），则恢复当前规格下所有属性原来的active状态
						if (currentSKUStatus === 1) {
							uni.showToast({
								title: "该规格已下架",
								icon: "none"
							});
							for (let k in originalActiveStates) {
								this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
							}
							continue;
						}
						// 如果商品没有库存
						if (this.productInfo.product_sku[i].stock <= 0) {
							uni.showToast({
								title: "该规格库存不足",
								icon: "none"
							});
							for (let k in originalActiveStates) {
								this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
							}
							continue;
						}
						// 产品价格修改
						this.productInfo.price = this.productInfo.product_sku[i].price;
						// 产品规格修改
						this.productInfo.spec = this.productInfo.product_sku[i].attr_names;
						// 产品库存
						this.productInfo.stock = this.productInfo.product_sku[i].stock;
						// 产品SKU
						this.sku_id = this.productInfo.product_sku[i].id;
						// 有图替换，没图使用产品原缩略图
						this.sku_thumb = this.productInfo.product_sku[i].sku_thumb ? this.productInfo.product_sku[i]
							.sku_thumb : this.productInfo.thumb;
						// 如果有图册
						if (this.productInfo.photo_list.length) {
							this.productInfo.photo_list[0].thumb = this.sku_thumb;
						}
						// 计算价格
						this.priceHandler();
						// 优惠券是否可用
						this.checkCoupon();
					}
					// 如果没有对应的SKU
					if (!haveSku) {
						uni.showToast({
							title: "该规格已下架",
							icon: "none"
						});
						for (let k in originalActiveStates) {
							this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
						}
					}
				}
			},
			//只有一组sku默认规格是否已下架
			defaultSkuStatus() {
				if (this.productInfo.product_sku.length) {
					if (this.productInfo.product_sku[0].status === 1) {
						uni.showToast({
							title: "该规格已下架",
							icon: "none",
						});
						this.productInfo.stock = 0;
						var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
						// 循环规格列表
						for (let i in this.productInfo.product_attr) {
							// 再循环属性
							for (let j in this.productInfo.product_attr[i].attr_list) {
								// 如果不等于id
								if (attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '')) {
									// 取消选中
									this.productInfo.product_attr[i].attr_list[j].active = 0;
								}
							}
						}
						return;
					}
				}
			},
			// 去往webview
			followLinkurl() {
				// 获取登录标识
				let userInfo = uni.getStorageSync('userInfo');
				// 如果不存在的话
				if (!userInfo) return '';
				// 未添加好友
				if (!userInfo.follow_linkurl) return '';
				// 获取Url
				let url = userInfo.follow_linkurl;
				// 没有路径，不跳转
				if (!url) return;
				// 判断是不是小程序链接
				if (url.includes('http')) {
					// 转码
					let link_url = encodeURIComponent(url);
					// 跳转到webview
					uni.redirectTo({
						url: `/pages/webview/index?link_url=${link_url}`
					})
				} else {
					// 跳转到webview
					uni.navigateTo({
						url: url
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.product_image_box {
		display: block;
		overflow: hidden;
		background: #FFFFFF;
		margin: 10rpx auto;

		.product_image {
			display: block;
			margin: 0 auto;
			width: 750rpx;
			height: 750rpx;
		}

		.photo_list {
			display: block;
			width: 750rpx;
			height: 750rpx;
			line-height: 750rpx;
			text-align: center;

			.photo_image {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}

	.product_info {
		display: block;
		background: #FFFFFF;
		margin: 10rpx 0rpx;
		padding: 10px 10px;

		.product_name {
			max-height: 80rpx;
			font-size: 30rpx;
			line-height: 40rpx;
			overflow: hidden;
			padding: 10rpx 0rpx;

			.regiment_title {
				background-color: red;
				color: #F9F9F9;
			}
		}

		.product_spec {
			color: #999999;
			font-size: 24rpx;
			line-height: 30rpx;
			overflow: hidden;

			.spec_name {
				float: left;
			}

			.product_stock {
				float: right;
			}
		}

		.stock_price {
			font-size: 20rpx;
			overflow: hidden;
			margin-top: 10rpx;
			line-height: 30rpx;

			.product_price {
				float: left;
				color: red;
				font-size: 38rpx;
				line-height: 60rpx;

				.product_market {
					font-size: 24rpx;
					color: #999999;
					line-height: 30rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}
		}
	}

	// 描述简介
	.product_business {
		display: block;
		overflow: hidden;
		padding: 20rpx 20rpx;
		margin: 10rpx auto;
		background: #FFFFFF;

		.logopic {
			float: left;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.business_info {
			float: left;
			width: 600rpx;
			overflow: hidden;

			.business_name {
				font-size: 26rpx;
				line-height: 40rpx;
			}

			.business_desc {
				color: #999999;
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}
	}

	.product_description {
		width: 700rpx;
		display: block;
		overflow: hidden;
		background: #FFFFFF;
		min-height: 600rpx;
		font-size: 26rpx;
		margin: 0rpx auto;
		line-height: 50rpx;
		padding: 10rpx 25rpx;

		[alt] {
			//web_view图片
			max-width: 100%; // 避免图片超宽
			vertical-align: bottom; // 避免图片之间间隙
		}
	}

	.product_poster {
		display: block;
		overflow: hidden;
		padding: 10rpx 0rpx;
		margin: 10rpx auto;
		background: #FFFFFF;

		.product_image {
			width: 750rpx;
			display: block;
		}
	}

	.order_car {
		left: 0rpx;
		width: 750rpx;
		height: 140rpx;
		display: block;
		position: fixed;
		padding-top: 20rpx;
		background: #FFFFFF;
		bottom: var(--window-bottom);
		border-top: 2rpx solid #DDDDDD;

		.show_order {
			float: right;
			width: 280rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			margin-right: 35rpx;
			background-color: #E03519;
			border-radius: 0rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}

		.show_order_regiment {
			float: right;
			width: 280rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 25rpx;
			overflow: hidden;
			padding: 0rpx 0rpx;
			text-align: center;
			margin-right: 35rpx;
			background-color: #E03519;
			border-radius: 20rpx;

			.regiment_countdown {
				padding-left: 50rpx;
			}
		}

		.show_car {
			float: right;
			width: 280rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			background-color: #F59A23;
			border-radius: 0rpx;
			border-top-left-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}

		.to_car {
			float: left;
			width: 100rpx;
			height: 60rpx;
			display: block;
			text-align: center;
			margin-left: 35rpx;
			padding-top: 10rpx;

			.car_icon {
				float: left;
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
		}
	}

	.popup {
		overflow: hidden;

		.popup_title {
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0rpx 20rpx;
			border-bottom: 10rpx solid #F8F8F8;

			.to_addr_page {
				float: right;
				color: #F59A23;
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 26rpx;
				padding: 0rpx 10rpx;
			}
		}

		.order_info {
			overflow: hidden;
			background: #FFFFFF;

			.custom_addr {
				width: 680rpx;
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				margin: 0rpx auto;
				line-height: 40rpx;
				padding: 20rpx 35rpx;
				background-color: #FFFFFF;
				border-bottom: 2rpx solid #dddddd;

				.contact_user {
					display: block;
					font-size: 24rpx;
					line-height: 50rpx;

					.contact_none {
						font-size: 26rpx;
						font-weight: bold;
					}

					.contact_name {
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}

					.contact_shop {
						float: right;
						font-size: 26rpx;
						margin-right: 16rpx;
					}

					.contact_more {
						float: right;
						font-size: 40rpx;
						font-weight: bold;
					}
				}

				.contact_addr {
					width: 620rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}

			.car_item {
				height: 200rpx;
				display: block;
				background: #FFFFFF;
				margin: 20rpx auto;

				.box_left {
					float: left;
					width: 160rpx;
					height: 200rpx;
					margin-left: 35rpx;

					.car_image {
						width: 160rpx;
						height: 160rpx;
						margin: 20rpx 0rpx;
						border-radius: 5rpx;
					}
				}

				.box_right {
					float: left;
					width: 485rpx;
					margin-left: 35rpx;
					padding-top: 20rpx;

					.car_name {
						max-height: 80rpx;
						font-size: 30rpx;
						line-height: 40rpx;
						overflow: hidden;
						padding: 0rpx 0rpx;
					}
          .promo_title{
            max-height: 80rpx;
            font-size: 20rpx;
            line-height: 40rpx;
            overflow: hidden;
            padding: 0rpx 0rpx;
            color: #dd524d;
          }
					.car_spec {
						color: #999999;
						font-size: 24rpx;
						line-height: 30rpx;
						padding: 0rpx 0rpx;
					}

					.stock_price {
						width: 485rpx;
						color: #dddddd;
						font-size: 20rpx;
						overflow: hidden;
						margin-top: 10rpx;
						line-height: 30rpx;

						.product_price {
							float: left;
							color: red;
							font-size: 30rpx;
							line-height: 60rpx;

							.car_market {
								font-size: 24rpx;
								color: #999999;
								line-height: 30rpx;
								vertical-align: middle;
								text-decoration: line-through;
							}
						}

						.product_quantity_box {
							float: right;
							color: #333333;
							overflow: hidden;
							font-size: 24rpx;
							margin-top: 10rpx;
							text-align: center;

							.product_quantity_sub {
								float: left;
								border: none;
								height: 36rpx;
								background: none;
								text-align: center;
								line-height: 36rpx;
								padding: 10rpx 10rpx;

								.sub_icon {
									width: 22rpx;
									height: 22rpx;
									display: block;
								}
							}

							.product_quantity_sub::after {
								border: none;
								background: none;
							}

							.product_quantity {
								float: left;
								width: 100rpx;
								height: 36rpx;
								font-size: 24rpx;
								min-height: 36rpx;
								line-height: 36rpx;
								padding: 0rpx 0rpx;
								border-radius: 8rpx;
								border: 2rpx solid #dddddd;
							}

							.product_quantity_add {
								float: left;
								border: none;
								height: 36rpx;
								background: none;
								text-align: center;
								padding: 10rpx 10rpx;
								line-height: 36rpx;

								.add_icon {
									width: 22rpx;
									height: 22rpx;
									display: block;
								}
							}

							.product_quantity_add::after {
								border: none;
								background: none;
							}
						}
					}

					.product_stock {
						font-size: 20rpx;
						line-height: 60rpx;
					}
				}
			}

			.select_sku {
				font-size: 28rpx;
				padding: 20rpx 35rpx;
				margin-bottom: 10rpx;

				.scroll_max {
					height: 440rpx;

					.product_attr {
						display: block;
						overflow: hidden;
						margin-bottom: 20rpx;

						.spec_name {
							display: block;
							height: 40rpx;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.arrt_list {
							display: block;
							overflow: hidden;
							background-color: #F5F5F5;

							.arrt_option {
								float: left;
								font-size: 28rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 6rpx;
								padding: 10rpx 20rpx;
								margin: 10rpx 0rpx;
								margin-right: 20rpx;
								background-color: #EEEEEE;
							}

							.arrt_option.active {
								color: #FFFFFF;
								background-color: #fE6000;
							}
						}
					}
				}
			}

			.to_select_coupon {
				font-size: 28rpx;
				padding: 10rpx 35rpx;
				margin-bottom: 10rpx;

				.coupon_deduction {
					color: red;
					float: right;
				}
			}

			.order_price {
				font-size: 28rpx;
				text-align: right;
				margin: 0rpx 35rpx;
				padding: 10rpx 0rpx;
				border-top: 2rpx solid #DDDDDD;

				.coupon_deduction {
					color: red;
					float: right;
				}
			}

			.order_btn {
				width: 700rpx;
				height: 100rpx;
				display: block;
				margin: 0 auto;
				margin-top: 20rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;

				.to_car {
					color: #FFFFFF;
					float: right;
					width: 700rpx;
					height: 80rpx;
					display: block;
					overflow: hidden;
					font-size: 30rpx;
					line-height: 80rpx;
					padding: 0rpx 0rpx;
					border-radius: 40rpx;
					border: 0rpx solid transparent;
					background-color: #F59A23;
				}

				.to_car::after {
					border: 0rpx solid transparent;
				}

				.to_order {
					color: #FFFFFF;
					float: right;
					width: 700rpx;
					height: 80rpx;
					display: block;
					font-size: 30rpx;
					overflow: hidden;
					line-height: 80rpx;
					padding: 0rpx 0rpx;
					border-radius: 40rpx;
					background-color: #E03519;
					border: 0rpx solid transparent;
				}

				.to_order::after {
					border: 0rpx solid transparent;
				}
			}
		}

		.coupon_list {
			display: block;
			overflow: hidden;
			min-height: 600rpx;
			margin: 10rpx auto;
			background: #FFFFFF;
			padding-bottom: 50rpx;

			.coupon_item {
				height: 200rpx;
				display: block;
				margin: 10rpx auto;
				border-bottom: 2rpx solid #DDDDDD;

				.box_left {
					float: left;
					width: 160rpx;
					height: 160rpx;
					font-size: 20rpx;
					text-align: center;
					margin-left: 35rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					background: pink;

					.rebate {
						width: 120rpx;
						height: 60rpx;
						margin: 0rpx auto;
						line-height: 60rpx;
						margin-top: 20rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.box_right {
					float: left;
					width: 485rpx;
					margin-left: 35rpx;
					padding-top: 20rpx;

					.coupon_title {
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;

						.coupon_name {
							float: left;
							height: 40rpx;
							width: 380rpx;
						}

						.coupon_status {
							width: 85rpx;
							float: right;
							color: #999999;
							font-size: 24rpx;
						}
					}

					.product_scope {
						width: 485rpx;
						height: 80rpx;
						color: #999999;
						font-size: 24rpx;
						overflow: hidden;
						line-height: 80rpx;

						.check_label {
							float: right;
							display: block;
							overflow: hidden;
							padding: 20rpx 20rpx;

							.isstd {
								line-height: 40rpx;
							}

							.checkbox {
								float: right;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.coupon_info {
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;

						.coupon_exp {
							float: left;
							font-size: 20rpx;
						}
					}
				}
			}

			.coupon_item:last-child {
				border-bottom: none;
			}
		}

		.addr_list {
			width: 730rpx;
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			min-height: 500rpx;

			.addr_item {
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				line-height: 40rpx;
				padding: 15rpx 10rpx;
				border-radius: 15rpx;
				border-bottom: 2rpx solid #dddddd;

				.radio_label {
					width: 40rpx;
					float: left;
					height: 50rpx;
					padding-top: 30rpx;
					margin-right: 20rpx;

					.radio_icon {
						float: left;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.contact_user {
					float: left;
					width: 640rpx;
					display: block;
					height: 50rpx;
					font-size: 24rpx;
					line-height: 50rpx;

					.contact_name {
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}

					.contact_default {
						color: #F59A23;
						font-size: 20rpx;
						margin-left: 16rpx;
						border: 1rpx solid #F59A23;
					}

					.contact_shop {
						float: right;
						font-size: 26rpx;
						margin-right: 16rpx;
					}
				}

				.contact_addr {
					float: left;
					width: 640rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}
		}

		.create_box {
			height: 140rpx;
			display: block;

			.create_addr {
				width: 700rpx;
				height: 80rpx;
				display: block;
				color: #FFFFFF;
				font-size: 30rpx;
				overflow: hidden;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				text-align: center;
				margin: 0rpx auto;
				margin-top: 20rpx;
				border-radius: 40rpx;
				background-color: #E03519;
			}
		}

		.regiment_popup_list {
			display: block;
			overflow: hidden;
			min-height: 600rpx;
			margin: 10rpx auto;
			background: #FFFFFF;
			padding-bottom: 50rpx;

			.regiment_popup_item {
				height: 100rpx;
				display: block;
				margin: 10rpx auto;
				border-bottom: 2rpx solid #DDDDDD;

				.username {
					float: left;
					padding-left: 20rpx;
					padding-top: 20rpx;

					.user_image {
						float: left;
						display: block;
						width: 80rpx;
						height: 80rpx;
						border-radius: 40%;
					}

					.username_text {
						height: 80rpx;
						line-height: 80rpx;
					}
				}

				.regiment_center {
					float: right;
					padding-right: 18rpx;
					padding-top: 25rpx;

					.regiment_center_text {
						font-size: 25rpx;
					}

					.regiment_center_time {
						font-size: 25rpx;

						.center_title {
							float: left;
						}
					}
				}

				.regiment_right {
					float: right;
					padding-top: 25rpx;

					.regiment_but {
						font-size: 25rpx;
						background-color: #E03519;
						color: #F9F9F9;
					}
				}
			}

			.coupon_item:last-child {
				border-bottom: none;
			}
		}
	}

	// 添加客服
	.center_popup {
		.add_follow {
			display: block;
			color: #FFFFFF;
			width: 700rpx;
			height: 800rpx;
			margin: 0 auto;
			font-size: 26rpx;
			border-radius: 40rpx;
			background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);

			.close_area {
				height: 80rpx;
				display: block;
				line-height: 80rpx;

				.close_btn {
					color: #FFFFFF;
					float: right;
					width: 80rpx;
					height: 80rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 80rpx;
					padding: 0rpx 0rpx;
					border: 0rpx solid transparent;
					background-color: transparent;
				}

				.close_btn::after {
					border: 0rpx solid transparent;
				}
			}

			.info_alter {
				display: block;
				height: 100rpx;
				font-size: 42rpx;
				font-weight: bold;
				text-align: center;
				line-height: 100rpx;
			}

			.qr_code_area {
				display: block;
				width: 300rpx;
				height: 300rpx;
				margin: 30rpx auto;

				.qr_code {
					float: left;
					width: 300rpx;
					height: 300rpx;
				}
			}

			.save_btn {
				color: #333333;
				display: block;
				width: 260rpx;
				height: 80rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				margin: 40rpx auto;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				border: 0rpx solid transparent;
			}

			.rule_info {
				width: 600rpx;
				display: block;
				font-size: 26rpx;
				margin: 20rpx auto;
				overflow: hidden;
				line-height: 40rpx;
			}
		}
	}

	.regiment_list {
		width: 700rpx;
		margin-left: 20rpx;
		background-color: red;
		border-radius: 10px;

		.regiment_list_title {
			padding-top: 20rpx;
			height: 60rpx;

			.title1 {
				margin-top: 20rpx;
				padding-left: 20rpx;
				color: #F9F9F9;
			}

			.title2 {
				padding-left: 350rpx;
				color: #F9F9F9;
			}
		}

		.regiment {
			width: 685rpx;
			height: 250rpx;
			background-color: #F9F9F9;
			margin-left: 10rpx;
			border-radius: 10px;

			.swiper {
				height: 250rpx;

				.swiper-item {
					.username {
						float: left;
						padding-left: 20rpx;
						padding-top: 20rpx;

						.user_image {
							float: left;
							display: block;
							width: 80rpx;
							height: 80rpx;
							border-radius: 40%;
						}

						.username_text {
							height: 80rpx;
							line-height: 80rpx;
						}
					}

					.regiment_center {
						float: right;
						padding-right: 18rpx;
						padding-top: 25rpx;

						.regiment_center_text {
							font-size: 25rpx;
						}

						.regiment_center_time {
							font-size: 25rpx;

							.center_title {
								float: left;
							}
						}
					}

					.regiment_right {
						float: right;
						padding-top: 25rpx;

						.regiment_but {
							font-size: 25rpx;
							background-color: #E03519;
							color: #F9F9F9;
						}
					}
				}
			}
		}
	}
</style>