支付页面新增

components/thorui/tui-modal/tui-modal.vue

@@ -22,7 +22,7 @@
 
 <script>
 	export default {
-		name: "tuiModal",
+		name: 'tuiModal',
 		props: {
 			//是否显示
 			show: {
@@ -31,30 +31,30 @@
 			},
 			width: {
 				type: String,
-				default: "84%"
+				default: '84%'
 			},
 			padding: {
 				type: String,
-				default: "40rpx 64rpx"
+				default: '40rpx 64rpx'
 			},
 			radius: {
 				type: String,
-				default: "24rpx"
+				default: '24rpx'
 			},
 			//标题
 			title: {
 				type: String,
-				default: ""
+				default: ''
 			},
 			//内容
 			content: {
 				type: String,
-				default: ""
+				default: ''
 			},
 			//内容字体颜色
 			color: {
 				type: String,
-				default: "#999"
+				default: '#999'
 			},
 			//内容字体大小 rpx
 			size: {
@@ -70,12 +70,12 @@
 				type: Array,
 				default: function() {
 					return [{
-						text: "取消",
-						type: "danger",
+						text: '取消',
+						type: 'danger',
 						plain: true //是否空心
 					}, {
-						text: "确定",
-						type: "danger",
+						text: '确定',
+						type: 'danger',
 						plain: false
 					}]
 				}
@@ -99,19 +99,19 @@
 		data() {
 			return {
 
-			};
+			}
 		},
 		methods: {
 			handleClick(e) {
-				if (!this.show) return;
-				const dataset = e.currentTarget.dataset;
+				if (!this.show) return
+				const dataset = e.currentTarget.dataset
 				this.$emit('click', {
 					index: Number(dataset.index)
-				});
+				})
 			},
 			handleClickCancel() {
-				if (!this.maskClosable) return;
-				this.$emit('cancel');
+				if (!this.maskClosable) return
+				this.$emit('cancel')
 			}
 		}
 	}

pages.json

@@ -158,6 +158,11 @@
 					"style": {
 						"navigationBarTitleText": "创建订单"
 					}
+				},{
+					"path": "order-pay",
+					"style": {
+						"navigationBarTitleText": "支付订单"
+					}
 				},
 				{
 					"path": "order-list",

pages/order/order-detail.vue

@@ -1,89 +1,100 @@
 <template>
-    <view class="order-detail" :class="{ hasBottom: hasControlNav }">
-        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
-
-        <view class="detail-top">
-            <!-- 订单状态 -->
-            <view class="order-status">{{ stateExpFormat(orderInfo.status) }}</view>
-            <!-- 收货地址 -->
-            <cm-choose-address :addressData="userInfo" disabled></cm-choose-address>
-        </view>
-
-        <!-- 订单商品列表 -->
-        <template v-for="(shopOrder, shopOrderIndex) in shopOrderList">
-            <view class="grid" :key="shopOrderIndex"></view>
-            <view class="shop-section" :key="shopOrderIndex">
-                <!-- 供应商 -->
-                <view class="origin">
-                    <image class="cover" :src="shopOrder.shopLogo"></image>
-                    <view class="name">{{ shopOrder.shopName }}</view>
-                </view>
-                <!-- 商品列表 -->
-                <view class="goods-list">
-                    <!-- 商品信息 -->
-                    <view class="order-goods" v-for="goods in shopOrder.orderProductList" :key="goods.productId">
-                        <cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
-                    </view>
-                </view>
-                <view class="line"></view>
-                <!-- 统计 -->
-                <!-- <view class="total">
+	<view class="order-detail" :class="{ hasBottom: hasControlNav }">
+		<tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
+
+		<view class="detail-top">
+			<!-- 订单状态 -->
+			<view class="order-status">{{ stateExpFormat(orderInfo.status) }}</view>
+			<!-- 收货地址 -->
+			<cm-choose-address :addressData="userInfo" disabled></cm-choose-address>
+		</view>
+
+		<!-- 订单商品列表 -->
+		<template v-for="(shopOrder, shopOrderIndex) in shopOrderList">
+			<view class="grid" :key="shopOrderIndex"></view>
+			<view class="shop-section" :key="shopOrderIndex">
+				<!-- 供应商 -->
+				<view class="origin">
+					<image class="cover" :src="shopOrder.shopLogo"></image>
+					<view class="name">{{ shopOrder.shopName }}</view>
+				</view>
+				<!-- 商品列表 -->
+				<view class="goods-list">
+					<!-- 商品信息 -->
+					<view class="order-goods" v-for="goods in shopOrder.orderProductList" :key="goods.productId">
+						<cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
+					</view>
+				</view>
+				<view class="line"></view>
+				<!-- 统计 -->
+				<!-- <view class="total">
 					<view class="count">共{{ shopOrder.itemCount }}件商品</view>
 					<view class="status">
 						<text class="label">商品总额：</text>
 						<text>￥{{ shopOrder.totalAmount | formatPrice }}</text>
 					</view>
 				</view> -->
-                <view class="description">
-                    <view class="row"> <text class="label">商品总额：</text> <text>￥200</text> </view>
-                    <view class="row"> <text class="label">优惠：</text> <text>￥200</text> </view>
-                    <view class="row"> <text class="label">应付金额：</text> <text>￥200</text> </view>
-                    <view class="row"> <text class="label">已付金额：</text> <text>￥200</text> </view>
-                    <view class="row"> <text class="label">待付金额：</text> <text>￥200</text> </view>
-                    <view class="collapse">收起</view>
-                </view>
-            </view>
-        </template>
-
-        <view class="grid"></view>
-        <!-- 订单详细信息 -->
-        <cm-order-information :orderInfo="orderInfo"></cm-order-information>
-
-        <!-- 操作 -->
-        <view class="order-control" v-if="hasControlNav" :class="{ 'has-bottom': isIphoneX }">
-            <cm-order-control-nav
-                :orderInfo="orderInfo"
-                @confirm="handleConfirmClick"
-                :hasBottom="isIphoneX"
-                @change="getButtonCount"
-            ></cm-order-control-nav>
-        </view>
-
-        <!-- 操作弹窗 -->
-        <tui-modal
-            :show="modal"
-            :content="modalText"
-            :size="32"
-            :maskClosable="false"
-            color="#333"
-            shape="circle"
-            @click="handleModalConfirm"
-        ></tui-modal>
-
-        <!-- 加载框 -->
-        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
-
-        <!-- 失效商品列表 -->
-        <cm-order-invalid-modal
-            :goodsList="invalidList"
-            :visible="buyAgainModal"
-            @confirm="buyAgainModalClick"
-            @cancel="buyAgainModalHide"
-        ></cm-order-invalid-modal>
-
-        <!-- 底部占位 -->
-        <view class="reserved" v-if="isIphoneX"></view>
-    </view>
+				<view class="remark">
+					<text class="label">留言：</text>
+					<text class="content">这是留言这是留言这是留言这是留言这是留言</text>
+				</view>
+				<view class="line"></view>
+				<view class="description">
+					<uni-transition :show="isCollapse" modeClass="slide-top" >
+						<view class="collapse-content">
+							<view class="row">
+								<text class="label">商品总额：</text>
+								<text class="content">￥200</text>
+							</view>
+							<view class="row">
+								<text class="label">优惠：</text>
+								<text class="content">￥200</text>
+							</view>
+							<view class="row">
+								<text class="label">应付金额：</text>
+								<text class="content">￥200</text>
+							</view>
+							<view class="row">
+								<text class="label">已付金额：</text>
+								<text class="content">￥200</text>
+							</view>
+						</view>
+					</uni-transition>
+					<view class="row">
+						<text class="label active">待付金额：</text>
+						<text class="content active">￥200</text>
+					</view>
+					<view class="collapse iconfont" @click="onCollapse">收起</view>
+				</view>
+			</view>
+		</template>
+
+		<view class="grid"></view>
+		<!-- 订单详细信息 -->
+		<cm-order-information :orderInfo="orderInfo"></cm-order-information>
+
+		<!-- 操作 -->
+		<view class="order-control" v-if="hasControlNav" :class="{ 'has-bottom': isIphoneX }">
+			<cm-order-control-nav :orderInfo="orderInfo" @confirm="handleConfirmClick" :hasBottom="isIphoneX" @change="getButtonCount"></cm-order-control-nav>
+		</view>
+
+		<!-- 操作弹窗 -->
+		<tui-modal :show="modal" :content="modalText" :size="32" :maskClosable="false" color="#333" shape="circle" @click="handleModalConfirm"></tui-modal>
+
+		<!-- 加载框 -->
+		<cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
+
+		<!-- 失效商品列表 -->
+		<cm-order-invalid-modal
+			:goodsList="invalidList"
+			:visible="buyAgainModal"
+			@confirm="buyAgainModalClick"
+			@cancel="buyAgainModalHide"
+		></cm-order-invalid-modal>
+
+		<!-- 底部占位 -->
+		<view class="reserved" v-if="isIphoneX"></view>
+	</view>
 </template>
 
 <script>
@@ -98,200 +109,249 @@ import wechatPay from './mixins/wechatPay.js'
 
 import { mapGetters } from 'vuex'
 export default {
-    mixins: [wechatPay, orderList],
-    components: {
-        CmOrderProdcut,
-        CmOrderInformation,
-        CmOrderControlNav,
-        CmOrderInvalidModal,
-        CmLoading,
-        CmChooseAddress
-    },
-    data() {
-        return {
-            isRequest: false,
-            orderId: '',
-            discernReceiptList: [],
-            shopOrderList: [],
-            orderInfo: {},
-            userInfo: {}
-        }
-    },
-    computed: {
-        ...mapGetters(['userId', 'userIdentity', 'isIphoneX']),
-        // 当前用户是否为协销
-        isDealer() {
-            return this.userIdentity === 2
-        },
-        hasControlNav() {
-            return this.orderInfo.buyUserId === this.userId
-        }
-    },
-    onLoad(option) {
-        this.orderId = option.orderId
-        this.getOrderDetail()
-        this.$on('orderAction', () => {
-            this.getOrderDetail()
-        })
-        this.orderPaySuccess()
-    },
-    beforeDestroy() {
-        this.$off('orderAction')
-    },
-    methods: {
-        // 支付回调执行函数
-        orderPaySuccess() {
-            this.$on('orderPaySuccess', () => {
-                const orderInfo = this.hanldOrder.order
-                this.getOrderDetail()
-                if (orderInfo.collageFlag) {
-                    uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
-                } else {
-                    uni.redirectTo({ url: '/pages/order/success' })
-                }
-            })
-        },
-
-        getOrderDetail() {
-            this.OrderService.QueryOrderDetails({ orderId: this.orderId })
-                .then(res => {
-                    this.discernReceiptList = res.data.discernReceiptList
-                    this.shopOrderList = res.data.shopOrderList
-                    this.orderInfo = res.data.order
-                    this.userInfo = res.data.userInfo
-                    this.isRequest = false
-                })
-                .catch(err => {
-                    this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
-                        this.$api.switchTabTo('/pages/tabBar/index/index')
-                    })
-                })
-        },
-        getButtonCount(e) {
-            this.buttonCount = e.count
-            console.log(e.count)
-        }
-    }
+	mixins: [wechatPay, orderList],
+	components: {
+		CmOrderProdcut,
+		CmOrderInformation,
+		CmOrderControlNav,
+		CmOrderInvalidModal,
+		CmLoading,
+		CmChooseAddress
+	},
+	data() {
+		return {
+			isRequest: false,
+			orderId: '',
+			discernReceiptList: [],
+			shopOrderList: [],
+			orderInfo: {},
+			userInfo: {},
+			isCollapse: false
+		}
+	}, 
+	computed: {  
+		...mapGetters(['userId', 'userIdentity', 'isIphoneX']),
+		// 当前用户是否为协销
+		isDealer() {
+			return this.userIdentity === 2
+		},
+		hasControlNav() {
+			return this.orderInfo.buyUserId === this.userId
+		}
+	},
+	onLoad(option) {
+		this.orderId = option.orderId
+		this.getOrderDetail()
+		this.$on('orderAction', () => {
+			this.getOrderDetail()
+		})
+		this.orderPaySuccess()
+	},
+	beforeDestroy() {
+		this.$off('orderAction')
+	},
+	methods: {
+		// 支付回调执行函数
+		orderPaySuccess() {
+			this.$on('orderPaySuccess', () => {
+				const orderInfo = this.hanldOrder.order
+				this.getOrderDetail()
+				if (orderInfo.collageFlag) {
+					uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
+				} else {
+					uni.redirectTo({ url: '/pages/order/success' })
+				}
+			})
+		},
+
+		getOrderDetail() {
+			this.OrderService.QueryOrderDetails({ orderId: this.orderId })
+				.then(res => {
+					this.discernReceiptList = res.data.discernReceiptList
+					this.shopOrderList = res.data.shopOrderList
+					this.orderInfo = res.data.order
+					this.userInfo = res.data.userInfo
+					this.isRequest = false
+				})
+				.catch(err => {
+					this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
+						this.$api.switchTabTo('/pages/tabBar/index/index')
+					})
+				})
+		},
+		getButtonCount(e) {
+			this.buttonCount = e.count
+			console.log(e.count)
+		},
+		onCollapse(){
+			this.isCollapse = !this.isCollapse
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
 .order-detail {
-    min-height: 100vh;
-    background: #f7f7f7;
-
-    padding-top: 138rpx + 60rpx;
-    box-sizing: border-box;
-
-    &.has-bottom {
-        padding-bottom: 100rpx;
-    }
-
-    .order-status {
-        height: 60rpx;
-        font-size: 26rpx;
-        line-height: 26rpx;
-        padding: 34rpx 24rpx 0;
-        box-sizing: border-box;
-        color: #ff457b;
-        background: #fff;
-    }
-
-    .detail-top {
-        height: 134rpx + 60rpx;
-        position: fixed;
-        top: 0;
-        z-index: 999;
-    }
-
-    .grid {
-        height: 20rpx;
-        background: #f7f7f7;
-    }
-
-    .shop-section {
-        background: #fff;
-        overflow: hidden;
-
-        .line {
-            width: 702rpx;
-            height: 1px;
-            background: #f7f7f7;
-            margin: 0 auto;
-        }
-
-        .origin {
-            padding: 0 24rpx;
-            margin-top: 24rpx;
-            margin-bottom: 16rpx;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-
-            .cover {
-                width: 56rpx;
-                height: 56rpx;
-                border-radius: 4rpx;
-                border: 1px solid #f7f7f7;
-                box-sizing: border-box;
-            }
-
-            .name {
-                margin-left: 16rpx;
-                font-size: 30rpx;
-                color: #333333;
-                font-weight: bold;
-            }
-        }
-
-        .goods-list {
-            margin-bottom: 32rpx;
-            .order-goods {
-                padding-top: 32rpx;
-                &:first-child {
-                    padding-top: 0;
-                }
-            }
-        }
-    }
-
-    .total {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        padding: 0 24rpx;
-        margin: 32rpx 0;
-
-        font-size: 26rpx;
-        color: #333333;
-
-        .count {
-            font-weight: bold;
-        }
-
-        .status {
-            color: #ff457b;
-
-            .label {
-                color: #333333;
-            }
-        }
-    }
-
-    .order-control {
-        position: fixed;
-        width: 100%;
-        box-sizing: border-box;
-        height: 100rpx;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        bottom: 0;
-        background: #fff;
-        &.has-bottom {
-            bottom: 50rpx;
-        }
-    }
+	min-height: 100vh;
+	background: #f7f7f7;
+
+	padding-top: 138rpx + 60rpx;
+	box-sizing: border-box;
+
+	&.has-bottom {
+		padding-bottom: 100rpx;
+	}
+
+	.order-status {
+		height: 60rpx;
+		font-size: 26rpx;
+		line-height: 26rpx;
+		padding: 34rpx 24rpx 0;
+		box-sizing: border-box;
+		color: #ff457b;
+		background: #fff;
+	}
+
+	.detail-top {
+		height: 134rpx + 60rpx;
+		position: fixed;
+		top: 0;
+		z-index: 999;
+	}
+
+	.grid {
+		height: 20rpx;
+		background: #f7f7f7;
+	}
+
+	.shop-section {
+		background: #fff;
+		overflow: hidden;
+
+		.line {
+			width: 702rpx;
+			height: 1px;
+			background: #f7f7f7;
+			margin: 0 auto;
+		}
+
+		.origin {
+			padding: 0 24rpx;
+			margin-top: 24rpx;
+			margin-bottom: 16rpx;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+
+			.cover {
+				width: 56rpx;
+				height: 56rpx;
+				border-radius: 4rpx;
+				border: 1px solid #f7f7f7;
+				box-sizing: border-box;
+			}
+
+			.name {
+				margin-left: 16rpx;
+				font-size: 30rpx;
+				color: #333333;
+				font-weight: bold;
+			}
+		}
+
+		.goods-list {
+			margin-bottom: 32rpx;
+			.order-goods {
+				padding-top: 32rpx;
+				&:first-child {
+					padding-top: 0;
+				}
+			}
+		}
+	}
+
+	.total {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		padding: 0 24rpx;
+		margin: 32rpx 0;
+
+		font-size: 26rpx;
+		color: #333333;
+
+		.count {
+			font-weight: bold;
+		}
+
+		.status {
+			color: #ff457b;
+
+			.label {
+				color: #333333;
+			}
+		}
+	}
+
+	.order-control {
+		position: fixed;
+		width: 100%;
+		box-sizing: border-box;
+		height: 100rpx;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		bottom: 0;
+		background: #fff;
+		&.has-bottom {
+			bottom: 50rpx;
+		}
+	}
+
+	.remark {
+		font-size: 26rpx;
+		color: #333333;
+		padding: 0 24rpx;
+		margin: 32rpx 0;
+	}
+	.description {
+		overflow: hidden;
+		padding: 0 24rpx;
+		font-size: 26rpx;
+		.row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin: 16rpx 0;
+			.label {
+				color: #999999;
+
+				&.active {
+					color: #333333;
+				}
+			}
+			.content {
+				color: #333333;
+
+				&.active {
+					color: #ff457b;
+				}
+			}
+		}
+
+		.collapse {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 168rpx;
+			height: 48rpx;
+			margin: 24rpx auto 40rpx;
+			border: 1rpx solid #e1e1e1;
+			border-radius: 8rpx;
+			font-size: 24rpx;
+			color: #b2b2b2;
+		}
+	}
 }
 </style>

pages/order/order-pay.vue

@@ -0,0 +1,285 @@
+<template>
+	<view class="order-pay">
+		<view class="top-tip">请对每家店铺分别进行付款</view>
+		<view class="shop-info">
+			<view class="shop-name">浙江瑞琪</view>
+			<view class="product-list">
+				<view class="product">
+					<image class="cover" src="https://picsum.photos/200/200" mode="widthFix"></image>
+					<view class="content">
+						<view class="title">韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清...</view>
+						<view class="unit">规格：10ml/盒</view>
+						<view class="tags">
+							<view class="tag type1">促销</view>
+							<view class="tag type1">自营</view>
+							<view class="tag type2">活动价</view>
+						</view>
+						<view class="price">
+							<text class="active">￥50.00</text>
+							<text class="deleted">￥80.00</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="total">
+				<text>优惠：￥20.00</text>
+				<text>已付：￥0</text>
+			</view>
+			<view class="foot">
+				<view class="price">
+					<text>待付：</text>
+					<text class="active">￥100.00</text>
+				</view>
+				<view class="submit">付款</view>
+			</view>
+		</view>
+
+		<view class="shop-info">
+			<view class="shop-name">浙江瑞琪</view>
+			<view class="product-list">
+				<view class="product">
+					<image class="cover" src="https://picsum.photos/200/200" mode="widthFix"></image>
+					<view class="content">
+						<view class="title">韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清...</view>
+						<view class="unit">规格：10ml/盒</view>
+						<view class="tags">
+							<view class="tag type1">促销</view>
+							<view class="tag type1">自营</view>
+							<view class="tag type2">活动价</view>
+						</view>
+						<view class="price">
+							<text class="active">￥50.00</text>
+							<text class="deleted">￥80.00</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- <view class="total">
+				<text>优惠：￥20.00</text>
+				<text>已付：￥0</text>
+			</view> -->
+			<view class="foot">
+				<view class="price">
+					<text>待付：</text>
+					<text class="active">￥100.00</text>
+				</view>
+				<view class="submit">付款</view>
+			</view>
+		</view>
+
+		<view class="shop-info">
+			<view class="shop-name">采美快递物流商</view>
+			<view class="product-list">
+				<view class="product">
+					<image class="cover" src="https://picsum.photos/200/200" mode="widthFix"></image>
+					<view class="content between">
+						<view class="title">运费</view>
+						<view class="price"><text>￥50.00</text></view>
+						<view class="count">×7</view>
+					</view>
+				</view>
+			</view>
+			<view class="total">
+				<!-- <text>优惠：￥20.00</text> -->
+				<text>已付：￥0</text>
+			</view>
+			<view class="foot">
+				<view class="price">
+					<text>待付：</text>
+					<text class="active">￥100.00</text>
+				</view>
+				<view class="submit" @click="onPay">付款</view>
+			</view>
+		</view>
+
+		<!-- 弹框 -->
+		<tui-modal
+			:show="modal"
+			:size="30"
+			:button="[{ text: '确定', type: 'danger' }]"
+			shape="circle"
+			color="#333333"
+			title="提示"
+			content="抱歉，该商品支付正在调整暂不支持下单!"
+			@click="onConfirm"
+		></tui-modal>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			modal: true
+		}
+	},
+	methods: {
+		onConfirm(e) {
+			if (e.index) return
+			this.modal = false
+		},
+		onPay() {
+			this.modal = true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.order-pay {
+	min-height: 100vh;
+	background: #f7f7f7;
+	.top-tip {
+		height: 80rpx;
+		line-height: 80rpx;
+		padding: 0 24rpx;
+		background: #fff3f7;
+		color: #ff457b;
+		font-size: 26rpx;
+	}
+
+	.shop-info {
+		padding: 32rpx 24rpx;
+		background-color: #fff;
+		margin-bottom: 20rpx;
+		.shop-name {
+			font-size: 30rpx;
+			color: #333333;
+			font-weight: bold;
+		}
+		.product-list {
+			.product {
+				display: flex;
+				margin: 20rpx 0;
+				.cover {
+					width: 180rpx;
+					height: 180rpx;
+					border-radius: 8rpx;
+					background-color: #f7f7f7;
+				}
+				.content {
+					position: relative;
+					width: 500rpx;
+					margin-left: 16rpx;
+
+					.count {
+						position: absolute;
+						bottom: 0;
+						right: 0;
+						font-size: 26rpx;
+						color: #666;
+					}
+
+					&.between {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+					}
+
+					.title {
+						font-size: 28rpx;
+						color: #333333;
+						text-align: justify;
+						height: 72rpx;
+						line-height: 36rpx;
+					}
+					.unit {
+						font-size: 20rpx;
+						color: #999999;
+						margin: 8rpx 0;
+					}
+					.tags {
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+						width: 100%;
+						height: 30rpx;
+						.tag {
+							margin-right: 8rpx;
+							font-size: 22rpx;
+							height: 30rpx;
+							line-height: 30rpx;
+							text-align: center;
+
+							&.type1 {
+								padding: 0 8rpx;
+								background: #f83c6c;
+								border-radius: 4rpx;
+								color: #fff;
+							}
+
+							&.type2 {
+								width: 80rpx;
+								color: #f83c6c;
+								background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
+								background-size: contain;
+							}
+							&.type3 {
+								width: 80rpx;
+								background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
+								color: #fff;
+								border-radius: 4rpx;
+							}
+							&.type4 {
+								border: 1rpx solid #f83c6c;
+								padding: 0 6rpx;
+								color: #f83c6c;
+								border-radius: 4rpx;
+							}
+						}
+					}
+				}
+				.price {
+					font-size: 26rpx;
+					.active {
+						color: #ff457b;
+					}
+
+					.deleted {
+						font-size: 24rpx;
+						color: #999;
+						text-decoration: line-through;
+					}
+				}
+			}
+		}
+		.total {
+			padding-left: 220rpx - 24rpx;
+			margin: 16rpx 0 20rpx;
+			font-size: 26rpx;
+			color: #333;
+
+			text {
+				&:nth-child(2) {
+					margin-left: 56rpx;
+				}
+			}
+		}
+		.foot {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			.price {
+				font-size: 26rpx;
+				color: #333333;
+
+				.active {
+					color: #ff457b;
+				}
+			}
+			.submit {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 160rpx;
+				height: 64rpx;
+				margin-left: 40rpx;
+				background: linear-gradient(90deg, #fa55bf 0%, #f83c6c 100%);
+				color: #ffffff;
+				border-radius: 32rpx;
+				font-size: 26rpx;
+			}
+		}
+	}
+}
+</style>