917 lines
24 KiB
Vue
917 lines
24 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 未登录状态 显示空购物车 按钮为去登录 -->
|
||
<view v-if="!isLogin" class="cart-empty">
|
||
<image class="empty-img" src="@/static/empty/cart.png" mode="widthFix"></image>
|
||
<view class="empty-text">您的购物车还没有商品，快去挑选吧</view>
|
||
<view class="empty-btn" @tap="toLoginDiy">去登录</view>
|
||
</view>
|
||
<!-- 未登录状态 end-->
|
||
<view v-if="isLogin && cartListArr == 0" class="cart-empty">
|
||
<image class="empty-img" src="@/static/empty/cart.png" mode="widthFix"></image>
|
||
<view class="empty-text">您的购物车还没有商品，快去挑选吧</view>
|
||
<view class="empty-btn" @tap="toHomeDiy">去挑选好货</view>
|
||
</view>
|
||
<!-- 已登录状态 显示空购物车 end-->
|
||
<!-- 购物车商品列表模块 已登录状态 并且购物车列表有值 -->
|
||
<!-- 购物车列表 -->
|
||
<view class="cart-box" v-if="isLogin && cartListArr != 0">
|
||
<!-- 当商品不能购买(item.stock == 0 || item.is_sale == 0)时 选中按钮失效 并且添加滤镜效果 -->
|
||
<view v-for="(dataItem, i) in cartListArr" :key="i" class="cart-box-item">
|
||
<!-- 店铺信息 -->
|
||
<view class="flex align-center merchant-info" v-if="dataItem.shop_info">
|
||
<view class="check-box-1" @tap="check(dataItem, i)">
|
||
<text
|
||
v-if="isEditor"
|
||
:class="{
|
||
checked_icon: true,
|
||
checked_active: dataItem.delChecked,
|
||
}"
|
||
class="fu-iconfont2"
|
||
>
|
||
{{ dataItem.delChecked ? '' : '' }}
|
||
</text>
|
||
<text v-else :class="{ checked_icon: true, checked_active: dataItem.checked }" class="fu-iconfont2">
|
||
{{ dataItem.checked ? '' : '' }}
|
||
</text>
|
||
</view>
|
||
<view class="text-df text-666" @click="goMerchant(dataItem.shop_info)">
|
||
<text class="fu-iconfont2 shop_icon"></text>
|
||
<text>{{ dataItem.shop_info.store_name }}</text>
|
||
<text class="fu-iconfont2 shop_right_icon"></text>
|
||
</view>
|
||
</view>
|
||
<!-- 判断没有绑定商品的商品放在一起 -->
|
||
<view
|
||
class="cart-item"
|
||
v-for="(item, index) in dataItem.cart_list"
|
||
:key="index"
|
||
:class="{
|
||
'not-but-class': item.stock == 0 || item.is_sale == 0 || item.is_check == 0,
|
||
}"
|
||
>
|
||
<view class="check-box" @tap="icheck(item, i, index)">
|
||
<text v-if="isEditor" :class="{ checked_icon: true, checked_active: item.delChecked }" class="fu-iconfont2">
|
||
{{ item.delChecked ? '' : '' }}
|
||
</text>
|
||
<text v-else :class="{ checked_icon: true, checked_active: item.checked }" class="fu-iconfont2">
|
||
{{ item.checked ? '' : '' }}
|
||
</text>
|
||
</view>
|
||
<!-- 商品图片 -->
|
||
<view class="img-box">
|
||
<view class="no-stok" v-if="item.is_check == 0">
|
||
<image class="no-stock-img" src="@/static/cart/no.png" mode=""></image>
|
||
</view>
|
||
<view class="no-stok" v-if="item.stock == 0">
|
||
<image class="no-stock-img" src="@/static/cart/sellOut.png" mode=""></image>
|
||
</view>
|
||
<view class="no-stok" v-if="item.is_sale == 0">
|
||
<image class="no-stock-img" src="@/static/cart/shelf.png" mode=""></image>
|
||
</view>
|
||
<view class="img" @tap="toDetail(item, 1)">
|
||
<fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
|
||
</view>
|
||
</view>
|
||
<!-- 商品详细信息 -->
|
||
<view class="info-box">
|
||
<view class="info-top">
|
||
<view class="title" @tap="toDetail(item, 1)">{{ item.goods_name }}</view>
|
||
<view class="text-df text-999 sku_name" v-if="item.sku_name" @tap="openPopup(item)">
|
||
<view class="overFlow_text">
|
||
<text>{{ item.sku_name }}</text>
|
||
</view>
|
||
<view style="flex-shrink: 0">
|
||
<text style="margin-right: 16rpx">选规格</text>
|
||
<text class="cuIcon-unfold lg text-gray"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="price-box">
|
||
<view class="price">
|
||
<text class="small">￥</text>
|
||
{{ filterGoodsPrice(item) }}
|
||
</view>
|
||
<view class="number">
|
||
<uni-number-box
|
||
:min="1"
|
||
:disabled="item.is_valid == 2"
|
||
:max="Number(item.stock)"
|
||
:value="item.num"
|
||
@change="numberChange($event, i, index)"
|
||
></uni-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 购物车列表 end-->
|
||
<!-- 购物车底部操作栏部分 -->
|
||
<view class="cart-footer">
|
||
<view class="footer-left">
|
||
<view class="check-box" @tap="checkAll">
|
||
<text v-if="isEditor" :class="{ checked_icon: true, checked_active: delAllChecked }" class="fu-iconfont2">
|
||
{{ delAllChecked ? '' : '' }}
|
||
</text>
|
||
<text v-else :class="{ checked_icon: true, checked_active: allChecked }" class="fu-iconfont2">
|
||
{{ allChecked ? '' : '' }}
|
||
</text>
|
||
</view>
|
||
<view class="text-box">
|
||
<text class="text1 margin-left-xs">全选</text>
|
||
</view>
|
||
</view>
|
||
<!-- 右边 正常状态 未点击管理时isEditor=false -->
|
||
<view class="footer-right" v-if="!isEditor">
|
||
<view class="all-text">
|
||
<view class="text1">合计：</view>
|
||
<view class="text-price-box">
|
||
<text class="small">￥</text>
|
||
{{ totalPrice }}
|
||
</view>
|
||
</view>
|
||
<view class="jiesuan-btn" @click="createOrder">结算 ({{ totalNumber }})</view>
|
||
</view>
|
||
<!-- 右边 编辑状态 已经点击管理时 isEditor=true-->
|
||
<view class="footer-right" v-if="isEditor">
|
||
<view class="footer-btn" @click="delCart(2)">移入收藏</view>
|
||
<view class="footer-btn delect" @click="delCart(1)">删除</view>
|
||
</view>
|
||
</view>
|
||
<!-- 购物车底部操作栏部分 end-->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
function isDisabled(ele) {
|
||
// || ele.is_valid != 1
|
||
return ele.stock == 0 || ele.is_valid != 0 || ele.is_check == 0 || ele.is_sale == 0
|
||
}
|
||
export default {
|
||
name: 'benben-multiquotient-cart',
|
||
components: {},
|
||
mixins: [],
|
||
// 购物车列表
|
||
props: {
|
||
cartList: {
|
||
type: [Array, Object],
|
||
default: () => [],
|
||
},
|
||
// 管理 or 完成
|
||
isEditor: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
cartListArr: [],
|
||
checkedCache: uni.getStorageSync('cart_checked_cache') || [], // 上一次缓存的选中状态
|
||
setTimeoutFn: null,
|
||
}
|
||
},
|
||
computed: {
|
||
isLogin() {
|
||
return this.$store.state.token == '' ? false : true
|
||
},
|
||
// // 选择的商品总价
|
||
totalPrice() {
|
||
let list = this.cartListArr
|
||
let total = 0
|
||
// if (list == undefined) return
|
||
// console.log(list)
|
||
list.forEach((item) => {
|
||
item.cart_list.forEach((j) => {
|
||
if (j.checked == true) {
|
||
// 价格区分会员用户
|
||
let _price = this.filterGoodsPrice(j)
|
||
total += Number(_price) * Number(j.num)
|
||
}
|
||
})
|
||
})
|
||
return Number(total.toFixed(2))
|
||
},
|
||
// 正常状态选择的商品数量
|
||
totalNumber() {
|
||
let list = this.cartListArr
|
||
let total = 0
|
||
if (list == undefined) return
|
||
list.forEach((item) => {
|
||
item.cart_list.forEach((j) => {
|
||
if (j.checked == true) {
|
||
total += Number(j.num)
|
||
}
|
||
})
|
||
})
|
||
return total
|
||
},
|
||
// 删除时选择的商品数量
|
||
totalNumberDel() {
|
||
let list = this.cartListArr
|
||
let total = 0
|
||
if (list == undefined) return
|
||
list.forEach((item) => {
|
||
item.cart_list.forEach((j) => {
|
||
if (j.delChecked == true) {
|
||
total += Number(j.num)
|
||
}
|
||
})
|
||
})
|
||
return total
|
||
},
|
||
// 购物车内的商品数量
|
||
allNumber() {
|
||
let list = this.cartListArr
|
||
let total = 0
|
||
if (list == undefined) return
|
||
list.forEach((item) => {
|
||
total += Number(item.num)
|
||
})
|
||
return total
|
||
},
|
||
// 管理模式全选状态
|
||
delAllChecked() {
|
||
let list = this.cartListArr
|
||
let bool = true
|
||
if (list == undefined) return
|
||
list.forEach((item) => {
|
||
if (!item.delChecked) {
|
||
bool = false
|
||
}
|
||
})
|
||
return bool
|
||
},
|
||
// 正常模式全选状态
|
||
allChecked: {
|
||
cache: false,
|
||
get: function () {
|
||
let list = this.cartListArr
|
||
let bool = true
|
||
console.log(list)
|
||
if (list == undefined) return false
|
||
list.forEach((item) => {
|
||
console.log('item.checked', item.checked)
|
||
if (!item.checked) {
|
||
bool = false
|
||
}
|
||
})
|
||
return bool
|
||
},
|
||
},
|
||
},
|
||
watch: {
|
||
cartList: {
|
||
handler(value) {
|
||
console.log(value)
|
||
if (value.length == 0) {
|
||
this.$emit('update:is-editor', false)
|
||
}
|
||
value.forEach((item) => {
|
||
let bool = true
|
||
item.cart_list.forEach((ele) => {
|
||
ele.delChecked = false
|
||
if (isDisabled(ele) || !this.checkedCache.includes(ele.aid)) {
|
||
ele.checked = false
|
||
bool = false
|
||
} else {
|
||
ele.checked = true
|
||
}
|
||
})
|
||
item.checked = bool
|
||
})
|
||
this.cartListArr = JSON.parse(JSON.stringify(value))
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
cartListArr: {
|
||
handler(value) {
|
||
console.log(value)
|
||
if (value.length == 0) return
|
||
let arr = []
|
||
value.forEach((item) => {
|
||
item.cart_list.forEach((ele) => {
|
||
if (ele.checked) {
|
||
arr.push(ele.aid)
|
||
}
|
||
})
|
||
})
|
||
this.checkedCache = arr
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
created() {},
|
||
beforeDestroy() {
|
||
uni.setStorageSync('cart_checked_cache', this.checkedCache)
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
openPopup(item) {
|
||
this.$emit('update:cart-id', item.aid)
|
||
this.$emit('update:sku-id', item.sku_id)
|
||
this.$emit('update:cart-num', item.num)
|
||
this.$emit('update:goods-id', item.goods_id)
|
||
this.$emit('changeSku')
|
||
},
|
||
// 判断是否为会员价，活动价和商品价
|
||
filterGoodsPrice(value) {
|
||
if (!value) return ''
|
||
let isMember = this.$store.getters.isMember // 是否是会员
|
||
let isActivity = value.activity_type == undefined || value.activity_type == 0 ? false : true // 是否是活动
|
||
let member_activity_price = value.member_activity_price ? value.member_activity_price : value.activity_price //会员活动价
|
||
let activity_price = value.activity_price // 活动价
|
||
let member_price = value.member_price ? value.member_price : value.shop_price // 会员价
|
||
let shop_price = value.shop_price // 售卖价
|
||
if (isActivity) {
|
||
return isMember ? member_activity_price : activity_price
|
||
} else {
|
||
return isMember ? member_price : shop_price
|
||
}
|
||
},
|
||
// 去店铺
|
||
goMerchant(item) {
|
||
this.$emit('update:merchant-id', item.aid)
|
||
this.$emit('goMerchant')
|
||
},
|
||
// 店铺选中状态处理
|
||
check(item, i) {
|
||
if (this.isEditor) {
|
||
let delChecked = !item.delChecked
|
||
this.$set(item, 'delChecked', delChecked)
|
||
item.cart_list.forEach((j) => {
|
||
j.delChecked = delChecked
|
||
})
|
||
} else {
|
||
let checked = !item.checked
|
||
this.$set(item, 'checked', checked)
|
||
item.cart_list.forEach((j) => {
|
||
if (isDisabled(j)) {
|
||
j.checked = false
|
||
} else {
|
||
this.$set(j, 'checked', checked)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 监听是否店铺全选商品
|
||
allcheckGood(item, i) {
|
||
console.log(item)
|
||
if (this.isEditor) {
|
||
// 店铺内商品全选
|
||
if (item.cart_list.findIndex((target) => target.delChecked == false) == -1) {
|
||
item.delChecked = true
|
||
} else {
|
||
// 店铺内商品全不选
|
||
item.delChecked = false
|
||
}
|
||
} else {
|
||
// 店铺内商品全选
|
||
if (item.cart_list.findIndex((target) => target.checked == false) == -1) {
|
||
item.checked = true
|
||
} else {
|
||
// 店铺内商品全不选
|
||
this.cartListArr[i].checked = false
|
||
}
|
||
}
|
||
},
|
||
// 商品选中处理状态
|
||
icheck(item, i, index) {
|
||
// if (item.is_check == 0) return this.$message.info('该商品已下架');
|
||
// if (item.stock == 0) return this.$message.info('该商品已售完,正在采购中');
|
||
// if (item.is_sale == 0) return this.$message.info('该商品已下架');
|
||
if (!this.isEditor && !isDisabled(item)) {
|
||
this.$set(item, 'checked', !item.checked)
|
||
this.allcheckGood(this.cartListArr[i], i)
|
||
}
|
||
if (this.isEditor) {
|
||
this.$set(item, 'delChecked', !item.delChecked)
|
||
this.allcheckGood(this.cartListArr[i], i)
|
||
}
|
||
},
|
||
//全选|取消全选
|
||
checkAll() {
|
||
if (this.isEditor) {
|
||
const bool = !this.delAllChecked
|
||
this.cartListArr.forEach((item) => {
|
||
item.delChecked = bool
|
||
// 商品全选
|
||
item.cart_list.forEach((j) => {
|
||
j.delChecked = bool
|
||
})
|
||
})
|
||
} else {
|
||
const bool = !this.allChecked
|
||
this.cartListArr.forEach((item) => {
|
||
item.checked = bool
|
||
// 商品全选
|
||
item.cart_list.forEach((j) => {
|
||
if (j.is_sale == 0 || j.stock == 0) {
|
||
j.checked = false
|
||
} else {
|
||
j.checked = bool
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
/** @description 数量改变
|
||
* @param {Object} e
|
||
* @param {string} index
|
||
*/
|
||
numberChange(e, i, index) {
|
||
this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
|
||
this.setTimeoutFn = setTimeout(() => {
|
||
let list = this.cartListArr[i].cart_list
|
||
if (e != list[index].num) {
|
||
if (list[index].stock < e) {
|
||
e = list[index].stock
|
||
}
|
||
this.$set(list[index], 'num', e)
|
||
this.$emit('update:cart-id', list[index].aid)
|
||
this.$emit('update:sku-id', list[index].sku_id)
|
||
this.$emit('update:cart-num', e)
|
||
this.$emit('numberChange')
|
||
}
|
||
}, 500)
|
||
},
|
||
|
||
/**
|
||
* @method 移入收藏卡
|
||
* @param {Number} type 1: 删除, 2: 移入收藏
|
||
*/
|
||
delCart(type) {
|
||
let ids = []
|
||
this.cartListArr.forEach((item) => {
|
||
item.cart_list.map((val) => {
|
||
if (val.delChecked) {
|
||
ids.push(val.aid)
|
||
}
|
||
})
|
||
})
|
||
if (ids.length == 0) return this.$message.info(type == 1 ? '请选择要删除的商品' : '请选择要移动的商品')
|
||
this.$util.showModal({
|
||
title: '提示',
|
||
content: type == 1 ? '确认删除吗?' : '确认移入收藏夹吗?',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
if (type == 1) {
|
||
this.$emit('update:cart-ids', ids.join(','))
|
||
this.$emit('delCart')
|
||
} else {
|
||
this.$emit('update:cart-ids', ids.join(','))
|
||
this.$emit('transCartGoods')
|
||
}
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 创建订单
|
||
createOrder() {
|
||
const list = this.cartListArr
|
||
let ids = []
|
||
let cartXia = false
|
||
let is_sale = false
|
||
let is_check = false
|
||
list.forEach((item) => {
|
||
item.cart_list.forEach((j) => {
|
||
if (j.checked && j.stock != 0 && j.is_sale != 0 && j.is_check != 0) {
|
||
ids.push(j.aid)
|
||
} else if (j.checked && j.stock == 0) {
|
||
cartXia = true
|
||
} else if (j.checked && j.is_sale == 0) {
|
||
is_sale = true
|
||
} else if (j.checked && j.is_check == 0) {
|
||
is_check = true
|
||
}
|
||
})
|
||
})
|
||
console.log(ids, 'ids')
|
||
if (cartXia) return this.$message.info('该商品已售完,正在采购中')
|
||
if (is_sale) return this.$message.info('该商品已下架')
|
||
if (is_check) return this.$message.info('该商品已下架')
|
||
const cart_ids = ids.join(',')
|
||
if (cart_ids == '') return this.$message.info('请选择商品')
|
||
this.$emit('update:cart-ids', cart_ids)
|
||
this.$emit('createOrder')
|
||
},
|
||
toDetail(item, type) {
|
||
if (item.is_valid == 2) return
|
||
this.$emit('update:goods-id', item.goods_id)
|
||
this.$emit('toGoods')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.shop_icon {
|
||
color: var(--benbenFontColor5);
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
padding-right: 15rpx;
|
||
}
|
||
.shop_right_icon {
|
||
color: #999;
|
||
font-size: 22rpx;
|
||
}
|
||
.checked_icon {
|
||
color: #999;
|
||
}
|
||
.checked_active {
|
||
color: var(--benbenFontColor5);
|
||
}
|
||
.round {
|
||
transform: scale(0.7);
|
||
}
|
||
|
||
.text-cut-2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 2021-01-07 新版本样式修改 by:技术五部 wyh
|
||
.cart-empty {
|
||
width: 750rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
|
||
.empty-img {
|
||
display: block;
|
||
margin-top: 64rpx;
|
||
width: 440rpx;
|
||
height: 220rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
margin-top: 28rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 33rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.empty-btn {
|
||
margin-top: 27rpx;
|
||
margin-bottom: 64rpx;
|
||
width: 280rpx;
|
||
background: $bgtheme;
|
||
border-radius: 38rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 70rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
// 购物车商品列表模块
|
||
.cart-box {
|
||
width: 750rpx;
|
||
// background-color: #fff;
|
||
overflow: hidden;
|
||
|
||
.cart-box-item {
|
||
background: #ffffff;
|
||
padding-top: 32rpx;
|
||
margin-top: 20rpx;
|
||
border-radius: 24rpx;
|
||
|
||
// #ifdef MP-WEIXIN
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
// #endif
|
||
}
|
||
|
||
// padding-bottom: 24rpx;
|
||
.cart-item {
|
||
width: 718rpx;
|
||
margin: 32rpx 0 0 32rpx;
|
||
display: flex;
|
||
padding-bottom: 32rpx;
|
||
// border-bottom: 1px solid #eee;
|
||
// align-items: center;
|
||
|
||
//当不能购买时 调整灰度
|
||
&.not-but-class {
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
&:nth-last-of-type(1) {
|
||
border-bottom: none;
|
||
}
|
||
|
||
// checkbox部分
|
||
.check-box {
|
||
margin-top: 72rpx;
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 商品图片
|
||
.img-box {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
flex-shrink: 0;
|
||
margin-left: 24rpx;
|
||
overflow: hidden;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
|
||
.no-stok {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translateX(-50%) translateY(-50%);
|
||
width: 148rpx;
|
||
height: 148rpx;
|
||
z-index: 2;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 74rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.no-stock-text {
|
||
color: #fff;
|
||
}
|
||
|
||
.no-stock-img {
|
||
display: block;
|
||
width: 95rpx;
|
||
height: 95rpx;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 1;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
|
||
// 商品详细信息
|
||
.info-box {
|
||
width: 422rpx;
|
||
margin-left: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.info-top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
//两行溢出隐藏
|
||
white-space: nowrap;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 40rpx;
|
||
// height: 80rpx;
|
||
color: #333333;
|
||
opacity: 1;
|
||
}
|
||
|
||
.sku {
|
||
//单行溢出隐藏
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
word-break: break-all;
|
||
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 42rpx;
|
||
height: 42rpx;
|
||
color: #999999;
|
||
opacity: 1;
|
||
}
|
||
|
||
.jiang-jia {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 25rpx;
|
||
|
||
.jiang-jia-tip {
|
||
background: linear-gradient(126deg, #fa2033 0%, #ff6530 100%);
|
||
padding: 0 8rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 32rpx;
|
||
color: #ffffff;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.jiang-jia-text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 42rpx;
|
||
color: #fb2a25;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin-top: 25rpx;
|
||
|
||
.price {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
line-height: 36rpx;
|
||
color: #fe5014;
|
||
opacity: 1;
|
||
|
||
.small {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.check-box-1 {
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
// 购物车底部操作栏部分
|
||
.cart-footer {
|
||
height: 90rpx;
|
||
width: 750rpx;
|
||
left: 0;
|
||
position: fixed;
|
||
bottom: var(--window-bottom);
|
||
width: 100%;
|
||
z-index: 999;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.footer-left {
|
||
display: flex;
|
||
align-items: center;
|
||
.check-box {
|
||
margin-left: 32rpx;
|
||
}
|
||
.text-box {
|
||
margin-left: 16rpx;
|
||
.text1 {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
color: #333333;
|
||
}
|
||
.text2 {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 33rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
.footer-right {
|
||
// 右边 正常状态
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.all-text {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
|
||
.text1 {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 32rpx;
|
||
color: #666666;
|
||
opacity: 1;
|
||
}
|
||
|
||
.text-price-box {
|
||
font-size: 32rpx;
|
||
font-family: Oswald;
|
||
font-weight: 500;
|
||
line-height: 36rpx;
|
||
color: #fe5014;
|
||
|
||
.small {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jiesuan-btn {
|
||
width: 230rpx;
|
||
background: var(--benbenbgColor3);
|
||
opacity: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 90rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
// 右边 编辑状态
|
||
.footer-btn {
|
||
width: 200rpx;
|
||
background: #f8f8f8;
|
||
opacity: 1;
|
||
border-radius: 64rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 72rpx;
|
||
color: #333333;
|
||
margin-right: 24rpx;
|
||
margin-left: -8rpx;
|
||
}
|
||
.delect {
|
||
// background-color: $bgtheme;
|
||
// color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.merchant-info {
|
||
margin: 0rpx 30rpx;
|
||
|
||
.icon {
|
||
margin-left: 6rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.merchant-icon {
|
||
width: 30rpx;
|
||
height: 26rpx;
|
||
margin-left: 11rpx;
|
||
margin-right: 8rpx;
|
||
top: 2rpx;
|
||
}
|
||
|
||
.sku_name {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #f8f8f8;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
margin: 8rpx 0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.overFlow_text {
|
||
width: 250rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|