You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
762 lines
20 KiB
762 lines
20 KiB
<template>
|
|
<view>
|
|
<!-- 占位 -->
|
|
<!-- <view class="place"></view> -->
|
|
<!-- 商品列表 -->
|
|
<view class="goods-list">
|
|
<!-- 空白页 -->
|
|
<empty v-if="goodsList.length === 0" tip='购物车是空的哦'></empty>
|
|
<view class="row" v-for="(row,index) in goodsList" :key="index">
|
|
<!-- 删除按钮 -->
|
|
<view class="menu" @tap.stop="deleteGoods(row.id)">
|
|
<view class="icon shanchu"></view>
|
|
</view>
|
|
<!-- 商品 -->
|
|
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
|
<!-- checkbox -->
|
|
<view class="checkbox-box" @tap="selected(index)" v-if="row.kucun">
|
|
<view class="checkbox">
|
|
<view :class="[row.selected?'on':'']"></view>
|
|
</view>
|
|
</view>
|
|
<view class="checkbox-box" v-if="!row.kucun">
|
|
<view class="sellq">售空</view>
|
|
</view>
|
|
<!-- 商品信息 -->
|
|
<view class="goods-info" @tap="toGoods(row)">
|
|
<view class="img">
|
|
<image :src="row.img"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="title">{{row.mc}}{{row.gg}}{{row.dw}}</view>
|
|
<!-- <view class="spec">{{row.gg}}</view> -->
|
|
<view class="spbz" style="width: 100%;">
|
|
<input style="font-size: 28upx; color: #41A863; height: 40upx; line-height: 40upx; min-height: 40upx;" type="text" :value="row.bz" @input="inputchangeBz($event,row.bz,row.id,index)" placeholder="输入备注">
|
|
<input style="font-size: 28upx; color: #41A863; height: 40upx; line-height: 40upx; min-height: 40upx;" type="text" :value="row.fudw" @input="inputchangeFudw($event,row.fudw,row.id,index)" placeholder="输入副单位">
|
|
</view>
|
|
<view class="price-number" v-if="row.kucun">
|
|
<view class="price" v-if="row.price>0">￥{{row.price}}</view>
|
|
<view class="price" v-else></view>
|
|
<!-- <view class="kucun">库存 {{row.kucun}}</view> -->
|
|
<view class="number">
|
|
<view class="sub" @tap.stop="sub(index)">
|
|
<view class="icon jian"></view>
|
|
</view>
|
|
<view class="input" @tap.stop="discard">
|
|
<input type="digit" v-model="row.num" @input="sum($event,index)" />
|
|
</view>
|
|
<view class="add" @tap.stop="add(index)">
|
|
<view class="icon jia"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="price-number" v-if="!row.kucun">
|
|
<view class="deltip">左滑可删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 脚部菜单 -->
|
|
<view class="footer" :style="{bottom:footerbottom}">
|
|
<view class="checkbox-box" @tap="allSelect">
|
|
<view class="checkbox">
|
|
<view :class="[isAllselected?'on':'']"></view>
|
|
</view>
|
|
<view class="text">全选</view>
|
|
</view>
|
|
<view class="delBtn" @tap="deleteList" v-if="selectedList.length>0">删除</view>
|
|
<view class="settlement">
|
|
<view class="sum">合计:<view class="money">￥{{sumPrice}}</view></view>
|
|
<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view>
|
|
<!-- <view class="btn btn_gray" v-else> -->
|
|
<!-- <text v-if="startingPrice>=0">差￥{{-(sumPrice-startingPrice)|toFixed}}起送</text> -->
|
|
<!-- </view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import empty from "@/components/empty";
|
|
export default {
|
|
components: {
|
|
empty
|
|
},
|
|
data() {
|
|
return {
|
|
sumPrice:'0.00',
|
|
headerPosition:"fixed",
|
|
headerTop:null,
|
|
statusTop:null,
|
|
selectedList:[],
|
|
isAllselected:false,
|
|
goodsList:[],
|
|
//控制滑动效果
|
|
theIndex:null,
|
|
oldIndex:null,
|
|
isStop:false,
|
|
//配送起步价
|
|
startingPrice:0,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.selectedList=[];
|
|
this.goodsList=uni.getStorageSync('cartlist');
|
|
let len = this.goodsList.length;
|
|
let arr = [];
|
|
if(len<=0){
|
|
//this.$set('isAllselected',false);
|
|
this.isAllselected=false;
|
|
this.sumPrice=0;
|
|
}else{
|
|
//要删除的商品数组
|
|
let delarrid=[];
|
|
for(let i=0;i<len;i++){
|
|
if(this.goodsList[i].num<=0){
|
|
//数量num为0的商品放入到删除数组中
|
|
delarrid.push(this.goodsList[i].id);
|
|
}else{
|
|
if(this.goodsList[i].selected==true){
|
|
arr.push(this.goodsList[i].id);
|
|
}
|
|
}
|
|
}
|
|
//删除num为0的商品
|
|
if(delarrid.length>0){
|
|
for(let i=0;i<delarrid.length;i++){
|
|
this.deleteGoods(delarrid[i])
|
|
}
|
|
if(this.goodsList.length<=0){
|
|
this.isAllselected=false;
|
|
}
|
|
}else{
|
|
this.selectedList = arr;
|
|
this.isAllselected = this.selectedList.length == this.goodsList.length;
|
|
}
|
|
}
|
|
this.sum();
|
|
// this.selectedList=[]; //这里为什么要清空数据？ 20231114
|
|
},
|
|
onPageScroll(e){
|
|
//兼容iOS端下拉时顶部漂移
|
|
this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
|
|
this.headerTop = e.scrollTop>=0?null:0;
|
|
this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
|
|
},
|
|
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
|
onPullDownRefresh() {
|
|
setTimeout(function () {
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
filters: {
|
|
toFixed:function(x) {
|
|
return parseFloat(x).toFixed(2);
|
|
}
|
|
},
|
|
onLoad() {
|
|
//兼容H5下结算条位置
|
|
// #ifdef H5
|
|
this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight+'px';
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
this.statusHeight = plus.navigator.getStatusbarHeight();
|
|
// #endif
|
|
},
|
|
methods: {
|
|
async checkkc(gids) {
|
|
let userinfo=uni.getStorageSync('userinfo')
|
|
let reinfo=await this.$api.checkkc({action:'checkkc',gids:gids,uid:userinfo.uid});
|
|
let getcheckarr=reinfo.data;
|
|
let thisgoodlist=this.goodsList;
|
|
if(getcheckarr){
|
|
for(let i=0;i<getcheckarr.length;i++){
|
|
for(let j=0;j<thisgoodlist.length;j++){
|
|
if(getcheckarr[i].id==thisgoodlist[j].id){
|
|
this.$set(this.goodsList[j],'kucun',getcheckarr[i].kucun);
|
|
this.$set(this.goodsList[j], 'price', getcheckarr[i].price)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//加入商品 参数 goods:商品数据
|
|
joinGoods(goods){
|
|
/*
|
|
* 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
|
|
* 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
|
|
* 一般商城购物车的增删改动作是由后端来完成的,
|
|
* 后端记录后返回前端更新前端缓存
|
|
*/
|
|
let len = this.goodsList.length;
|
|
let isFind = false;//是否找到ID一样的商品
|
|
for(let i=0;i<len;i++){
|
|
let row = this.goodsList[i];
|
|
if(row.id==goods.id )
|
|
{ //找到商品一样的商品
|
|
this.goodsList[i].num++;//数量自增
|
|
isFind = true;//找到一样的商品
|
|
break;//跳出循环
|
|
}
|
|
}
|
|
if(!isFind){
|
|
//没有找到一样的商品，新增一行到购物车商品列表头部
|
|
this.goodsList[i].unshift(goods);
|
|
}
|
|
},
|
|
//控制左滑删除效果-begin
|
|
touchStart(index,event){
|
|
//多点触控不触发
|
|
if(event.touches.length>1){
|
|
this.isStop = true;
|
|
return ;
|
|
}
|
|
this.oldIndex = this.theIndex;
|
|
this.theIndex = null;
|
|
//初始坐标
|
|
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
|
|
},
|
|
touchMove(index,event){
|
|
//多点触控不触发
|
|
if(event.touches.length>1){
|
|
this.isStop = true;
|
|
return ;
|
|
}
|
|
let moveX = event.touches[0].pageX - this.initXY[0];
|
|
let moveY = event.touches[0].pageY - this.initXY[1];
|
|
|
|
if(this.isStop||Math.abs(moveX)<5){
|
|
return ;
|
|
}
|
|
if (Math.abs(moveY) > Math.abs(moveX)){
|
|
// 竖向滑动-不触发左滑效果
|
|
this.isStop = true;
|
|
return;
|
|
}
|
|
|
|
if(moveX<0){
|
|
this.theIndex = index;
|
|
this.isStop = true;
|
|
}else if(moveX>0){
|
|
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
|
|
this.oldIndex = index;
|
|
this.theIndex = null;
|
|
this.isStop = true;
|
|
setTimeout(()=>{
|
|
this.oldIndex = null;
|
|
},150)
|
|
}
|
|
}
|
|
},
|
|
touchEnd(index,$event){
|
|
//结束禁止触发效果
|
|
this.isStop = false;
|
|
},
|
|
//控制左滑删除效果-end
|
|
|
|
//商品跳转
|
|
toGoods(e){
|
|
// uni.showToast({title: '商品'+e.id,icon:"none"});
|
|
// uni.navigateTo({
|
|
// url: '../goods/goods'
|
|
// });
|
|
},
|
|
//跳转确认订单页面
|
|
toConfirmation(){
|
|
let userinfo=uni.getStorageSync('userinfo')
|
|
if(userinfo.uid==''||userinfo.uid==undefined){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您还没登录，请登录',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url:'/pages/user/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
//console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
let tmpList=[];
|
|
let len = this.goodsList.length;
|
|
for(let i=0;i<len;i++){
|
|
if(this.goodsList[i].selected&&this.goodsList[i].kucun) {
|
|
tmpList.push(this.goodsList[i]);
|
|
}
|
|
}
|
|
if(tmpList.length<1){
|
|
uni.showToast({
|
|
title:'请选择商品结算',
|
|
icon:'none'
|
|
});
|
|
return ;
|
|
}
|
|
uni.setStorage({
|
|
key:'buylist',
|
|
data:tmpList,
|
|
success: () => {
|
|
uni.navigateTo({
|
|
url:'../orderconfirmation/orderconfirmation'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
//删除商品
|
|
deleteGoods(id){
|
|
let len = this.goodsList.length;
|
|
for(let i=0;i<len;i++){
|
|
if(id==this.goodsList[i].id){
|
|
this.goodsList.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
this.selectedList.splice(this.selectedList.indexOf(id), 1);
|
|
//更新本地储存
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
this.sum();
|
|
this.oldIndex = null;
|
|
this.theIndex = null;
|
|
},
|
|
// 删除商品s
|
|
deleteList(){
|
|
while (this.selectedList.length>0)
|
|
{
|
|
this.deleteGoods(this.selectedList[0]);
|
|
}
|
|
this.selectedList = [];
|
|
this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length>0;
|
|
this.sum();
|
|
},
|
|
// 选中商品
|
|
selected(index){
|
|
this.goodsList[index].selected = this.goodsList[index].selected?false:true;
|
|
let i = this.selectedList.indexOf(this.goodsList[index].id);
|
|
i>-1?this.selectedList.splice(i, 1):this.selectedList.push(this.goodsList[index].id);
|
|
this.isAllselected = this.selectedList.length == this.goodsList.length;
|
|
this.sum();
|
|
},
|
|
//全选
|
|
allSelect(){
|
|
let len = this.goodsList.length;
|
|
let arr = [];
|
|
for(let i=0;i<len;i++){
|
|
this.goodsList[i].selected = this.isAllselected? false : true;
|
|
if(this.goodsList[i].kucun>0){
|
|
arr.push(this.goodsList[i].id);
|
|
}
|
|
}
|
|
this.selectedList = this.isAllselected?[]:arr;
|
|
this.isAllselected = this.isAllselected||this.goodsList.length==0?false : true;
|
|
this.sum();
|
|
},
|
|
// 减少数量
|
|
sub(index){
|
|
if(this.goodsList[index].num<=1){
|
|
return;
|
|
}
|
|
this.goodsList[index].num--;
|
|
this.goodsList[index].total=this.goodsList[index].num*this.goodsList[index].price
|
|
//更新本地储存
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
this.sum();
|
|
},
|
|
// 增加数量
|
|
add(index){
|
|
if(this.goodsList[index].kucun>this.goodsList[index].num){
|
|
this.goodsList[index].num++;
|
|
this.goodsList[index].total=this.goodsList[index].num*this.goodsList[index].price
|
|
//更新本地储存
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
this.sum();
|
|
}else{
|
|
uni.showToast({
|
|
title:'库存不足！',
|
|
icon:'none'
|
|
});
|
|
return ;
|
|
}
|
|
},
|
|
// 合计
|
|
sum(e,index){
|
|
this.sumPrice=0;
|
|
let len = this.goodsList.length;
|
|
let gids='';
|
|
for(let i=0;i<len;i++){
|
|
gids=gids+','+this.goodsList[i].id;
|
|
if(this.goodsList[i].selected&&this.goodsList[i].kucun>0) {
|
|
if(e && i==index){
|
|
this.sumPrice = this.sumPrice + (e.detail.value*this.goodsList[i].price);
|
|
this.goodsList[i].num=e.detail.value;
|
|
}else{
|
|
this.sumPrice = this.sumPrice + (this.goodsList[i].num*this.goodsList[i].price);
|
|
}
|
|
}
|
|
}
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
gids=gids.substr(1);
|
|
this.checkkc(gids);
|
|
this.sumPrice = this.sumPrice.toFixed(2);
|
|
},
|
|
inputchangeBz(inputsl,inputnum, id, index) {
|
|
inputnum=inputsl.detail.value;
|
|
this.goodsList[index].bz=inputnum;
|
|
//更新本地储存
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
},
|
|
inputchangeFudw(inputsl,inputnum, id, index) {
|
|
inputnum=inputsl.detail.value;
|
|
this.goodsList[index].fudw=inputnum;
|
|
//更新本地储存
|
|
uni.setStorageSync('cartlist',this.goodsList);
|
|
},
|
|
discard() {
|
|
//丢弃
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page{position: relative;}
|
|
@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOEAAsAAAAAB7wAAAM1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDAIJNATYCJAMQCwoABCAFhG0HPhu1BsiOw7jha84s8T+CgOyq6unevTlAeAkRhAhQBjj8eJfmMg/oB5whSgaFspy7AqbpwE3Py3/j9j+X07uGyFHr21lua9HYi9rUCzDeGtBYmw4o0AJJ0BvGLmiJxyEAC3yIQhSVPL9BF4U5TgBi7ChtQzfjQKFYWEdgrFiqEBsxoGurtMfAhuD74g8JQgcNg8ScWjf8xoPz7/nfD8iFpoV0eQi86XQAWwUSiAIUiJGVhgEaUSAKiYXau0kKoKOjwVRthd8PmExIBRvmWH95INCQIIyYqVYAJKGghO/5Dg4B3wtxaPD9QAoS4IOM1gEzYBbAMkT16iIQGPxsopS5ScAcK23LiaBDpzyk1aGLHtsvhVrL7adDD55016wPXnDfcr7T3lcE2TVcP2fNhZM7WeiEhVp44vx9C5vVD6+eEgaLTZvEot3HL1lawlnXLK3XnISDllbWwmrmGjlRLdxq2bpme1RAeqXtzWh6g0F//wCCnRiN2diwr2+Yse3iEs20g05Q5tT0BikOXwKf79vsoEvb6p6xjVhHP92nwDJmX+9hwsf26dXbPiNvZ/98x67/+5T+ev0aWxbXCwOX41zLxia+O73B6Y57fN1u6GvN+Zmbc8XITigTAcB0Rl6X8QB4hDgEpoXypZz2q37D5FVnVa9t1n/dUgHw8uKMq9BmWqjoJoP3zevM+zG8jmVKE5hKpRShw9WTFZW04D7TscAC+B0RcOD9FHLnzqkg0HFOQMMMb5DoBKGKGgUGLEkCIzq5YEEkpastcWQyDYQyByJYBkBgx2nQsOEaSOx4girqOzDgwj8wYickWNAiHLe0JESMsiicTLaQh84PBm6WKlst/TD9hXQV25wWBLQP4jJw435MXD58RynxFDPKT30golBxluAtOI3iOMOcs5Bc2fFF8sPd2OFVBO24WQJ9CmEIG4HwQAb4ARmFS0aK8qoL/cLnXyA0FTE23FBSZf+AYEqCzpF4YojrgN5J004lt/LKFD7RHDAVQYEMh8lIQErAICImJgOZWD0ohHARdhg5wJdzSKxVaXhX6c7y8uQN1wAWmLOU0IQUShiQo0fZTceadqaMdP2uXwEAAAAA') format('woff2');}
|
|
.icon {
|
|
font-family:"HMfont-home" !important;
|
|
font-size:60upx;
|
|
font-style:normal;
|
|
color:#000000;
|
|
&.jia {
|
|
&:before{content:"\e641";}
|
|
}
|
|
&.jian {
|
|
&:before{content:"\e643";}
|
|
}
|
|
&.shanchu {
|
|
&:before{content:"\e6a4";}
|
|
}
|
|
|
|
}
|
|
.checkbox-box{
|
|
display: flex;
|
|
align-items: center;
|
|
.sellq{
|
|
font-size: 28upx;
|
|
color: #ffffff;
|
|
background-color: #C4C4C4;
|
|
padding: 5upx 20upx;
|
|
text-align: center;
|
|
border-radius: 25upx;
|
|
}
|
|
.checkbox{
|
|
width: 35upx;
|
|
height: 35upx;
|
|
border-radius: 100%;
|
|
border: solid 2upx #f06c7a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.on{
|
|
width: 25upx;
|
|
height: 25upx;
|
|
border-radius: 100%;
|
|
background-color: #f06c7a;
|
|
}
|
|
}
|
|
.text{
|
|
font-size: 28upx;
|
|
margin-left: 10upx;
|
|
}
|
|
}
|
|
.status {
|
|
width: 100%;
|
|
height: 0;
|
|
position: fixed;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
top: 0;
|
|
/* #ifdef APP-PLUS */
|
|
height: var(--status-bar-height);//覆盖样式
|
|
/* #endif */
|
|
}
|
|
|
|
.header{
|
|
width: 92%;
|
|
padding: 0 4%;
|
|
height: 100upx;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
/* #ifdef APP-PLUS */
|
|
top: var(--status-bar-height);
|
|
/* #endif */
|
|
.title{
|
|
font-size: 36upx;
|
|
}
|
|
|
|
}
|
|
.place{
|
|
|
|
background-color: #ffffff;
|
|
height: 100upx;
|
|
/* #ifdef APP-PLUS */
|
|
margin-top: var(--status-bar-height);
|
|
/* #endif */
|
|
}
|
|
.goods-list{
|
|
width: 100%;
|
|
padding: 20upx 0 120upx 0;
|
|
.tis{
|
|
width: 100%;
|
|
height: 60upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32upx;
|
|
}
|
|
.row{
|
|
width: calc(92%);
|
|
height: calc(25vw + 40upx);
|
|
margin: 20upx auto;
|
|
|
|
border-radius: 15upx;
|
|
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 4;
|
|
border: 0;
|
|
.menu{
|
|
.icon{
|
|
color: #fff;
|
|
// font-size: 25upx;
|
|
}
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 100%;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: red;
|
|
color: #fff;
|
|
z-index: 2;
|
|
}
|
|
.carrier{
|
|
@keyframes showMenu {
|
|
0% {transform: translateX(0);}100% {transform: translateX(-30%);}
|
|
}
|
|
@keyframes closeMenu {
|
|
0% {transform: translateX(-30%);}100% {transform: translateX(0);}
|
|
}
|
|
&.open{
|
|
animation: showMenu 0.25s linear both;
|
|
}
|
|
&.close{
|
|
animation: closeMenu 0.15s linear both;
|
|
}
|
|
background-color: #fff;
|
|
.checkbox-box{
|
|
padding-left: 20upx;
|
|
flex-shrink: 0;
|
|
height: 22vw;
|
|
margin-right: 20upx;
|
|
}
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 0 0;
|
|
height: 100%;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.goods-info{
|
|
width: 100%;
|
|
display: flex;
|
|
padding-right: 20upx;
|
|
.img{
|
|
width: 22vw;
|
|
height: 25vw;
|
|
border-radius: 10upx;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
margin-right: 10upx;
|
|
image{
|
|
width: 22vw;
|
|
height: 22vw;
|
|
}
|
|
}
|
|
.info{
|
|
width: 100%;
|
|
height: 25vw;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
.title{
|
|
width: 100%;
|
|
font-size: 28upx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
// text-align: justify;
|
|
overflow: hidden;
|
|
}
|
|
.spec{
|
|
font-size: 25upx;
|
|
background-color: #f3f3f3;
|
|
color: #a7a7a7;
|
|
height: 30upx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10upx;
|
|
border-radius: 15upx;
|
|
margin-bottom: 10vw;
|
|
}
|
|
.spbz{
|
|
font-size: 25upx;
|
|
display: flex;
|
|
flex-direction:column;
|
|
padding: 0 10upx;
|
|
height: 80upx;
|
|
|
|
}
|
|
.kucun{
|
|
font-size: 25upx;
|
|
// position: absolute;
|
|
width: 100%;
|
|
// top: 120upx;
|
|
// padding: 0 10upx;
|
|
border-radius: 15upx;
|
|
text-align: center;
|
|
// margin-bottom: 10vw;
|
|
}
|
|
.price-number{
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
font-size: 28upx;
|
|
height: 60upx;
|
|
.price{
|
|
}
|
|
.deltip{
|
|
position: absolute;
|
|
right: 0;
|
|
top: -53rpx;
|
|
color: #B4B4B4;
|
|
margin-right: 8rpx;
|
|
}
|
|
.number{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
.input{
|
|
width: 60upx;
|
|
height: 60upx;
|
|
margin: 0 10upx;
|
|
background-color: #f3f3f3;
|
|
input{
|
|
width: 60upx;
|
|
height: 60upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 26upx;
|
|
}
|
|
}
|
|
.sub ,.add{
|
|
width: 45upx;
|
|
height: 45upx;
|
|
background-color: #f3f3f3;
|
|
border-radius: 5upx;
|
|
.icon{
|
|
font-size: 22upx;
|
|
width: 45upx;
|
|
height: 45upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
padding: 0 4%;
|
|
background-color: #fbfbfb;
|
|
height: 100upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28upx;
|
|
position: fixed;
|
|
bottom: 0upx;
|
|
z-index: 5;
|
|
.delBtn{
|
|
border: solid 1upx #f06c7a;
|
|
color: #f06c7a;
|
|
padding: 0 30upx;
|
|
height: 50upx;
|
|
border-radius: 30upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.settlement{
|
|
width: 64%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.sum{
|
|
width: 50%;
|
|
font-size: 28upx;
|
|
margin-right: 10upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.money{
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.btn{
|
|
padding: 0 20upx;
|
|
height: 50upx;
|
|
background-color: #f06c7a;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 30upx;
|
|
}
|
|
.btn_gray{
|
|
padding: 0 20upx;
|
|
height: 50upx;
|
|
background-color: #C4C4C4;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 240upx;
|
|
|
|
border-radius: 30upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|