1170 lines
28 KiB
Vue
1170 lines
28 KiB
Vue
<template>
|
|
<view class="b-Shopping-Cart">
|
|
<!-- 肯德基 -->
|
|
<template v-if="BrandInfor['brand_id'] == 1">
|
|
<!-- 购物车 -->
|
|
<view class="shoppingcart">
|
|
<view class="left">
|
|
<view class="left-img">
|
|
<image class="img" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''"
|
|
:src="qnyurl('gouwuceicon.png')" mode="aspectFill">
|
|
</image>
|
|
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
|
|
</u-badge>
|
|
</view>
|
|
<view class="price">
|
|
<text class="yang">￥</text>
|
|
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right" @tap="create" :class="[Shoplength > 0?'right2':'']">
|
|
{{Shoplength > 0?'选好了':'未选择商品'}}
|
|
</view>
|
|
</view>
|
|
<!-- 购物车弹框 -->
|
|
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
|
|
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
|
|
<view class="popupcontent">
|
|
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
|
|
<template v-for="(item,index) in MealList">
|
|
<view class="popupcontent-item" :key='index'>
|
|
<!-- 商品 -->
|
|
<view class="name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="money">
|
|
<view class="price">
|
|
<text class="yang">￥</text>
|
|
<text
|
|
class="amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="quantity">
|
|
<image class="img" :src="qnyurl('jian.png')" mode="" @tap="reducecommodity(item)">
|
|
</image>
|
|
<view class="num">
|
|
{{item['num']}}
|
|
</view>
|
|
<image class="img" :src="qnyurl('jia.png')" mode="" @tap="Addcommodity(item)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<!-- 瑞幸购物车 -->
|
|
<template v-if="BrandInfor['brand_id'] == 13">
|
|
<!-- 购物车 -->
|
|
<view class="shoppingcart-rx">
|
|
<view class="shoppingcart-rx-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
|
|
<view class="shoppingcart-rx-left-img">
|
|
<image class="img" :src="qnyurl('shopping.png','rx')" mode="aspectFill">
|
|
</image>
|
|
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
|
|
</u-badge>
|
|
</view>
|
|
<view class="shoppingcart-rx-left-price">
|
|
<text class="yang">￥</text>
|
|
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="shoppingcart-rx-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
|
|
{{Shoplength > 0?'结算':'未选择商品'}}
|
|
</view>
|
|
</view>
|
|
<!-- 购物车弹框 -->
|
|
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
|
|
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
|
|
<view class="popupcontent-rx">
|
|
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
|
|
<view class="popupcontent-rx-top">
|
|
<view class="text">
|
|
已选商品
|
|
</view>
|
|
<view class="popupcontent-rx-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
|
|
<image class="img" :src="qnyurl('qingkong.png','rx')" mode=""></image>
|
|
<text>清空购物车</text>
|
|
</view>
|
|
</view>
|
|
<template v-for="(item,index) in MealList">
|
|
<view class="popupcontent-rx-item" :key='index'>
|
|
<view class="popupcontent-rx-item-commodity">
|
|
<view class="popupcontent-rx-item-commodity-img">
|
|
<image class="img" :src="item['product_img']" mode=""></image>
|
|
</view>
|
|
<view class="popupcontent-rx-item-commodity-infor">
|
|
<!-- 商品 -->
|
|
<view class="popupcontent-rx-item-commodity-infor-name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<view class="popupcontent-rx-item-commodity-infor-sku">
|
|
{{item['sku'].join('/')}}
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="popupcontent-rx-item-commodity-infor-money">
|
|
<view class="popupcontent-rx-item-commodity-infor-money-price">
|
|
<text
|
|
class="popupcontent-rx-item-commodity-infor-money-yang">￥</text>
|
|
<text
|
|
class="popupcontent-rx-item-commodity-infor-money-amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数量 -->
|
|
<view class="quantity">
|
|
<image class="img" :src="qnyurl('reduce.png','rx')" mode=""
|
|
@tap="reducecommodity(item)">
|
|
</image>
|
|
<view class="num">
|
|
{{item['num']}}
|
|
</view>
|
|
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addcommodity(item)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<!-- 星巴克 -->
|
|
<template v-if="BrandInfor['brand_id'] == 10">
|
|
<!-- 购物车 -->
|
|
<view class="shoppingcart-xbk">
|
|
<view class="shoppingcart-xbk-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
|
|
<view class="shoppingcart-xbk-left-img">
|
|
<image class="img" :src="qnyurl('shopping.png','xbk')" mode="heightFix">
|
|
</image>
|
|
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
|
|
</u-badge>
|
|
</view>
|
|
<view class="shoppingcart-xbk-left-price">
|
|
<text class="yang">￥</text>
|
|
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="shoppingcart-xbk-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
|
|
{{Shoplength > 0?'结算':'未选择商品'}}
|
|
</view>
|
|
</view>
|
|
<!-- 购物车弹框 -->
|
|
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
|
|
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
|
|
<view class="popupcontent-xbk">
|
|
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
|
|
<view class="popupcontent-xbk-top">
|
|
<view class="text">
|
|
已选商品
|
|
</view>
|
|
<view class="popupcontent-xbk-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
|
|
<image class="img" :src="qnyurl('qingkong.png','xbk')" mode=""></image>
|
|
<text>清空购物车</text>
|
|
</view>
|
|
</view>
|
|
<template v-for="(item,index) in MealList">
|
|
<view class="popupcontent-xbk-item" :key='index'>
|
|
<view class="popupcontent-xbk-item-commodity">
|
|
<view class="popupcontent-xbk-item-commodity-img">
|
|
<image class="img" :src="item['product_img']" mode=""></image>
|
|
</view>
|
|
<view class="popupcontent-xbk-item-commodity-infor">
|
|
<!-- 商品 -->
|
|
<view class="popupcontent-xbk-item-commodity-infor-name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<view class="popupcontent-xbk-item-commodity-infor-sku">
|
|
{{item['sku'].join('/')}}
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="popupcontent-xbk-item-commodity-infor-money">
|
|
<view class="popupcontent-xbk-item-commodity-infor-money-price">
|
|
<text
|
|
class="popupcontent-xbk-item-commodity-infor-money-yang">￥</text>
|
|
<text
|
|
class="popupcontent-xbk-item-commodity-infor-money-amount">{{RetainDecimalPoint((item['pay'] * item['num']))}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数量 -->
|
|
<view class="quantity">
|
|
<image class="img" :src="qnyurl('reduce.png','xbk')" mode=""
|
|
@tap="reducecommodity(item)">
|
|
</image>
|
|
<view class="num">
|
|
{{item['num']}}
|
|
</view>
|
|
<image class="img" :src="qnyurl('add.png','xbk')" mode="" @tap="Addcommodity(item)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<!-- 麦当劳 -->
|
|
<template v-if="BrandInfor['brand_id'] == 5">
|
|
<!-- 购物车 -->
|
|
<view class="shoppingcart-mdl">
|
|
<view class="shoppingcart-mdl-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
|
|
<view class="shoppingcart-mdl-left-img">
|
|
<image class="img" :src="qnyurl('gouwuceicon.png','mdl')" mode="heightFix">
|
|
</image>
|
|
<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
|
|
</u-badge>
|
|
</view>
|
|
<view class="shoppingcart-mdl-left-price">
|
|
<text class="yang">￥</text>
|
|
<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="shoppingcart-mdl-right theme-Union-Class-5-1" @tap="create" :class="[Shoplength > 0?'right2':'']">
|
|
{{Shoplength > 0?'结算':'未选择商品'}}
|
|
</view>
|
|
</view>
|
|
<!-- 购物车弹框 -->
|
|
<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
|
|
@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
|
|
<view class="popupcontent-mdl">
|
|
<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
|
|
<view class="popupcontent-mdl-top">
|
|
<view class="text">
|
|
已选商品
|
|
</view>
|
|
<view class="popupcontent-mdl-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
|
|
<image class="img" :src="qnyurl('qingkong.png','xbk')" mode=""></image>
|
|
<text>清空购物车</text>
|
|
</view>
|
|
</view>
|
|
<template v-for="(item,index) in MealList">
|
|
<view class="popupcontent-mdl-item" :key='index'>
|
|
<view style="display: flex;justify-content:space-between;margin-bottom: 15rpx;">
|
|
<view class="popupcontent-mdl-item-commodity">
|
|
<view class="popupcontent-mdl-item-commodity-img">
|
|
<image class="img" :src="item['product_img']" mode=""></image>
|
|
</view>
|
|
<view class="popupcontent-mdl-item-commodity-infor">
|
|
<!-- 商品 -->
|
|
<view class="popupcontent-mdl-item-commodity-infor-name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="popupcontent-mdl-item-commodity-infor-money">
|
|
<view class="popupcontent-mdl-item-commodity-infor-money-price">
|
|
<text
|
|
class="popupcontent-mdl-item-commodity-infor-money-yang">￥</text>
|
|
<text
|
|
class="popupcontent-mdl-item-commodity-infor-money-amount">{{RetainDecimalPoint((item['pay_price'] * item['num']))}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="quantity">
|
|
<view :class="`Reduce-Button theme-Union-Class-${BrandInfor['brand_id']}-2`" @tap.stop="reducecommodity(item)">
|
|
<view>-</view>
|
|
</view>
|
|
<view class="num">
|
|
{{item['num']}}
|
|
</view>
|
|
<view
|
|
:class="`Add-Button theme-Union-Class-${BrandInfor['brand_id']}-1`"
|
|
@tap.stop="Addcommodity(item)">
|
|
<view>+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popupcontent-mdl-item-commodity-infor-sku">
|
|
{{item['sku']}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// vuex
|
|
// import {
|
|
// mapGetters,
|
|
// mapMutations,
|
|
// mapActions
|
|
// } from 'vuex';
|
|
// 混入
|
|
import mixin from '@/static/js/mixin/mixin.js';
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
export default {
|
|
mixins: [mixin,restaurantmixins],
|
|
name: "b-Shopping-Cart",
|
|
props:{
|
|
tabbar:{
|
|
type:Array,
|
|
default:()=>[],
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 购物车
|
|
MealList: [],
|
|
// 购物车合计
|
|
totalPrice: 0,
|
|
// 购物车弹框显示变量
|
|
shoppingshow: false,
|
|
};
|
|
},
|
|
computed: {
|
|
// ...mapGetters({
|
|
// // 获取品牌Id
|
|
// BrandInfor: 'shopping/BrandInfor',
|
|
// // 获取餐厅信息
|
|
// GetShopInfor: 'shopping/GetShopInfor',
|
|
// // 获取购物车
|
|
// GetCartList: 'shopping/GetCartList',
|
|
// }),
|
|
//当前商店购物信息
|
|
// shopCart() {
|
|
// try {
|
|
// return {
|
|
// ...this['GetCartList']
|
|
// };
|
|
// } catch (e) {
|
|
// return {}
|
|
// }
|
|
// },
|
|
|
|
// 获取购物车长度
|
|
Shoplength() {
|
|
if (this['MealList']['length'] <= 0) {
|
|
this['shoppingshow'] = false;
|
|
}
|
|
return this['MealList']['length'];
|
|
}
|
|
},
|
|
watch: {
|
|
GetCartList: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
console.log(val, 'GetCartList');
|
|
this.initCategoryNum();
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* @本地数据与当前餐厅数格式化
|
|
* */
|
|
initCategoryNum() {
|
|
console.log(this['tabbar'],'-----------');
|
|
// 因为该方法是每次商品数据变更都会重新加载,所以不用考虑是否会重复添加问题
|
|
if (this['tabbar']['length'] <= 0) return;
|
|
console.log(this.GetCartList,'进入initCategoryNum');
|
|
console.time()
|
|
// 先将菜单数据整合成一个数组
|
|
let shoparr = [];
|
|
let newArr = [];
|
|
let Price = 0;
|
|
this['tabbar'].map(item => {
|
|
shoparr.push(...item['foods'])
|
|
});
|
|
// 将所有商品的id取出
|
|
let commodityids = shoparr.map(item => item['product_id']);
|
|
// 循环购物车
|
|
console.log(Object.keys(this['GetCartList']),'*********');
|
|
let list = Object.keys(this['GetCartList']);
|
|
console.log(list,'进入initCategoryNum');
|
|
for (let i = 0; i < list['length']; i++) {
|
|
console.log('*********');
|
|
// 将item转为数字
|
|
let id = +Object.keys(this['GetCartList'])[i];
|
|
// // 在commodityids中查找item
|
|
let index = commodityids.indexOf(id);
|
|
let item = {};
|
|
if (index != -1) {
|
|
item = {
|
|
// ...this['GetCartList'][id],
|
|
...shoparr[index],
|
|
num: this['GetCartList'][id]['num'],
|
|
sku: this['GetCartList'][id]['sku'],
|
|
sku_code: this['GetCartList'][id]['sku_code'],
|
|
restaurant_id: this['GetShopInfor']['restaurant_id'],
|
|
// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
|
|
pay: this['GetCartList'][id]['pay'] || 0
|
|
};
|
|
|
|
newArr.push(item);
|
|
if(this['BrandInfor']['brand_id'] == 10){
|
|
Price += ((+item['pay']) * item['num']);
|
|
}else{
|
|
Price += ((+item['pay_price']) * item['num']);
|
|
}
|
|
// 此处逻辑是将同商品下的不同规格数据取出来
|
|
if (this['GetCartList'][id]['Differentskulist'] && this['GetCartList'][id]['Differentskulist'][
|
|
'length'
|
|
] > 0) {
|
|
for (let i = 0; i < this['GetCartList'][id]['Differentskulist']['length']; i++) {
|
|
let _item = this['GetCartList'][id]['Differentskulist'][i];
|
|
console.log(_item);
|
|
_item = {
|
|
...shoparr[index],
|
|
num: _item['num'],
|
|
sku: _item['sku'],
|
|
sku_code: _item['sku_code'],
|
|
// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
|
|
pay:_item['pay']
|
|
};
|
|
this['GetCartList'][id]['Differentskulist'][i] = _item;
|
|
};
|
|
newArr.push(...this['GetCartList'][id]['Differentskulist']);
|
|
if(this['BrandInfor']['brand_id'] == 10){
|
|
Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay'] * e['num'])
|
|
.reduce((a, b) => a + b);
|
|
}else{
|
|
Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay_price'] * e['num'])
|
|
.reduce((a, b) => a + b);
|
|
}
|
|
}
|
|
|
|
} else {
|
|
// 后期处理存在购物车但是店铺已下架商品
|
|
}
|
|
};
|
|
console.log(newArr,'newArrnewArrnewArrnewArr');
|
|
this['MealList'] = newArr;
|
|
this['totalPrice'] = Price;
|
|
console.timeEnd()
|
|
console.log('结束initCategoryNum');
|
|
},
|
|
|
|
|
|
/**
|
|
* @添加数量/增加商品
|
|
* */
|
|
Addcommodity(item) {
|
|
console.log(item);
|
|
console.log(this,'*-*-*')
|
|
this.ADD_CART({
|
|
commodity: item
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @减少/删除商品
|
|
* */
|
|
reducecommodity(item) {
|
|
this.REDUCE_CART(item)
|
|
},
|
|
|
|
/**
|
|
* @创建订单页面
|
|
* */
|
|
create() {
|
|
if (this['Shoplength'] <= 0) return;
|
|
this['$parent']['loading'] = true;
|
|
let self = this;
|
|
self.SETREPLACE(self['MealList']);
|
|
switch (this['BrandInfor']['brand_id']) {
|
|
case 1:
|
|
uni.navigateTo({
|
|
url: `/pages/restaurant/order/orders-settlement/orders-settlement`,
|
|
success: () => {
|
|
this['$parent']['loading'] = false;
|
|
}
|
|
});
|
|
break;
|
|
case 5:
|
|
uni.navigateTo({
|
|
url: `/pages/restaurant/order/orders-settlement/orders-settlement`,
|
|
success: () => {
|
|
this['$parent']['loading'] = false;
|
|
}
|
|
});
|
|
break;
|
|
case 13:
|
|
uni.navigateTo({
|
|
url: `/pages/restaurant/order/orders-settlement/rx-orders-settlement`,
|
|
success: () => {
|
|
this['$parent']['loading'] = false;
|
|
}
|
|
});
|
|
break;
|
|
case 10:
|
|
uni.navigateTo({
|
|
url: `/pages/restaurant/order/orders-settlement/xbk_orders_settlement`,
|
|
success: () => {
|
|
this['$parent']['loading'] = false;
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 肯德基
|
|
.shoppingcart {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 20075;
|
|
background-color: #333333;
|
|
.left {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 50rpx;
|
|
|
|
&-img {
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.price {
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.yang {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 未选择商品样式
|
|
.right {
|
|
width: 235rpx;
|
|
height: 100rpx;
|
|
background: #DFDFDF;
|
|
color: #333333;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
// 已选择商品样式
|
|
.right2 {
|
|
background: #C63836 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.popupcontent {
|
|
width: 100%;
|
|
// padding-bottom: calc();
|
|
height: 642rpx;
|
|
background-color: #ffffff;
|
|
|
|
&-item {
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.name {
|
|
font-size: $FONTSIZE26;
|
|
max-width: 336rpx;
|
|
min-width: 336rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.money {
|
|
color: $THEMECOLOR1;
|
|
max-width: 115rpx;
|
|
min-width: 115rpx;
|
|
text-align: center;
|
|
|
|
.yang {
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
.price {
|
|
font-size: $FONTSIZE30;
|
|
}
|
|
}
|
|
|
|
.quantity {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: $FONTSIZE36;
|
|
|
|
.num {
|
|
max-width: 100rpx;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 瑞幸
|
|
.shoppingcart-rx {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 20075;
|
|
background-color: #ffffff;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
|
|
&-left {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-img {
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
}
|
|
|
|
|
|
&-price {
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.yang {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
width: 225rpx;
|
|
height: 77rpx;
|
|
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
|
|
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
|
|
border-radius: 48rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 77rpx;
|
|
}
|
|
}
|
|
|
|
.popupcontent-rx {
|
|
width: 100%;
|
|
// padding-bottom: calc();
|
|
height: 642rpx;
|
|
background-color: #ffffff;
|
|
|
|
.popupcontent-rx-top {
|
|
width: 100%;
|
|
height: 87rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
|
|
.text {
|
|
color: #666666;
|
|
}
|
|
|
|
&-empty {
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 0 15rpx 15rpx;
|
|
|
|
.img {
|
|
width: 29rpx;
|
|
height: 31rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-commodity {
|
|
display: flex;
|
|
|
|
&-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-infor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-left: 22rpx;
|
|
|
|
&-name {
|
|
font-size: $FONTSIZE30;
|
|
max-width: 336rpx;
|
|
min-width: 336rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-sku {
|
|
color: #999999;
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-money {
|
|
color: $THEMECOLOR1;
|
|
max-width: 115rpx;
|
|
min-width: 115rpx;
|
|
text-align: center;
|
|
color: #FF780F;
|
|
|
|
&-yang {
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-price {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $FONTSIZE30;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.quantity {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: $FONTSIZE36;
|
|
|
|
.num {
|
|
max-width: 100rpx;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 星巴克
|
|
.shoppingcart-xbk {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 20075;
|
|
background-color: #ffffff;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
|
|
&-left {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-img {
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
}
|
|
|
|
|
|
&-price {
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.yang {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
width: 225rpx;
|
|
height: 77rpx;
|
|
background: #00AF66;
|
|
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
|
|
border-radius: 48rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 77rpx;
|
|
}
|
|
}
|
|
|
|
.popupcontent-xbk {
|
|
width: 100%;
|
|
// padding-bottom: calc();
|
|
height: 642rpx;
|
|
background-color: #ffffff;
|
|
|
|
.popupcontent-xbk-top {
|
|
width: 100%;
|
|
height: 87rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
|
|
.text {
|
|
color: #666666;
|
|
}
|
|
|
|
&-empty {
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 0 15rpx 15rpx;
|
|
|
|
.img {
|
|
width: 29rpx;
|
|
height: 31rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-commodity {
|
|
display: flex;
|
|
|
|
&-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-infor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-left: 22rpx;
|
|
|
|
&-name {
|
|
font-size: $FONTSIZE30;
|
|
max-width: 336rpx;
|
|
min-width: 336rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-sku {
|
|
color: #999999;
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-money {
|
|
color: $THEMECOLOR1;
|
|
max-width: 115rpx;
|
|
min-width: 115rpx;
|
|
text-align: center;
|
|
color: #FF780F;
|
|
|
|
&-yang {
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-price {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $FONTSIZE30;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.quantity {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: $FONTSIZE36;
|
|
|
|
.num {
|
|
max-width: 100rpx;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 肯德基
|
|
.shoppingcart-mdl {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 20075;
|
|
background-color: #ffffff;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
|
|
&-left {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-img {
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
}
|
|
|
|
|
|
&-price {
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.yang {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
width: 225rpx;
|
|
height: 77rpx;
|
|
background: #00AF66;
|
|
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
|
|
border-radius: 48rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 77rpx;
|
|
}
|
|
}
|
|
|
|
.popupcontent-mdl {
|
|
width: 100%;
|
|
// padding-bottom: calc();
|
|
height: 642rpx;
|
|
background-color: #ffffff;
|
|
|
|
.popupcontent-mdl-top {
|
|
width: 100%;
|
|
height: 87rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
|
|
.text {
|
|
color: #666666;
|
|
}
|
|
|
|
&-empty {
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 0 15rpx 15rpx;
|
|
|
|
.img {
|
|
width: 29rpx;
|
|
height: 31rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-commodity {
|
|
display: flex;
|
|
|
|
&-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-infor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-left: 22rpx;
|
|
|
|
&-name {
|
|
font-size: $FONTSIZE30;
|
|
max-width: 336rpx;
|
|
min-width: 336rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-sku {
|
|
color: #999999;
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-money {
|
|
color: $THEMECOLOR1;
|
|
max-width: 115rpx;
|
|
min-width: 115rpx;
|
|
text-align: center;
|
|
color: #FF780F;
|
|
|
|
&-yang {
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-price {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $FONTSIZE30;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.quantity {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: $FONTSIZE36;
|
|
|
|
.num {
|
|
max-width: 100rpx;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|