<template>
<view class="container">
<view class="swiper">
<view class="swiper-text">共{{13}}件商品</view>
</view>
<view class="sort-right-box">
<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="goods-box">
<view class="goods-row" v-for="item in goodsList" @click="">
<view class="goods-top">
<view class="iconfont iconqueding select magl5" @click=""></view>
<view class="iconfont icondianpu magr5"></view>
<view class="seller-label magr5">{{item.sellerName}}</view>
<view class="iconfont iconfangxiang magr5"></view>
</view>
<view class="split-line"></view>
<view class="goods-middle">
<view class="iconfont iconqueding select-goods magl5" @click=""></view>
<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
<view class="goods-info">
<view class="goods-details">{{item.details}}</view>
<view class="goods-type">类型：{{item.goodType}}</view>
<!-- <uni-tag text="类型: 普通商品" size="small" type="default"></uni-tag> -->
<view class="goods-info-btm">
<view class="goods-spec">
<text>{{item.spec}}</text>
</view>
<!-- <uni-number-box :min="1" :value="cartNum"></uni-number-box> -->
<view class="pro-num-box">
<text class="num-btn r" @click="numSub(index,cIndex)">-</text>
<text class="num">{{item.num}}</text>
<text class="num-btn l" @click="numAdd(index,cIndex)">+</text>
</view>
</view>
</view>
</view>
<view class="split-line"></view>
<view class="goods-bottom">
<text class="magr20">合计</text>
<view class="goods-spec magr10">
<text>{{item.spec}}</text>
</view>
<view class="settle-btn"><text>结算(3)</text></view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import uniTag from "@/components/uni-tag/uni-tag.vue"
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
export default {
components: {
'uni-tag': uniTag,
'uni-number-box': uniNumberBox
},
data() {
return {
goodsList: [{
name: '优质白菜',
sellerName: '商家1',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 2,
},
{
name: '优质白菜',
sellerName: '商家2',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 2,
},
{
name: '优质白菜',
sellerName: '商家3',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 2,
},
{
name: '优质白菜',
sellerName: '商家4',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 2,
},
{
name: '优质白菜',
sellerName: '商家5',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 5,
},
{
name: '优质白菜',
sellerName: '商家6',
goodType: '普通商品',
details: '优质白菜优质白菜优质白菜',
spec: '￥80.00/kg',
sales: 10,
num: 3,
}
],
cartNum: 1,
}
},
onLoad() {
},
methods: {
// 数量减
numSub(index, cIndex) {
// if (this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum > 1) {
// this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum = this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum - 1
// this.updateCart()
// } else {
// uni.showToast({
// title: '亲！至少一件哦！',
// icon:"none"
// })
// }
},
// 数量加
numAdd(index, cIndex) {
// if (this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum <= 100) {
// this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum = this.dataList[index].shoppingCartSkuItemList[cIndex].buyNum + 1
// this.updateCart()
// } else {
// wx.showToast({
// title: '库存不足！',
// icon: 'none'
// })
// }
},
}
}
</script>
<style lang="less" scoped>
page {
width: 100%;
height: 100%;
}
.magl5 {
margin-left: 5px;
}
.magr5 {
margin-right: 5px;
}
.magr10 {
margin-right: 10px;
}
.magr20 {
margin-right: 20px;
}
.container {
width: 100%;
height: 100%;
background-color: #F3F3F3;
.swiper {
height: 120px;
background-color: #52A63A;
border-radius: 0 0 40px 40px;
.swiper-text {
color: #FFFFFF;
padding-left: 10px;
padding-top: 15px;
}
}
.sort-right-box {
position: absolute;
top: 50px;
height: calc(100% - 50px);
width: 100%;
.goods-box {
width: 100%;
height: 100%;
// box-sizing: border-box;
.goods-row {
width: calc(100% - 24px);
height: 185px;
box-sizing: border-box;
margin: 4px 0 12px 12px;
background: #FFFFFF;
border-radius: 15px;
.goods-top {
display: flex;
align-items: center;
.select {
color: #52A63A;
font-size: 35px;
}
}
.select-goods {
color: #52A63A;
font-size: 35px;
float: left;
text-align: center;
}
.split-line {
height: 1px;
background: #EEEEEE;
margin-top: 5px;
margin-bottom: 5px;
}
.goods-middle {
display: flex;
.goods-img {
width: 84px;
height: 84px;
}
.goods-info {
flex: 1;
margin-left: 10px;
.goods-details {
height: 28px;
font-size: 12px;
font-family: PingFang SC;
color: #333333;
line-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
margin-top: 10px;
}
.goods-type {
width: 100px;
height: 20px;
background: #F0F0F0;
border-radius: 2px;
color: #666666;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.goods-info-btm {
display: flex;
justify-content: space-between;
align-items: center;
.pro-num-box {
margin-top: 10px;
margin-right: 10px;
width: 80px;
height: 20px;
border: 1px solid #ddd;
border-radius: 4upx;
display: flex;
flex-direction: row;
justify-content: space-between;
.num-btn {
font-size: 34upx;
color: #666;
display: inline-block;
width: 40upx;
text-align: center;
line-height: 32upx;
}
.num-btn.r {
border-right: 1px solid #ddd;
}
.num-btn.l {
border-left: 1px solid #ddd;
}
.num {
font-size: 26upx;
color: #333;
}
}
}
.goods-spec {
height: 16px;
font-family: PingFang SC;
line-height: 16px;
font-size: 14px;
color: #52A63A;
margin-top: 10px;
}
}
}
.goods-bottom {
position: absolute;
right: 20px;
display: flex;
align-items: baseline;
font-size: 14px;
}
.settle-btn {
color: #FFFFFF;
background: #52A63A;
border-radius: 40px;
height: 30px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
// /deep/ .uni-numbox {
// width: 80px;
// height: 20px;
// }
</style>