zhengjinyi 9 months ago
parent
commit
38beb1a9a6

+ 6 - 0
pages.json

@@ -608,6 +608,12 @@
 						"navigationBarTitleText": "线下转账"
 					}
 				},
+				{
+					"path": "pay/card-coupon-under",
+					"style": {
+						"navigationBarTitleText": "购买优惠券"
+					}
+				},
 				{
 					"path": "chats/index",
 					"style": {

+ 167 - 132
pages/h5/activity/activity-entry-list.vue

@@ -1,169 +1,204 @@
-<template>
-	<view class="container cashier">
-        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
+<template>
+    <view class="container cashier">
+        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
+            :loadingType="5" />
         <template v-else>
             <!-- <custom :navbar-data='nvabarData' /> -->
-            <scroll-view scroll-y="true" class="container-banner" :style="{ paddingTop:CustomBar + 180 +'px',paddingBottom: isIphoneX ? '68rpx' : '34rpx'}">
-                <view class="list" v-for="(shop,index) in list" :key="index">
-                    <view class="list-logo">
-                        <image class="list-logo-img" :src="shop.shopLogo" mode=""></image>
-                    </view>
-                    <view class="list-name">
-                        <text class="list-name-text">{{ shop.shopName }}</text>
-                    </view>
-                    <view class="list-area">
-                        <view class="list-area-num">
-                            {{ shop.showNum }}
+          
+            <scroll-view scroll-y="true" class="container-banner"
+                :style="{ paddingTop:CustomBar + 180 +'px',paddingBottom: isIphoneX ? '68rpx' : '34rpx'}">
+                <view class="list-main">
+                    <view class="fiexd-undes" v-if="isReceived"></view>
+                    <view class="list" v-for="(shop,index) in list" :key="index">
+                        <view class="list-logo">
+                            <image class="list-logo-img" :src="shop.shopLogo" mode=""></image>
+                        </view>
+                        <view class="list-name">
+                            <text class="list-name-text">{{ shop.shopName }}</text>
                         </view>
+                        <view class="list-area">
+                            <view class="list-area-num">
+                                {{ shop.showNum }}
+                            </view>
+                        </view>
+                        <view class="list-state acve" v-if="shop.shopSign === 1">已打卡</view>
+                        <view class="list-state none" v-else>未打卡</view>
                     </view>
-                    <view class="list-state acve" v-if="shop.shopSign === 1">已打卡</view>
-                    <view class="list-state none" v-else>未打卡</view>
                 </view>
+                
             </scroll-view>
         </template>
-	</view>
-</template>
-
+    </view>
+</template>
+
 <script>
-	export default{
-		data(){
-			return{
-				nvabarData: {		//顶部自定义导航
-					haveBack:false,
-					haveHome:true,
-					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
-					showSearch: 0,
-					title: '',  // 导航栏 中间的标题
-					textLeft:this.$store.state.isIphone
-				},
-				isIphoneX:this.$store.state.isIphoneX,
-				CustomBar:this.CustomBar,// 顶部导航栏高度
-				params:{
-                    userId:'',
+    export default {
+        data() {
+            return {
+                nvabarData: { //顶部自定义导航
+                    haveBack: false,
+                    haveHome: true,
+                    showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+                    showSearch: 0,
+                    title: '', // 导航栏 中间的标题
+                    textLeft: this.$store.state.isIphone
+                },
+                isIphoneX: this.$store.state.isIphoneX,
+                CustomBar: this.CustomBar, // 顶部导航栏高度
+                params: {
+                    userId: '',
                 },
-                list:[]
-			}
-		},
-		onLoad() {
-            this.initData()
-		},
-		methods:{
+                list: [],
+                isReceived:false
+            }
+        },
+        onLoad() {
+            this.initData()
+        },
+        methods: {
             // 初始化
             async initData() {
-            	const userInfo = await this.$api.getStorage()
+                const userInfo = await this.$api.getStorage()
                 this.params.userId = userInfo.userId ? userInfo.userId : 0
                 this.userTicketSignList(this.params)
             },
             // 获取展台打卡列表
-            async userTicketSignList(params){
-            	try{
-            		const res = await this.UserService.userTicketSignList(params)
+            async userTicketSignList(params) {
+                try {
+                    const res = await this.UserService.userTicketSignList(params)
                     this.list = res.data
+                    this.isReceived = this.list[0].giftFlag === 1 ? true : false
                     this.skeletonShow = false
-            	}catch(error){
-            		console.log('获取展台列表信息异常~')
-            	}
+                } catch (error) {
+                    console.log('获取展台列表信息异常~')
+                }
             }
-		},
-		onShow() {
-			
-		}
-	}
-</script>
-
-<style lang="scss">
-	page{
-        background-color: #3d68eb;
-		height: auto !important;
-	}
-    .container-banner{
+        },
+        onShow() {
+
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: #3d68eb;
+        height: auto !important;
+    }
+    
+    .container-banner {
         width: 100%;
         height: auto;
         background: url(https://admin.caimei365.com/userfiles/1/images/photo/2024/08/ziluo_bg.jpg) no-repeat;
         background-size: contain;
         box-sizing: border-box;
         padding: 0 24rpx;
-        overflow: hidden;
-        .list{
+        position: relative;
+        .list-main{
             width: 100%;
-            height: 200rpx;
-            background-color: #FFFFFF;
-            border-radius: 24rpx;
-            margin-bottom: 20rpx;
-            box-sizing: border-box;
-            padding: 20rpx;
-            display: flex;
-            align-items: center;
+            height: auto;
             position: relative;
-            .list-logo{
+            margin-top: 30rpx;
+            .fiexd-undes{
+                width: 144rpx;
+                height: 128rpx;
+                background: url(https://static.caimei365.com/app/img/ziyalan/collect@2x.png);
+                background-size: cover;
+                position: absolute;
+                left: 50%;
+                margin-left: -50rpx;
+                top: -30rpx;
+                z-index: 9999;
+            }
+            .list {
+                width: 100%;
+                height: 200rpx;
+                background-color: #FFFFFF;
+                border-radius: 24rpx;
+                margin-bottom: 20rpx;
+                box-sizing: border-box;
+                padding: 20rpx;
                 display: flex;
-                width: 160rpx;
-                height: 160rpx;
-                border-radius: 50%;
-                background-color: #F7F7F7;
-                overflow: hidden;
-                border: 1px solid #e1e1e1;
-                .list-logo-img{
+                align-items: center;
+                position: relative;
+            
+                .list-logo {
+                    display: flex;
                     width: 160rpx;
                     height: 160rpx;
-                    display: block;
                     border-radius: 50%;
-                }
-            }
-            .list-name{
-                display: flex;
-                flex: 1;
-                justify-content: center;
-                font-size: $font-size-26;
-                .list-name-text{
-                    display: inline-block;
-                    width: 180rpx;
-                    -o-text-overflow: ellipsis;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    word-break: break-all;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 1;
+                    background-color: #F7F7F7;
                     overflow: hidden;
-                    font-weight: 600;
+                    border: 1px solid #e1e1e1;
+            
+                    .list-logo-img {
+                        width: 160rpx;
+                        height: 160rpx;
+                        display: block;
+                        border-radius: 50%;
+                    }
                 }
-            }
-            .list-area{
-                display: flex;
-                flex: 1;
-                justify-content: left;
-                align-items: left;
-                .list-area-num{
-                    width: 70rpx;
-                    height: 70rpx;
-                    border-radius: 50%;
-                    background-color: #e10078;
-                    font-size: $font-size-30;
-                    font-weight: 600;
-                    color: #FFFFFF;
-                    text-align: center;
-                    line-height: 70rpx;
+            
+                .list-name {
+                    display: flex;
+                    flex: 1;
+                    justify-content: center;
+                    font-size: $font-size-26;
+            
+                    .list-name-text {
+                        display: inline-block;
+                        width: 180rpx;
+                        -o-text-overflow: ellipsis;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        word-break: break-all;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 1;
+                        overflow: hidden;
+                        font-weight: 600;
+                    }
                 }
-            }
-            .list-state{
-                position: absolute;
-                height: 44rpx;
-                border-radius: 22rpx;
-                right: 20rpx;
-                top: 20rpx;
-                line-height: 44rpx;
-                padding: 0 10rpx;
-                font-size: $font-size-22;
-                &.none{
-                    background-color: #999999;
-                    color: #FFFFFF;
+            
+                .list-area {
+                    display: flex;
+                    flex: 1;
+                    justify-content: left;
+                    align-items: left;
+            
+                    .list-area-num {
+                        width: 70rpx;
+                        height: 70rpx;
+                        border-radius: 50%;
+                        background-color: #e10078;
+                        font-size: $font-size-30;
+                        font-weight: 600;
+                        color: #FFFFFF;
+                        text-align: center;
+                        line-height: 70rpx;
+                    }
                 }
-                &.acve{
-                    background-color: #e10078;
-                    color: #FFFFFF;
+            
+                .list-state {
+                    position: absolute;
+                    height: 44rpx;
+                    border-radius: 22rpx;
+                    right: 20rpx;
+                    top: 20rpx;
+                    line-height: 44rpx;
+                    padding: 0 10rpx;
+                    font-size: $font-size-22;
+            
+                    &.none {
+                        background-color: #999999;
+                        color: #FFFFFF;
+                    }
+            
+                    &.acve {
+                        background-color: #e10078;
+                        color: #FFFFFF;
+                    }
                 }
             }
         }
-    }
-	
-</style>
+    }
+</style>

+ 1 - 0
pages/user/coupon/coupon-details.vue

@@ -144,6 +144,7 @@
                     this.$api.redirectTo('/pages/login/login')
 
                 } else {
+                    // this.$api.navigateTo(`/pages/user/pay/card-coupon-under?amount=${coupon.moneyCouponPrice}`)
                     this.WeChatCouponRecord(coupon)
                 }
             },

+ 581 - 0
pages/user/pay/card-coupon-under.vue

@@ -0,0 +1,581 @@
+<template>
+	<view class="container cashier">
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		/>
+		<view class="container-cash clearfix" v-else>
+			<view class="container-wrapper">
+				<view class="pay-content">
+					<view class="pay-p"><text>待付金额</text></view>
+					<view class="pay-money">
+						<text class="pay-sm">¥</text> <text class="pay-bg">{{ payableAmount | NumFormat }}</text>
+					</view>
+				</view>
+			</view>
+			<view class="pay-bring-wrapper clearfix" v-if="bankInfo.bankAccount">
+				<view class="pay-bring-content">
+					<view class="text-v title"
+						><text class="label">转账信息</text>
+						<text class="clipboard" @click.stop="clipboard">复制信息</text></view
+					>
+					<view class="text-v"><text class="label">开户行:</text> {{ bankInfo.bankName }}</view>
+					<view class="text-v"><text class="label">银行卡号:</text>{{ bankInfo.bankAccount }}</view>
+					<view class="text-v"
+						><text class="label">公司名称:</text>{{ bankInfo.bankAccountName }}</view
+					>
+					<view class="text-content"
+						>请将订单款项转账至上述账号,转账完成后截图支付凭证,并在订单页面上传支付凭证。</view
+					>
+				</view>
+			</view>
+			<view class="pay-bring-wrapper clearfix" v-else>
+				<view class="pay-bring-content">
+					<view class="text-title">
+						<image
+                            v-if="payableAmount < 5000"
+							src="https://static.caimei365.com/app/img/icon/icon-vxPaycode@2x.jpg"
+							mode=""
+							@click="previewImg(1)"
+						></image>
+						<image
+                            v-else
+							src="https://static.caimei365.com/app/img/icon/icon-vxkecode.png"
+							mode=""
+							@click="previewImg(2)"
+						></image>
+					</view>
+                    <view class="text-content"  v-if="payableAmount < 5000"
+                    	>请点击上方二维码,长按识别后输入待付金额金额付款。</view
+                    >
+					<view class="text-content" v-else
+						>请点击上方二维码,长按保存后,使用微信扫码添加采美客服,客服会为您推荐最合适的线下转账方式。</view
+					>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+const thorui = require('@/components/clipboard/clipboard.thorui.js')
+export default {
+	data() {
+		return {
+			bankInfo: {},
+			payableAmount: 0,
+			isIphoneX: this.$store.state.isIphoneX,
+			CustomBar: this.CustomBar, // 顶部导航栏高度
+			skeletonShow: true,
+			productImage: ['https://static.caimei365.com/app/img/icon/icon-vxkecode.png']
+		}
+	},
+	onLoad(option) {
+		this.initData(option)
+	},
+	filters: {
+		NumFormat(value) {
+			if (!value) return '0.00'
+			/*原来用的是Number(value).toFixed(0),这样取整时有问题,例如0.51取整之后为1,感谢Nils指正*/
+			/*后来改成了 Number(value)|0,但是输入超过十一位就为负数了,具体见评论 */
+			var intPart = Number(value) - (Number(value) % 1) //获取整数部分(这里是windy93的方法)
+			var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
+			var floatPart = '.00' //预定义小数部分
+			var value2Array = value.toString().split('.')
+			//=2表示数据有小数位
+			if (value2Array.length == 2) {
+				floatPart = value2Array[1].toString() //拿到小数部分
+
+				if (floatPart.length == 1) {
+					//补0,实际上用不着
+					return intPartFormat + '.' + floatPart + '0'
+				} else {
+					return intPartFormat + '.' + floatPart
+				}
+			} else {
+				return intPartFormat + floatPart
+			}
+		}
+	},
+	methods: {
+		initData(e) {
+			console.log(e)
+			this.payableAmount = e.amount
+            setTimeout(() => {
+            	this.skeletonShow = false
+            }, 500)
+			// this.PayOrderCheckoutCounter(this.shopOrderId)
+		},
+		//初始化子订单信息
+		async PayOrderCheckoutCounter(shopOrderId) {
+			try {
+				const res = await this.PayService.PayOrderCheckoutCounter({ shopOrderId: shopOrderId })
+				const data = res.data.shopOrder
+				this.payableAmount = data.needPayAmount
+				this.getShopBank(data.shopId)
+			} catch (error) {
+				console.log('error', error)
+			}
+		},
+		//获取供应商线下转账账号
+		async getShopBank(shopId){
+			try {
+				const res = await this.PayService.getShopBank({ shopId: shopId })
+				const data = res.data
+				this.bankInfo = data
+				setTimeout(() => {
+					this.skeletonShow = false
+				}, 500)
+			}catch (error) {
+				console.log('error', error)
+			}
+		},
+		//复制
+		clipboard() {
+			const data = `开户行:${this.bankInfo.bankName},银行卡号:${this.bankInfo.bankAccount},公司名称:${this.bankInfo.bankAccountName}`
+			thorui.getClipboardData(data, res => {
+				if (res) {
+					this.$util.msg('复制成功', 2000, true, 'success')
+				} else {
+					this.$util.msg('复制失败', 2000, true, 'none')
+				}
+			}) 
+		},
+		//顶部商品图片预览
+		previewImg (index) {
+            let previewUrls = []
+            if(index === 1){
+                previewUrls = ['https://static.caimei365.com/app/img/icon/icon-vxPaycode@2x.jpg']
+            }else{
+                previewUrls = ['https://static.caimei365.com/app/img/icon/icon-vxkecode.png']
+            }
+			uni.previewImage({
+				current: 0, 	//图片索引
+				urls: previewUrls, //必须是http图片,本地图片无效
+				longPressActions:''
+			})
+		}				
+	},
+	onShow() {}
+}
+</script>
+
+<style lang="scss">
+page {
+	height: auto !important;
+	background-color: #ffffff;
+}
+.container-cash {
+	width: 100%;
+	padding-bottom: 250rpx;
+	.pay-bring-title {
+		box-sizing: border-box;
+		width: 100%;
+		min-height: 96rpx;
+		padding: 20rpx 24rpx;
+		line-height: 48rpx;
+		text-align: left;
+		font-size: $font-size-24;
+		background: rgba(255, 234, 221, 1);
+		color: $color-system;
+	}
+	.container-wrapper {
+		width: 662rpx;
+		margin: 0 auto;
+		.pay-title {
+			font-size: $font-size-32;
+			line-height: 44rpx;
+			text-align: center;
+			color: #2a86ff;
+			margin: 40rpx 0 0 0;
+			width: 100%;
+			float: left;
+		}
+		.pay-content {
+			width: 574rpx;
+			height: 136rpx;
+			padding: 52rpx 44rpx;
+			background: url(https://static.caimei365.com/app/img/icon/icon-paybg.png) no-repeat;
+			background-size: cover;
+			float: left;
+			margin-top: 40rpx;
+			.pay-p {
+				font-size: $font-size-26;
+				color: #ffffff;
+				line-height: 36rpx;
+			}
+			.pay-money {
+				color: #ffffff;
+				line-height: 84rpx;
+				font-weight: bold;
+				.pay-sm {
+					font-size: $font-size-26;
+				}
+				.pay-bg {
+					font-size: 50rpx;
+				}
+			}
+		}
+		.pay-check {
+			width: 100%;
+			height: auto;
+			float: left;
+			.check-title {
+				width: 622rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				padding: 0 20rpx;
+				margin-top: 24rpx;
+				.text {
+					font-size: $font-size-28;
+					color: $text-color;
+					text-align: left;
+					float: left;
+				}
+				.icon {
+					width: 40rpx;
+					height: 40rpx;
+					border-radius: 50%;
+					line-height: 40rpx;
+					text-align: center;
+					color: #ffffff;
+					font-size: $font-size-24;
+					background: radial-gradient(
+						circle,
+						rgba(225, 86, 22, 1) 0%,
+						rgba(255, 170, 0, 1) 67%,
+						rgba(249, 185, 156, 1) 100%
+					);
+					float: right;
+				}
+			}
+			.pay-checked {
+				width: 100%;
+				height: auto;
+				.pay-item {
+					width: 618rpx;
+					height: 96rpx;
+					border: 2px solid #f5f5f5;
+					border-radius: 30rpx;
+					padding: 20rpx;
+					margin: 24rpx 0;
+					display: flex;
+					background-color: #ffffff;
+					&.current {
+						border-color: $color-system;
+						.item-r {
+							.icon-duigou {
+								color: $color-system;
+							}
+						}
+					}
+					.item-l {
+						flex: 8;
+						.item-icon {
+							width: 96rpx;
+							height: 96rpx;
+							float: left;
+							text-align: center;
+							line-height: 96rpx;
+							margin-right: 20rpx;
+							.iconfont {
+								font-size: 88rpx;
+							}
+							.icon-weixinzhifu {
+								color: #09bb07;
+							}
+							.icon-gerenwangyinzhifu {
+								color: #034582;
+							}
+							.icon-daewangyinzhuanzhang {
+								font-size: 68rpx;
+								color: #034582;
+							}
+							.icon-qiyewangyinzhifu {
+								color: #004889;
+							}
+						}
+						.item-texts {
+							line-height: 96rpx;
+							font-size: $font-size-26;
+							color: $text-color;
+						}
+						.item-text {
+							line-height: 48rpx;
+							font-size: $font-size-26;
+							.txt-p {
+								color: $text-color;
+							}
+							.txt-t {
+								font-size: $font-size-24;
+								color: #999999;
+							}
+						}
+					}
+					.item-r {
+						flex: 2;
+						text-align: center;
+						line-height: 96rpx;
+						.icon-duigou {
+							font-size: 60rpx;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+	}
+	.pay-button {
+		width: 100%;
+		float: left;
+		margin-top: 30rpx;
+		.btn {
+			width: 662rpx;
+			height: 88rpx;
+			border-radius: 44rpx;
+			font-size: $font-size-28;
+			line-height: 88rpx;
+			color: #ffffff;
+			margin: 0 auto;
+			text-align: center;
+			background: $btn-confirm;
+		}
+	}
+	.pay-statustext {
+		width: 100%;
+		height: auto;
+		float: left;
+		margin-top: 40rpx;
+		.pay-statustext-inner {
+			width: 662rpx;
+			height: 100%;
+			margin: 0 auto;
+			.pay-icon {
+				width: 62rpx;
+				height: 100%;
+				float: left;
+				text-align: center;
+				.iconfont {
+					color: #ff2a2a;
+					font-size: $font-size-36;
+					line-height: 20rpx;
+				}
+			}
+			.pay-text {
+				width: 560rpx;
+				height: 100%;
+				float: left;
+				line-height: 40rpx;
+				font-size: $font-size-24;
+				color: #ff2a2a;
+				text-align: justify;
+			}
+		}
+	}
+	.pay-bring {
+		width: 100%;
+		min-height: 190rpx;
+		padding: 24rpx 0;
+		background-color: #ffffff;
+		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		border-radius: 30rpx 30rpx 0 0;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		.pay-bring-line {
+			display: flex;
+			align-items: center;
+			.line {
+				display: inline-block;
+				width: 48rpx;
+				height: 2px;
+				background-color: #707070;
+			}
+		}
+		.pay-bring-content {
+			width: 654rpx;
+			height: auto;
+			padding: 0 24rpx;
+			.text {
+				font-size: $font-size-24;
+				color: #666;
+				line-height: 44rpx;
+				text-align: center;
+				&.bg-color {
+					color: $color-system;
+					line-height: 88rpx;
+				}
+			}
+			.text-v {
+				font-size: $font-size-28;
+				color: #4a4f58;
+				line-height: 70rpx;
+				text-align: left;
+				&.bg-color {
+					line-height: 44rpx;
+					color: $color-system;
+				}
+				.clipboard {
+					width: 84rpx;
+					height: 36rpx;
+					background: linear-gradient(34deg, rgba(255, 41, 41, 1) 0%, rgba(255, 109, 27, 1) 100%);
+					text-align: center;
+					font-size: $font-size-24;
+					color: #ffffff;
+					border-radius: 18rpx;
+					line-height: 36rpx;
+					display: inline-block;
+					margin-left: 10rpx;
+				}
+			}
+		}
+	}
+	.pay-bring-wrapper {
+		width: 100%;
+		padding: 24rpx 0;
+		background-color: #ffffff;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		.pay-bring-content {
+			width: 654rpx;
+			height: auto;
+			padding: 0 24rpx;
+			margin-top: 60rpx;
+			.text-title {
+				width: 100%;
+				height: 320rpx;
+				margin-bottom: 20rpx;
+				image {
+					width: 320rpx;
+					height: 320rpx;
+					display: block;
+					margin: 0 auto;
+				}
+			}
+			.text {
+				font-size: $font-size-24;
+				color: #666;
+				line-height: 44rpx;
+				text-align: center;
+				&.bg-color {
+					color: $color-system;
+					line-height: 88rpx;
+				}
+			}
+			.text-v {
+				font-size: $font-size-28;
+				color: #4a4f58;
+				line-height: 48rpx;
+				text-align: justify;
+				margin-bottom: 40rpx;
+				.label {
+					color: #999999;
+				}
+				&.bg-color {
+					line-height: 44rpx;
+					color: $color-system;
+				}
+				.clipboard {
+					height: 48rpx;
+					background: #e2e2e2;
+					text-align: center;
+					font-size: $font-size-24;
+					color: #999999;
+					border-radius: 24rpx;
+					line-height: 46rpx;
+					display: inline-block;
+					margin-left: 24rpx;
+					border: 1px solid #f7f7f7;
+					box-sizing: border-box;
+					padding: 0 10px;
+				}
+			}
+			.text-content {
+				width: 100%;
+				background-color: #f5f5f5;
+				box-sizing: border-box;
+				padding: 24rpx;
+				line-height: 44rpx;
+				font-size: $font-size-28;
+				color: $color-system;
+				text-align: justify;
+				margin-top: 60rpx;
+				border-radius: 8rpx;
+			}
+		}
+	}
+}
+.freight-alert {
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 8888;
+	transition: all 0.4s;
+	&.none {
+		display: none;
+	}
+	&.show {
+		display: block;
+	}
+	.content {
+		width: 422rpx;
+		height: 434rpx;
+		position: absolute;
+		background: $bg-color;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		margin: auto;
+		padding: 20rpx 32rpx;
+		border-radius: 12rpx;
+		.title {
+			width: 100%;
+			height: 68rpx;
+			line-height: 68rpx;
+			font-size: $font-size-28;
+			color: $text-color;
+			text-align: center;
+			position: relative;
+			.icon-iconfontguanbi {
+				width: 68rpx;
+				height: 68rpx;
+				text-align: center;
+				line-height: 68rpx;
+				position: absolute;
+				right: 0;
+				top: 0;
+				font-size: $font-size-36;
+				color: #999999;
+			}
+		}
+		.text-content {
+			width: 100%;
+			height: auto;
+			.text {
+				padding: 20rpx 0;
+				line-height: 44rpx;
+				font-size: $font-size-26;
+				color: #666666;
+				text-align: justify;
+			}
+			.text-p {
+				line-height: 44rpx;
+				font-size: $font-size-26;
+				color: $color-system;
+				text-align: left;
+			}
+		}
+	}
+}
+</style>