groupon-wx/pages/order/index.vue

<template>
	<view :style="{ height: pageHeight,colorStyle }">
		<view class="top custom_box" style="background: linear-gradient(180deg, rgb(254,245,246), rgb(245,245,245)); color: black;" >
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{ height: sysHeight }"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">订单列表</view>
				<!-- #endif -->
			</view>
			<!-- #endif -->
		</view>
		<view class="my-order" :style="{ top: sysHeightTop}">
			<view class="header-group" style="padding-left: 20rpx;" >
				<view class="tabs">
					<u-tabs  :is-scroll="true" :list="navigationList" @change="statusClick()" lineColor="#B22338"
						:inactiveStyle="{ color: '#999999' }" :activeStyle="{ color: '#B22338', fontWeight: 'bold' }"
						keyName="title" :current="current"></u-tabs>
				</view>
			</view>
			<view v-for="(item, index) in orderList" :key="index">
				<view class="list" >
					<view class="myclient_list" @click="goOrderDetails(item)">
						<view class="myclient_list_name">
							<view class="nl ">
								{{item.mainTitle}}
							</view>
              <view v-if="orderStatus != 8">
                <view v-if="item.orderState == 4" class="success_status">{{item.orderStateDesc}}</view>
                <view v-else class="status">{{item.orderStateDesc}}</view>
              </view>
              <view v-if="orderStatus == 8">
                <view class="after_sales_status">{{item.afterSalesStatusDesc}}</view>
              </view>

						</view>
<!--						<view class="grouponTitle ">-->
<!--							<text class="subTitle ">{{ item.subTitle}} </text>-->
<!--						</view>-->
						<view class="myclient_list_content">
              <view class="phone">
                <image referrerpolicy="no-referrer" src="/static/image/riqi.png" />
                <text>
                  团购日期: {{item.grouponStartTime}} 至 {{item.grouponEndTime}}
                </text>
              </view>
              <view class="phone">
                <image referrerpolicy="no-referrer" src="/static/image/riqi.png" />
                <text>
                  提货日期: {{item.takeStartTime}} 至 {{item.takeEndTime}}
                </text>
              </view>
              <view class="time">
                <image referrerpolicy="no-referrer" src="/static/image/order.png" />
                <text>
                  订单编号: {{item.orderNo}}
                </text>
              </view>
						</view>
					</view>
					<view class="all-products-body" v-for="(goods, index2) in item.goodsList" :key="index2">
						<view class="all-products-item" @click="addGoodPopupShow = true">
							<image
								:src="goods.goodsImage"
								mode="scaleToFill" />

							<view class="all-products-item-content">
								<view class="all-products-item-content-t">
									{{goods.goodsName}}
								</view>
								<view class="all-products-item-content-b">
									<view style="display:flex;">
										<text class="red"> ¥{{goods.goodsPrice}}</text>
                    <text v-if="goods.isAfterSales == 1 && orderStatus != 8" class="count">有售后</text>
									</view>
<!--                  <view>-->
<!--                    <view v-if="goods.isAfterSales == 1&&orderStatus != 8" class="count">有售后</view>-->
<!--                  </view>-->
									<view>
										<view class="count"> x {{goods.goodsNum}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="self-pickup-point">
						<view class="a-t">
							最近的自提网点:
						</view>
						<view class="a-m">
							<view class="am1">
								<view class="am1-1">
									{{item.selfTakeName}}
								</view>
								<view class="am1-2" @click="openmap(item)">
									<image src="/static/image/dizhi.png" mode="scaleToFill" />
								</view>
							</view>
						</view>
						<vie class="white_line"></vie>
						<view class="a-b">
							<view class="a-b1">
								对接团长：
								<text class="red">
									&nbsp;&nbsp;{{item.commander}}
								</text>
							</view>
							<view class="a-b2">
								<image src="/static/image/weixin.png" mode="scaleToFill" @click="openPopup(item.qrCode)"></image>
								<image src="/static/image/jianpan.png" mode="scaleToFill" @click="callPhone(item.phone)"></image>
							</view>
						</view>
					</view>
					<view class="op-area">
						<button v-if="item.orderState == 1" class="action-btn" @click="cancelOrder(item.orderId)">取消订单</button>
						<button v-if="item.orderState == 1" class="action-btn" @click="goPay(item)">立即付款</button>
						<button v-if="item.canReturnGoods && orderStatus != 8" class="info-btn" @click="salesReturn(item, 2)">申请退货</button>
<!--						<button v-if="item.canRefund" class="info-btn" @click="refundOrder(item.orderId)">申请退款</button>-->
						<button v-if="item.canRefund && orderStatus != 8" class="info-btn" @click="salesReturn(item, 1)">申请退款</button>
						<button v-if="item.canRefundTwo && orderStatus != 8" class="info-btn" @click="applyGrouponAfterRefund(item)">申请退款</button>
						<button  v-if="item.orderState == 2 && orderStatus != 8" class="action-btn" @click="viewPickCode(item.pickupCode)">取货码 {{item.pickupCode}}</button>
					</view>
				</view>



			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" :title="$t(`暂无订单`)"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:totalPrice="totalPrice"></payment>

		<uni-popup ref="popup" type="center">
			<view class="block_3">
				<image  @click="closePopup"
						class="icon_1"
						referrerpolicy="no-referrer"
						src="/static/images/X.png"
				/>
				<image
						class="image_3"
						referrerpolicy="no-referrer"
						:src="qrCode"
						show-menu-by-longpress="true"
				/>
				<text class="text_23">长按图片识别&nbsp;“加团长微信”</text>
			</view>
		</uni-popup>

		<u-popup :show="pickupCodeShow" mode="center" @close="pickupCodeShow = false">
			<view>
<!--				<text>-->
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="pickupCode" :options="{ margin: 10 }"></uqrcode>
<!--				</text>-->
			</view>
		</u-popup>
	</view>
</template>

<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let sysHeightTop = (uni.getSystemInfoSync().statusBarHeight + 43) + 'px';
const app = getApp();
import {
	getUserOrderPage,
	orderCancel,
	postUserOrderRefund
} from '@/api/home.js';
import {
	applyGrouponAfterRefund
} from '@/api/groupon.js';
import {
	getOrderList,
	orderData,
	orderDel,
	orderPay
} from '@/api/order.js';
import {
	getUserInfo
} from '@/api/user.js';
import {
	openOrderSubscribe
} from '@/utils/SubscribeMessage.js';
import home from '@/components/home';
import payment from '@/components/payment';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from 'vuex';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
export default {
	components: {
		payment,
		home,
		emptyPage,
		// #ifdef MP
		authorize
		// #endif
	},
	mixins: [colors],
	data () {
		return {
			pickupCodeShow: false,
			pickupCode: '',
			qrCode:'',
			navigationList: [{
				title: '全部',
				id: 0,
				orderStatus: 0,
			}
			,
			{
				title: '待付款',
				id: 1,
				orderStatus: 1,
			},
			{
				title: '待提货',
				id: 2,
				orderStatus: 2,
			},
			{
				title: '已完成',
				id: 3,
				orderStatus: 4,
			},
			{
				title: '售后',
				id: 4,
				orderStatus: 8,
			},
		],
			pageHeight: app.globalData.windowHeight,

			sysHeight: sysHeight,
			sysHeightTop: sysHeightTop,
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: this.$t(`加载更多`), //提示语
			orderList: [], //订单数组
			orderData: {}, //订单详细统计
			orderStatus: 0, //订单状态
			page: 1,
			limit: 5,
			payMode: [{
				name: this.$t(`微信支付`),
				icon: 'icon-weixinzhifu',
				value: 'weixin',
				title: this.$t(`使用微信快捷支付`),
				payStatus: true
			},
				// {
				// 	name: this.$t(`支付宝支付`),
				// 	icon: 'icon-zhifubao',
				// 	value: 'alipay',
				// 	title: this.$t(`使用支付宝支付`),
				// 	payStatus: true
				// },
				// {
				// 	name: this.$t(`余额支付`),
				// 	icon: 'icon-yuezhifu',
				// 	value: 'yue',
				// 	title: this.$t(`可用余额`),
				// 	number: 0,
				// 	payStatus: true
				// }, {
				// 	"name": this.$t(`好友代付`),
				// 	"icon": "icon-haoyoudaizhifu",
				// 	value: 'friend',
				// 	title: this.$t(`找微信好友支付`),
				// 	payStatus: 1,
				// }
			],
			pay_close: false,
			pay_order_id: '',
			pay_orderId: '',
			totalPrice: '0',
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false ,//是否隐藏授权
			current: 0
		};
	},
	computed: mapGetters(['isLogin']),
	onShow () {

		console.log("onShow事件,全局变量1--------", getApp().globalData.switchId, this.$route)
		let ContentIndex = getApp().globalData.switchId//获取到传参
		if(ContentIndex == '待付款') {
			this.current = 1;
			this.orderStatus = 1;
		} else if (ContentIndex == '待提货') {
			this.current = 2;
			this.orderStatus = 2;
		} else if (ContentIndex == '已完成') {
			this.current = 3;
			this.orderStatus = 4;
		} else if (ContentIndex == '全部') {
      this.current = 0;
      this.orderStatus = 0;
    } else if (ContentIndex == '售后') {
      this.current = 4;
      this.orderStatus = 8;
    }


		if (this.isLogin) {
			this.page = 1;
			this.orderList = []
			this.loadend = false;
			// this.onLoadFun();
			this.getOrderList();
		} else {
			toLogin();
		}
	},

	methods: {
    /**
     * 售后 1-退款 2-退货
     */
		salesReturn(item, type){
			uni.navigateTo({
				url:'/pages/order/orderAfterSales/orderAfterSales?type='+type+'&item='+encodeURIComponent(JSON.stringify(item))
			})
		},

		applyGrouponAfterRefund(item) {
      uni.showLoading({
        title: '加载中...'
      });
			let that = this;
			applyGrouponAfterRefund(item.orderId).then(res => {
        setTimeout(() => {
          uni.hideLoading();
          that.page = 1;
          that.orderList = [];
          that.getOrderList()
          return that.$util.Tips({
            title: res.msg,
            icon: 'success'
          });
        }, 1000)

			}).catch(err => {
        uni.hideLoading();
				return that.$util.Tips({
					title: err
				});
			});
		},

		openmap(selfTake) {
			uni.openLocation({
				latitude: selfTake.latitude,
				longitude: selfTake.longitude,
				address: selfTake.address,
				success: function () {
					console.log('success');
				}
			});
		},
		closePopup(){
			this.$refs.popup.close()
		},

		openPopup(qrCode){
		  let that = this;
			this.qrCode = qrCode;
			if (!this.qrCode) {
        return that.$util.Tips({
          title: that.$t(`团长未设置微信号`)
        });
      }
			this.$refs.popup.open()
		},

		callPhone(phone){
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		onLoadFun () {
			this.getOrderData();
			this.getUserInfo();
		},
		// 授权关闭
		authColse: function (e) {
			this.isShowAuth = e;
		},
		/**
		 * 事件回调
		 *
		 */
		onChangeFun: function (e) {
			let opt = e;
			let action = opt.action || null;
			let value = opt.value != undefined ? opt.value : null;
			action && this[action] && this[action](value);
		},
		/**
		 * 获取用户信息
		 *
		 */
		getUserInfo: function () {
			let that = this;
			getUserInfo().then(res => {
				that.payMode[2].number = res.data.now_money;
				that.$set(that, 'payMode', that.payMode);
			});
		},
		/**
		 * 关闭支付组件
		 *
		 */
		payClose: function () {
			this.pay_close = false;
		},
		/**
		 * 查看取货码
		 * @param {Object} code
		 */
		viewPickCode(code) {
			this.pickupCodeShow = true;
			this.pickupCode = code;
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			console.log('onLoad事件', options);
			if ('params' in options) {
				this.obj = JSON.parse(decodeURIComponent(options.params));
			}
			if (options.status) this.orderStatus = options.status;
		},

		/**
		 * 取消订单
		 *
		 */
		cancelOrder: function (order_id) {
			let that = this;
			if (!order_id)
				return that.$util.Tips({
					title: that.$t(`缺少订单号无法取消订单`)
				});
			uni.showModal({
				title: that.$t(`取消订单`),
				content: that.$t(`确定取消该订单`),
				success: function (res) {
					if (res.confirm) {
						orderCancel(order_id)
							.then(res => {
								that.orderList = [];
								that.getOrderList()
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								});
							})
							.catch(err => {
								return that.$util.Tips({
									title: err
								});
							});
					}
				}
			});

		},
		refundOrder: function (orderId) {
			let that = this;
			if (!orderId)
				return that.$util.Tips({
					title: that.$t(`缺少订单号无法申请退款订单`)
				});
			uni.showModal({
				title: that.$t(`申请退款`),
				content: that.$t(`确定申请退款该订单`),
				success: function (res) {
					if (res.confirm) {
						postUserOrderRefund({ id: orderId })
							.then(res => {
								that.orderList = [];
								that.getOrderList()
								return that.$util.Tips({
									title: "申请成功",
									icon: 'success'
								});
							})
							.catch(err => {
								return that.$util.Tips({
									title: err
								});
							});
					} else if (res.cancel) {
						return that.$util.Tips({
							title: that.$t(`已取消`)
						});
					}
				}
			});

		},
		/**
		 * 打开支付组件
		 *
		 */
		goPay: function (item) {
			this.$set(this, 'pay_close', true);
			this.$set(this, 'pay_order_id', item.orderNo);
			this.$set(this, 'pay_orderId', item.orderId);
			this.$set(this, 'totalPrice', item.paymentAmount);
		},
		/**
		 * 支付成功回调
		 *
		 */
		pay_complete: function () {
			this.loadend = false;
			this.page = 1;
			this.$set(this, 'orderList', []);
			this.pay_close = false;
			uni.$u.toast("支付成功")
			this.pay_order_id = '';
			this.pay_orderId = '';
			this.getOrderData();
			this.getOrderList();
		},
		/**
		 * 支付失败回调
		 *
		 */
		pay_fail: function () {
			this.pay_close = false;
			this.pay_order_id = '';
		},
		/**
		 * 去订单详情
		 */
		goOrderDetails (item) {
			uni.navigateTo({
				url: '/pages/groupbuying_details/order_details_list/index?orderId=' + item.orderId + '&afterSalesId=' + item.afterSalesId + '&orderStatus=' + this.orderStatus
			});
		},
		/**
		 * 切换类型
		 */
		statusClick: function (status) {

			// if (status.orderStatus == 8) {
      //   this.orderStatus = 0;
      //   console.log("wojinlail aaaa")
      //   uni.navigateTo({url: '/pages/users/user_return_list/index'});
      //   // uni.({
      //   //   url: '/pages/users/user_return_list/index',
      //   //   fail (err) {
      //   //     console.log(err)
      //   //   }
      //   // })
      // } else {
        if (status.orderStatus == this.orderStatus) return;
        this.orderStatus = status.orderStatus;
        this.loadend = false;
        this.page = 1;
        this.$set(this, 'orderList', []);
        this.getOrderList();
      // }
		},
		/**
		 * 获取订单列表
		 */
		getOrderList: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = that.$t(`加载更多`);
			getUserOrderPage({
				current: that.page,
				size: that.limit,
				orderState: this.orderStatus
			}).then(res => {
				let list = res.data.records || [];
				let loadend = list.length < that.limit;
				that.orderList = that.$util.SplitArray(list, that.orderList);
				that.$set(that, 'orderList', that.orderList);
				that.loadend = loadend;
				that.loading = false;
				that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
				that.page = that.page + 1;
			}).catch(err => {
				that.loading = false;
				that.loadTitle = that.$t(`加载更多`);
			});
		},

		/**
		 * 删除订单
		 */
		delOrder: function (order_id, index) {
			let that = this;
			uni.showModal({
				title: that.$t(`删除订单`),
				content: that.$t(`确定删除该订单`),
				success: function (res) {
					if (res.confirm) {
						orderDel(order_id)
							.then(res => {
								that.orderList.splice(index, 1);
								that.$set(that, 'orderList', that.orderList);
								that.$set(that.orderData, 'unpaid_count', that.orderData
									.unpaid_count - 1);
								that.getOrderData();
								return that.$util.Tips({
									title: that.$t(`删除成功`),
									icon: 'success'
								});
							})
							.catch(err => {
								return that.$util.Tips({
									title: err
								});
							});
					} else if (res.cancel) {
						return that.$util.Tips({
							title: that.$t(`已取消`)
						});
					}
				}
			});
		},

	},
	onReachBottom: function () {
		this.getOrderList();
	}
};
</script>

<style scoped lang="scss">
.my-order {
	position: relative;
}

.my-order .header {
	height: 220rpx;
	padding: 0 30rpx;
}

.my-order .header .picTxt {
	height: 160rpx;
}

.my-order .header .picTxt .text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 26rpx;
	font-family: 'Guildford Pro';
}

.my-order .header .picTxt .text .name {
	font-size: 34rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
	width: 122rpx;
	height: 109rpx;
}

.my-order .header .picTxt .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .nav {
	background-color: #F9F9F9;
	width: 100%;
	// height: 140rpx;
}

.my-order .nav .item {
	text-align: center;
	font-size: 26rpx;
	color: #282828;
	padding: 27rpx 0;
	border-bottom: 5rpx solid transparent;
}

.my-order .nav .item.on {
	/* #ifdef H5 || MP */
	font-weight: bold;
	/* #endif */
	/* #ifdef APP-PLUS */
	color: #000;
	/* #endif */
	border-color: var(--view-theme);
}

.my-order .nav .item .num {
	margin-top: 18rpx;
}

.list {
	width: 100%;
	background: white;
	margin: 14rpx auto 0 auto;
}

.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
}

.noCart .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .list .item .item-info .text .money .return {
	// color: var(--view-priceColor);
	margin-top: 10rpx;
	font-size: 24rpx;
}


.myclient_list {
	padding-left: 30px;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
	margin-top: 30rpx;
	background: #FFFFFF;

	.myclient_list_name {
		display: flex;
    	justify-content: space-between;
		min-height: 44rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		line-height: 44rpx;


		.nv {
			flex-grow: 1;
		}
		.nl {
			width: 550rpx;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.status {
			min-width: 100rpx;
			text-align: right;
			margin-right: 30rpx;
			color: #FEA800;
		}

		.success_status {
			min-width: 100rpx;
			text-align: right;
			margin-right: 30rpx;
			color: #75BE00;
		}

		.after_sales_status {
			min-width: 100rpx;
			text-align: right;
			margin-right: 30rpx;
			color: #666666;
		}
	}

	.myclient_list_content {

		image {
			width: 28rpx;
			height: 28rpx;
			margin-top: 9rpx;
			margin-right: 10rpx;
		}

		.phone {
			display: flex;
			flex-direction: row;
			margin-bottom: 15rpx;
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

		.time {
			display: flex;
			flex-direction: row;
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}
	}
}

.all-products-body {
	background: white;
	padding-left: 30px;

	.all-products-item {
		display: flex;
		margin-bottom: 20rpx;

		image {
			width: 132rpx;
			height: 132rpx;
			border-radius: 4px;
		}

		.all-products-item-content {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			width: calc(100% - 132rpx);

			.all-products-item-content-t {
				font-size: 24rpx;
				font-weight: 400;
				margin-right: 30rpx;
				height: 80rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.all-products-item-content-b {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 52rpx;
				display: flex;
				justify-content: space-between;

				.red {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #B22338 !important;
					margin-right: 10rpx;
				}

				.line-thr {
					display: block;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					text-decoration: line-through;
				}

				.count {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 30rpx;
				}
			}
		}
	}
}


.a-t {
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	height: 44rpx;
	margin-bottom: 20rpx;

font-size: 20rpx;
font-weight: 400;
color: #666666;
line-height: 44rpx;

}

.a-m {
	padding: 0 30rpx;

	.am1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.am1-1 {

height: 32rpx;
font-size: 20rpx;
font-weight: bold;
color: #B22338;
line-height: 32rpx;
		}

		.am1-2 {
			height: 36rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			line-height: 36rpx;

			image {
				margin-left: 30rpx;
				vertical-align: middle;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}

	.am2 {
		margin-bottom: 20rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}


}

.a-b {
	padding: 0 30rpx;
	width: 100%;
	background: #FFF7F8;
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: space-between;

	.a-b1 {
		font-size: 20rpx;
		font-weight: 400;
		color: #666666;

		.red {
			font-size: 20rpx;
			font-weight: bold;
			color: #B22338;
		}
	}

	.a-b2 {
		image {
			vertical-align: middle;
			margin-left: 30rpx;
			height: 34rpx;
			width: 34rpx;
		}
	}
}

.self-pickup-point {
	display: flex;
	flex-direction: column;
	background: #FFF7F8;
	padding-top: 20rpx;
	margin: 0 30rpx;
}

.op-area {
	/*height: 120rpx;*/
	display: flex;
	justify-content: flex-end;
	line-height: 120rpx;
	padding: 20rpx 0;
	text-align: right;

	.action-btn {
		min-width: 200rpx;
		background: #FFF7F8;
		border-radius: 32rpx;
		border: 2rpx solid #B22338;
		margin-right: 30rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #B22338;
		line-height: 64rpx;
	}

	.info-btn {
		width: 200rpx;
		background: #F5F5F5;
		border-radius: 32rpx;
		margin-right: 30rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 64rpx;
	}
}


.sys-head {
	position: relative;
	width: 100%;
	// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: var(--view-theme);
		background-size: 100% auto;
		background-position: left bottom;
	}

	.sys-title {
		font-family: STYuanti-SC-Regular, STYuanti-SC;
		z-index: 10;
		position: relative;
		height: 43px;
		text-align: left;
		line-height: 43px;
		font-size: 36rpx;
		color: rgba(17, 17, 17, 1);
		/*font-weight: bolder;*/
		font-weight: 400;
		padding-left: 36rpx;
		color: #333333;
	}
}

.block_3 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 4px;
	padding: 16rpx 16rpx 32rpx 24rpx;
	display: flex;
	flex-direction: column;
}

.icon_1 {
	width: 32rpx;
	height: 32rpx;
	margin-left: 566rpx;
}

.image_3 {
	width: 590rpx;
	height: 766rpx;
	margin: 16rpx 8rpx 0 0;
}

.text_23 {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 28rpx;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 40rpx;
	margin: 24rpx 128rpx 0 122rpx;
}
.white_line{
	width: 90%;
	height: 2rpx;
	margin-left: 5%;
	background-color: white;
}
	.bord{
		border: 1px solid red;
	}
.grouponTitle{
	display: flex;
	flex-direction: column;
	height: 44rpx;

}
.subTitle{
	font-size: 28rpx;
	color: #666666;
	font-weight: 400;
	line-height: 44rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>