修改订单详情订单列表价格展示，增加会员价

commons/utils/goodsUtil.js

@@ -19,6 +19,9 @@ export function canTuiKuan(orderInfo,item){
 export function isTui(item){
 	return  item.status=='return'||item.status=='refund'||item.status=='refunding'
 }
+export function isGift(item){
+	return  !isTui(item)&&item.gift
+}
 export function numSum(arr){
 	const sum=arr.reduce((a,b)=>{
 		return a+b*100

http/yskApi/Instead.js

@@ -332,3 +332,61 @@ export function $returnOrder(data) {
     }
   });
 }
+
+//获取订单可用优惠券
+export function $activateByOrderId(data) {
+  return request({
+    url: '/api/tbShopCoupon/activateByOrderId',
+    method: "get",
+    params:{
+      shopId: uni.getStorageSync("shopId"),
+      ...data
+    }
+  });
+}
+
+//会员积分列表
+export function $returnMemberPointsList(data) {
+  return request({
+    url: '/api/points/member-points/page',
+    method: "get",
+    params:{
+      shopId: uni.getStorageSync("shopId"),
+      ...data
+    }
+  });
+}
+
+// 会员积分账户信息
+export function $returnMemberPoints(memberId) {
+  return request({
+    url: '/api/points/member-points/'+memberId,
+    method: "get",
+    params:{
+      shopId: uni.getStorageSync("shopId"),
+      ...data
+    }
+  });
+}
+//002-获取订单可用积分及抵扣金额（支付页面使用）
+export function $calcUsablePoints(data) {
+  return request({
+    url: '/api/points/member-points/calc-usable-points',
+    method: "get",
+    params:{
+      shopId: uni.getStorageSync("shopId"),
+      ...data
+    }
+  });
+}
+// 003-根据积分计算可抵扣金额
+export function $calcDeDuctionPoints(data) {
+  return request({
+    url: '/api/points/member-points/calc-deduction-amount',
+    method: "get",
+    params:{
+      shopId: uni.getStorageSync("shopId"),
+      ...data
+    }
+  });
+}

pages.json

@@ -878,6 +878,7 @@
 				},
 				{
 					"path" : "quan/quan",
+					"pageId": "PAGES_ORDER_QUAN",
 					"style" : 
 					{
 						"navigationBarTitleText" : "券包"

pagesOrder/detail/components/list.vue

@@ -26,7 +26,9 @@
 										<view class="tui" v-if="isTui(item)">
 											{{item.status=='refunding'?'退款中':'已退'}}
 										</view>
-										<view :class="{'line-th':item.status=='return'||item.status=='refund'||item.status=='refunding'}">{{item.name||item.productName}}
+										<view
+											:class="{'line-th':item.status=='return'||item.status=='refund'||item.status=='refunding'}">
+											{{item.name||item.productName}}
 										</view>
 									</view>
 									<view class="u-flex u-m-t-8">
@@ -54,8 +56,20 @@
 										<view class="line-th color-666 ">￥{{returnTotalMoney(item)}}
 										</view>
 									</template>
+									<template v-else-if="isGift(item)">
+										<view>￥0.00</view>
+										<view class="line-th color-666 ">￥{{returnTotalMoney(item)}}
+										</view>
+									</template>
 									<template v-else>
-										<view>￥{{returnTotalMoney(item)}}</view>
+										<template v-if="user.isVip&&returnVipMoney(item)>0&&returnVipMoney(item)!=returnTotalMoney(item)">
+											<view>￥{{returnVipMoney(item)}}</view>
+											<view class=" color-666 line-th">
+												￥{{returnTotalMoney(item)}}</view>
+										</template>
+										<template v-else>
+											<view>￥{{returnTotalMoney(item)}}</view>
+										</template>
 									</template>
 									<view class="u-m-t-22 color-999 u-font-24">X{{item.number||item.num}}</view>
 								</view>
@@ -70,10 +84,10 @@
 						</view>
 					</template>
 					<template v-if="canTuiKuan(orderInfo,item)">
-							<view class="u-flex u-row-right gap-20 u-m-t-20">
+						<view class="u-flex u-row-right gap-20 u-m-t-20">
-								<my-button :width="128" :height="48" plain shape="circle"
+							<my-button :width="128" :height="48" plain shape="circle" @tap="tuikuan(item,index)"><text
-									@tap="tuikuan(item,index)"><text class="no-wrap">退款</text> </my-button>
+									class="no-wrap">退款</text> </my-button>
-							</view>
+						</view>
 					</template>
 
 				</view>
@@ -99,9 +113,15 @@
 					</template>
 				</view>
 
-				<view>
+				<view class="u-flex">
-					<text>小计￥</text>
+					<view class="color-red  u-m-r-24" v-if="youhuiAllPrice>0">
-					<text class="font-bold u-font-32">{{allPrice}}</text>
+						已优惠￥{{youhuiAllPrice}}
+					</view>
+					<view>
+						<text>小计￥</text>
+						<text class="font-bold u-font-32">{{allPrice}}</text>
+					</view>
+				
 				</view>
 			</view>
 
@@ -148,9 +168,44 @@
 	import {
 		hasPermission
 	} from '@/commons/utils/hasPermission.js'
-	import {isTui,canTuiKuan,canTuicai,numSum} from '@/commons/utils/goodsUtil.js'
+	import {
+		isTui,isGift,
+		canTuiKuan,
+		canTuicai,
+		numSum
+	} from '@/commons/utils/goodsUtil.js'
+	const props = defineProps({
+		orderInfo: {
+			type: Object,
+			default: () => {}
+		},
+		data: {
+			type: Array,
+			default: () => []
+		},
+		seatFee: {
+			type: Object,
+			default: () => {}
+		},
+		user: {
+			type: Object,
+			default: () => {
+				return {
+					id: '',
+					isVip: false
+				}
+			}
+		}
+	})
 	const emits = defineEmits(['tuicai', 'tuikuan', 'printOrder'])
 
+	function returnVipMoney(item) {
+		if (!item.memberPrice || !props.user.isVip) {
+			return 0
+		}
+		return (item.memberPrice * item.num).toFixed(2)
+	}
+
 	function returnTotalMoney(item) {
 		return (item.price * item.num).toFixed(2)
 	}
@@ -177,20 +232,7 @@
 	function printOrder() {
 		emits('printOrder')
 	}
-	const props = defineProps({
+
-		orderInfo: {
-			type: Object,
-			default: () => {}
-		},
-		data: {
-			type: Array,
-			default: () => []
-		},
-		seatFee: {
-			type: Object,
-			default: () => {}
-		}
-	})
 
 	const seatFeePrice = computed(() => {
 		if (!props.seatFee.priceAmount) {
@@ -199,21 +241,44 @@
 		const n = props.seatFee.priceAmount * (props.seatFee.status == 'return' ? 0 : 1)
 		return n.toFixed(2)
 	})
-
+	const goodsOriginAllPrice = computed(() => {
-	const allPrice = computed(() => {
 		const goodsPrice = props.data.reduce((prve, cur) => {
-			const curTotal = cur.info.filter(v => v.gift != true && v.status !== "return").reduce((a,
+			const curTotal = cur.info.reduce((a,
 				b) => {
-				// return a +  b.priceAmount*1||(b.num*b.price+b.packAmount*1)
-				// return a +  (b.num*b.price+b.packAmount*1)
 				return a + (b.num * b.price)
 			}, 0)
 			return prve + curTotal
 		}, 0)
 		return goodsPrice.toFixed(2)
-
 	})
 	
+	const freePrice = computed(() => {
+		const goodsPrice = props.data.reduce((prve, cur) => {
+			const curTotal = cur.info.filter(v => v.gift == true || isTui(v)).reduce((a,
+				b) => {
+				return a + (b.num * b.price)
+			}, 0)
+			return prve + curTotal
+		}, 0)
+		return goodsPrice.toFixed(2)
+	})
+	const vipDiscountPrice = computed(() => {
+		if (!props.user.isVip) {
+			return 0
+		}
+		const goodsPrice = props.data.reduce((prve, cur) => {
+			const curTotal = cur.info.filter(v => v.gift != true && v.status !== "return"&&v.memberPrice&&(v.memberPrice!=v.price)).reduce((a,
+				b) => {
+				return a + (b.num * (b.price-b.memberPrice))
+			}, 0)
+			return prve + curTotal
+		}, 0)
+		return goodsPrice.toFixed(2)
+	})
+	const youhuiAllPrice=computed(()=>{
+		console.log(freePrice.value);
+		return (freePrice.value*1+vipDiscountPrice.value*1).toFixed(2)
+	})
 	const packFee = computed(() => {
 		const goodsPrice = props.data.reduce((prve, cur) => {
 			const curTotal = cur.info.filter(v => v.gift != true && v.status !== "return").reduce((a,
@@ -225,7 +290,9 @@
 		return goodsPrice.toFixed(2)
 
 	})
-
+	const allPrice = computed(() => {
+		return (goodsOriginAllPrice.value-freePrice.value-vipDiscountPrice.value).toFixed(2)
+	})
 
 	const goodsNumber = computed(() => {
 		let result = 0

pagesOrder/detail/detail.vue

@@ -6,6 +6,7 @@
 			<text class="">{{orderDetail.info.tableName}}</text>
 		</view> -->
 		<goods-list @printOrder="onPrintOrder" @tuikuan="onTuikuan" :orderInfo="orderDetail.info"
+		:user="user"
 			:data="orderDetail.goodsList" :seatFee="orderDetail.seatFee" @tuicai="onTuiCai"></goods-list>
 		<!-- <template v-if="orderDetail.seatFee.totalNumber&&orderDetail.seatFee.totalAmount"> -->
 		<template v-if="true">
@@ -318,7 +319,7 @@
 		totalScore:'0.00'
 	})
 	//更新选择用户
-	function setUser(par) {
+	async  function setUser(par) {
 		const submitPar = {
 			orderId:options.id||'',
 			masterId: options.masterId,
@@ -327,7 +328,9 @@
 			type: user.value.id ? 0 : 1 //0 设置 1 取消
 		}
 		Object.assign(submitPar, par)
-		return Api.$setUser(submitPar)
+		 const res=await  Api.$setUser(submitPar)
+		 init()
+		 return res
 	}
 	
 	

pagesOrder/index/compoents/order-item.vue

@@ -41,12 +41,27 @@
 							</view>
 							<view class="u-flex u-flex-1 u-row-right">
 								<view>×{{item.num}}</view>
-								<view class="u-text-right u-relative" :style="computedPriceStyle()">
+								<template v-if="item.gift">
-									<text :class="{'line-th':item.gift}">￥{{goodsPriceAmount(item)}}</text>
+									<view class="u-text-right u-relative" :style="computedPriceStyle()">
-									<view class="u-absolute" style="bottom: 100%;right: 0;" v-if="item.gift">
+										<text class="line-th">￥{{goodsPriceAmount(item)}}</text>
-										￥0
+										<view class="u-absolute" style="bottom: 100%;right: 0;" >
+											￥0
+										</view>
 									</view>
-								</view>
+								</template>
+								<template v-else-if="data.memberId&&item.memberPrice&&item.memberPrice!=item.price">
+									<view class="u-text-right u-relative" :style="computedPriceStyle()">
+										<text class="line-th">￥{{goodsPriceAmount(item)}}</text>
+										<view class="u-absolute" style="bottom: 100%;right: 0;" >
+											￥{{goodsVipPriceAmount(item)}}
+										</view>
+									</view>
+								</template>
+								<template v-else>
+									<view class="u-text-right u-relative" :style="computedPriceStyle()">
+										<text >￥{{goodsPriceAmount(item)}}</text>
+									</view>
+								</template>
 							</view>
 						</view>
 					
@@ -123,6 +138,10 @@
 	function goodsPriceAmount(item){
 		return (item.price*item.num).toFixed(2)
 	}
+	function goodsVipPriceAmount(item){
+		const price=props.data.memberId?item.memberPrice: item.price
+		return (price*item.num).toFixed(2)
+	}
 	// const packeFee=computed(()=>{
 	// 	return props.data.detailList.reduce((prve,cur)=>{
 	// 		return prve+cur.packAmount

pagesOrder/pay-order/pay-order.vue

@@ -15,15 +15,31 @@
 		</view>
 		<view class="content bg-fff  border-r-12">
 			<view class="  u-p-t-30 u-p-l-26 u-p-r-26 card top  u-m-t-30">
-				<view class="u-flex u-p-l-24 u-p-r-24 border-bottom-dashed u-row-between u-p-b-30">
+				<view class="border-bottom-dashed u-p-b-30">
-					<view>优惠券</view>
+					<view class="u-flex u-p-l-24 u-p-r-24  u-row-between " @click="toQuan">
-					<view class="color-999 u-flex u-col-center">
+						<view>优惠券</view>
-						<text>选择优惠券</text>
+						<view class="color-999 u-flex u-col-center">
-						<view class="u-flex u-col-center">
+							<text>选择优惠券</text>
-							<uni-icons type="right" color="#999"></uni-icons>
+							<view class="u-flex u-col-center">
+								<uni-icons type="right" color="#999"></uni-icons>
+							</view>
 						</view>
 					</view>
+					<view class="u-m-t-24" v-if="pays.quan.length>0">
+						<view class="u-flex u-p-l-24 u-p-r-24 u-m-t-24  u-row-between " v-for="(item,index) in pays.quan" :key="index">
+							<view class="u-flex">
+								<view class="hui">减</view>
+								<view class="u-m-l-18">{{item.name}}</view>
+							</view>
+							<view class="color-red">
+								￥{{item.discountAmount}}
+							</view>
+						</view>
+					</view>
+					
 				</view>
+				
+				
 				<view class="u-flex u-p-l-24 u-p-r-24 border-bottom u-row-between u-p-t-30 u-p-b-30"
 					v-if="discount.price&&discount.currentPrice!=order.amount">
 					<view>服务员改价</view>
@@ -45,7 +61,7 @@
 										<text class="u-m-l-10 no-wrap">{{item.payName}}</text>
 									</view>
 									<view class="u-flex color-999 u-font-24">
-										<view class="u-m-r-20" v-if="item.payType=='vipPay'">
+										<view class="u-m-r-20" v-if="item.payType=='vipPay'&&user.id">
 											<view>
 												<text>会员：</text>
 												<text class="u-m-r-4">{{user.telephone||user.nickName}}</text>
@@ -130,6 +146,18 @@
 	import * as orderApi from '@/http/yskApi/order.js'
 	import infoBox from '@/commons/utils/infoBox.js'
 	import editDiscount from '@/components/my-components/edit-discount.vue'
+	function toQuan(){
+		console.log(order);
+		if(!order.memberId){
+			return infoBox.showToast('请先选择会员',0.5).then(()=>{
+				chooseUser()
+			})
+		}
+		go.to('PAGES_ORDER_QUAN',{
+			orderId:order.id,
+			memberId:order.memberId
+		})
+	}
 	async function discountShow(){
 		const bol=await hasPermission('yun_xu_da_zhe')
 		if(bol){
@@ -173,7 +201,8 @@
 		payTypes: {
 			list: [],
 			selIndex: 0
-		}
+		},
+		quan:[]
 	})
 	
 	function chooseUser() {
@@ -184,9 +213,9 @@
 		console.log(option);
 		const submitPar = {
 			tableId: order.tableId,
+			orderId:order.id,
 			masterId: order.masterId,
 			vipUserId: user.value.id ? user.value.id : '',
-			orderId:order.id,
 			type: user.value.id ? 0 : 1 //0 设置 1 取消
 		}
 		Object.assign(submitPar, par)
@@ -206,8 +235,17 @@
 			 })
 		})
 	}
+	function watchChooseQuan() {
+		uni.$off('choose-quan')
+		uni.$on('choose-quan', (arr) => {
+			console.log(arr);
+			pays.quan=arr
+		})
+	}
+	
 	onShow(()=>{
 		watchChooseuser()
+		watchChooseQuan()
 	})
 
 	watch(() => pays.selIndex, (newval) => {
@@ -381,6 +419,15 @@
 </script>
 
 <style lang="scss" scoped>
+	$quan-color: #318AFE;
+	.hui {
+		// background-color: $quan-color;
+		background-image: linear-gradient(to right bottom,rgb(254,103,4),rgb(241,50,42));
+		padding: 4rpx 10rpx;
+		border-radius: 10rpx;
+		font-size: 24rpx;
+		color: #fff;
+	}
 	.box-shadow {
 		box-shadow: 0 0 5px #E5E5E5;
 	}

pagesOrder/quan/quan.vue

@@ -1,22 +1,355 @@
 <template>
-	<view>
+	<view class="u-p-l-30 u-p-r-30 u-p-t-30  u-font-28 ">
+		<up-sticky offset-top="0">
+			<my-tabs v-model="myQuan.types.sel" :list="myQuan.types.list"></my-tabs>
+		</up-sticky>
+		<view class="u-m-t-32">
+			<template v-if="myQuan.types.sel==0">
+				<view class="" @click="changeFullReductionCouponSel(item)"
+					v-for="(item,index) in myQuan.res.fullReductionCoupon" :class="{filtergray:item.status}"
+					:key="index">
+					<view class="quan  u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
+						<view class="sel u-abso" v-if="item.id==myQuan.fullReductionCouponSel.id ">
+							<up-icon name="checkbox-mark" color="#fff"></up-icon>
+						</view>
+						<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24">
+							<view class="u-flex">
+								<view class="hui">减</view>
+								<view class="u-m-l-18">{{item.name}}</view>
+							</view>
+							<view class=" u-m-t-20 u-flex">
+								<view>有效期:</view>
+								<view class="u-font-24 u-m-l-6"> {{item.endTime}}</view>
+							</view>
+							<view class="u-m-t-10 color-999 u-font-24">
+								{{ formatStr(item.useRestrictions)}}
+							</view>
+						</view>
+						<view class="right u-flex u-flex-col u-row-between">
+							<view class="u-flex u-row-center u-font-36 ">
+								￥{{item.discountAmount}}
+							</view>
+							<view class="u-flex u-font-24">
+								满{{item.fullAmount}}可用
+							</view>
+							<view class="u-flex ">
+								<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<template v-if="myQuan.res.fullReductionCoupon.length<=0&&myQuan.hasAjax">
+					<my-img-empty tips="暂无可用优惠券"></my-img-empty>
+				</template>
+			</template>
 
+			<template v-if="myQuan.types.sel==1">
+				<view class="" @click="changeProductCoupon(item)" v-for="(item,index) in myQuan.res.productCoupon"
+					:class="{filtergray:item.status}" :key="index">
+					<view class="quan goods u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
+						<view class="sel u-abso" v-if="item.checked">
+							<up-icon name="checkbox-mark" color="#fff"></up-icon>
+						</view>
+						<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24">
+							<view class="u-flex">
+								<up-image width="80rpx" height="80rpx" :src="item.productCover"></up-image>
+								<view class="u-m-l-18">{{item.productName}}</view>
+							</view>
+							<view class=" u-m-t-14 u-flex">
+								<view>有效期:</view>
+								<view class="u-font-24 u-m-l-6"> {{item.endTime}}</view>
+							</view>
+							<view class="u-m-t-10 color-999 u-font-24">
+								{{ formatStr(item.useRestrictions)}}
+							</view>
+						</view>
+						<view class="right u-flex u-flex-col u-col-bottom u-row-center">
+							<view class="u-flex ">
+								<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
+							</view>
+						</view>
+					</view>
+
+				</view>
+				<template v-if="myQuan.res.productCoupon.length<=0&&myQuan.hasAjax">
+					<my-img-empty tips="暂无可用优惠券"></my-img-empty>
+				</template>
+			</template>
+
+
+		</view>
+
+		<view :style="{height:safebottomHeight+'px'}"></view>
+		<view class="fixed-b u-flex gap-20 bottom safe-bottom border-top">
+			<up-button shape="circle" plain @click="back">
+				<view class="font-bold">取消</view>
+			</up-button>
+			<up-button shape="circle" type="primary" @click="toEmitChooseQuan()">
+				<view class="font-bold" >确定</view>
+			</up-button>
+		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		data() {
+		ref,
-			return {
+		reactive,
-				
+		watch,
-			}
+		computed,
-		},
+		onMounted
-		methods: {
+	} from 'vue';
-			
+	import color from '@/commons/color.js'
-		}
+	import {
+		getSafeBottomHeight
+	} from '@/commons/utils/safe-bottom.js'
+	import go from '@/commons/utils/go.js'
+	import {
+		onLoad,
+		onReady
+	} from '@dcloudio/uni-app'
+	import {
+		$activateByOrderId
+	} from '@/http/yskApi/Instead.js'
+	function back(){
+		uni.navigateBack()
 	}
+	const myQuan = reactive({
+		fullReductionCouponSel: {
+			id: ''
+		},
+		res: {
+			fullReductionCoupon: [],
+			productCoupon: []
+		},
+		types: {
+			list: ['满减券(单选)', '商品券(多选)'],
+			sel: 0
+		},
+		list: [],
+		sel: -1,
+		hasAjax: false
+	})
+
+	function changeProductCoupon(item) {
+		item.checked = !item.checked
+	}
+
+	function changeFullReductionCouponSel(item) {
+		myQuan.fullReductionCouponSel = item
+	}
+
+	function formatStr(str) {
+		return str.replaceAll('"', '')
+	}
+
+	function toUse(item) {
+
+	}
+
+	async function getQuan() {
+		const res = await $activateByOrderId(option)
+		res.fullReductionCoupon = res.fullReductionCoupon.filter((v) => !v.use)
+		res.productCoupon = res.productCoupon.filter((v) => !v.use).map(v => {
+			return {
+				...v,
+				checked: false
+			}
+		});
+		myQuan.res = res
+		myQuan.hasAjax = true;
+	}
+	const option = reactive({
+		orderId: '',
+		memberId: '',
+	})
+	
+	function toEmitChooseQuan(item){
+		let arr=[]
+		if(item){
+			arr=[item]
+		}else{
+			if(myQuan.fullReductionCouponSel.id){
+				arr.push(myQuan.fullReductionCouponSel)
+			}
+			const goodsQuan=myQuan.res.productCoupon.filter(v=>v.checked)
+			arr.push(...goodsQuan)
+		}
+		uni.$emit('choose-quan',arr)
+		back()
+	}
+	
+	onLoad((opt) => {
+		Object.assign(option, opt)
+		getQuan()
+	})
+	let safebottomHeight = ref(0)
+	onReady(() => {
+		getSafeBottomHeight('bottom',0).then(height => {
+			safebottomHeight.value = height
+		})
+	})
 </script>
 
-<style>
+<style lang="scss" scoped>
+	// $quan-color:rgb(233, 77, 60);
+	$quan-color: #318AFE;
 
+	.fixed-b {
+		position: fixed;
+		bottom: 0;
+		background-color: #fff;
+		right: 0;
+		left: 0;
+	}
+
+	.bg-gray {
+		border-radius: 18rpx;
+		overflow: hidden;
+	}
+
+	.price1 {
+		color: rgb(255, 107, 0);
+	}
+
+	.payType {
+		.radio {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background-color: rgb(255, 212, 0);
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 40rpx;
+			opacity: 0;
+
+		}
+
+		.active {
+			.radio {
+				opacity: 1;
+			}
+		}
+	}
+
+	.left-block {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: -30rpx;
+			display: block;
+			width: 12rpx;
+			top: 0;
+			background-color: rgb(255, 212, 0);
+			bottom: 0;
+		}
+	}
+
+	.filtergray {
+		filter: grayscale(1);
+	}
+
+	.radio {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgb(255, 255, 255);
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 40rpx;
+
+		&.active {}
+	}
+
+	.use-btn {
+		background-color: #fff;
+		border-radius: 100rpx;
+		padding: 4rpx 20rpx;
+		color: $quan-color;
+	}
+
+	.u-font-40 {
+		font-size: 40rpx;
+	}
+
+	.yilingqu {
+		position: absolute;
+		bottom: 20rpx;
+		right: 20rpx;
+	}
+
+	.lingqu {
+		position: absolute;
+		bottom: 20rpx;
+		right: 20rpx;
+		background-color: rgb(255, 207, 0);
+		padding: 10rpx 30rpx;
+		border-radius: 100rpx;
+	}
+
+	.btn {
+		background-color: $my-main-color;
+		color: #fff;
+		border: none;
+		padding: 10rpx 20rpx;
+		border-radius: 10rpx;
+	}
+
+	.hui {
+		// background-color: $quan-color;
+		background-image: linear-gradient(to right bottom,rgb(254,103,4),rgb(241,50,42));
+		padding: 4rpx 10rpx;
+		border-radius: 10rpx;
+		font-size: 24rpx;
+		color: #fff;
+	}
+
+	.quan {
+		border: 1px solid rgb(238, 238, 238);
+		position: relative;
+		border-radius: 10rpx;
+		box-shadow: 0 0 5px #eee;
+		overflow: hidden;
+
+		.sel {
+			padding: 2rpx 4rpx;
+			position: absolute;
+			background-color: $quan-color;
+			left: 0;
+			top: 0;
+			border-radius: 0 0 24rpx 0;
+		}
+
+		.right {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			padding: 20rpx 24rpx;
+			color: #fff;
+			display: flex;
+			flex-direction: column;
+			background-color: $quan-color;
+			height: 100%;
+		}
+
+		&.goods {
+			.right {
+				background-color: #fff;
+				position: initial;
+
+				.use-btn {
+					padding: 10rpx 40rpx;
+					color: #fff;
+					background-color: $quan-color;
+				}
+			}
+		}
+	}
+
+	.bottom {
+		padding: 30rpx 30rpx 80rpx 30rpx;
+	}
 </style>