|
@@ -7,42 +7,40 @@
|
|
<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="goods-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-row" v-for="item in goodsList" @click="">
|
|
<view class="goods-top">
|
|
<view class="goods-top">
|
|
- <view class="iconfont iconqueding select" @click=""></view>
|
|
|
|
|
|
+ <view class="iconfont iconqueding select magl5" @click=""></view>
|
|
<view class="iconfont icondianpu magr5"></view>
|
|
<view class="iconfont icondianpu magr5"></view>
|
|
<view class="seller-label magr5">{{item.sellerName}}</view>
|
|
<view class="seller-label magr5">{{item.sellerName}}</view>
|
|
<view class="iconfont iconfangxiang magr5"></view>
|
|
<view class="iconfont iconfangxiang magr5"></view>
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="split-line"></view>
|
|
<view class="goods-middle">
|
|
<view class="goods-middle">
|
|
- <view class="iconfont iconqueding select-goods" @click=""></view>
|
|
|
|
|
|
+ <view class="iconfont iconqueding select-goods magl5" @click=""></view>
|
|
<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
|
|
<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
|
|
- <view>
|
|
|
|
|
|
+ <view class="goods-info">
|
|
<view class="goods-details">{{item.details}}</view>
|
|
<view class="goods-details">{{item.details}}</view>
|
|
- <uni-tag text="类型:普通商品" size="small" type="default"></uni-tag>
|
|
|
|
- <view class="goods-spec">
|
|
|
|
- <text>{{item.spec}}</text>
|
|
|
|
|
|
+ <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>
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="split-line"></view>
|
|
<view class="goods-bottom">
|
|
<view class="goods-bottom">
|
|
- <text class="magr5">合计</text>
|
|
|
|
- <view class="goods-spec magr5">
|
|
|
|
|
|
+ <text class="magr20">合计</text>
|
|
|
|
+ <view class="goods-spec magr10">
|
|
<text>{{item.spec}}</text>
|
|
<text>{{item.spec}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="settle-btn"><text>结算(3)</text></view>
|
|
<view class="settle-btn"><text>结算(3)</text></view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <!-- <cover-image class="goods-img" @click="" :src="item.url"></cover-image>
|
|
|
|
- <view class="goods-info">
|
|
|
|
- <view class="goods-name">{{item.name}}</view>
|
|
|
|
- <view class="goods-details">{{item.details}}</view>
|
|
|
|
- <view class="goods-number">
|
|
|
|
- <text class="goods-spec">{{item.spec}}</text>
|
|
|
|
- <text class="goods-sales">{{item.sales}}人付款</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="goods-cart"></view> -->
|
|
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
@@ -51,121 +49,285 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import uniTag from "@/components/uni-tag/uni-tag.vue"
|
|
import uniTag from "@/components/uni-tag/uni-tag.vue"
|
|
|
|
+ import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
|
|
export default {
|
|
export default {
|
|
- components: {'uni-tag': uniTag},
|
|
|
|
|
|
+ components: {
|
|
|
|
+ 'uni-tag': uniTag,
|
|
|
|
+ 'uni-number-box': uniNumberBox
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- goodsList: [
|
|
|
|
- {name: '优质白菜', sellerName: '商家1', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10},
|
|
|
|
- {name: '优质白菜', sellerName: '商家2', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10},
|
|
|
|
- {name: '优质白菜', sellerName: '商家3', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10},
|
|
|
|
- {name: '优质白菜', sellerName: '商家4', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10},
|
|
|
|
- {name: '优质白菜', sellerName: '商家5', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10},
|
|
|
|
- {name: '优质白菜', sellerName: '商家6', details: '优质白菜优质白菜优质白菜', spec: '¥80.00/kg', sales: 10}
|
|
|
|
|
|
+ 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(){
|
|
|
|
-
|
|
|
|
|
|
+ onLoad() {
|
|
|
|
+
|
|
},
|
|
},
|
|
methods: {
|
|
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>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
- page{
|
|
|
|
|
|
+ page {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
- .magr5{
|
|
|
|
|
|
+
|
|
|
|
+ .magl5 {
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .magr5 {
|
|
margin-right: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
- .container{
|
|
|
|
|
|
+
|
|
|
|
+ .magr10 {
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .magr20 {
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .container {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
background-color: #F3F3F3;
|
|
background-color: #F3F3F3;
|
|
- .swiper{
|
|
|
|
- height: 150px;
|
|
|
|
|
|
+
|
|
|
|
+ .swiper {
|
|
|
|
+ height: 120px;
|
|
background-color: #52A63A;
|
|
background-color: #52A63A;
|
|
border-radius: 0 0 40px 40px;
|
|
border-radius: 0 0 40px 40px;
|
|
- .swiper-text{
|
|
|
|
|
|
+
|
|
|
|
+ .swiper-text {
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
padding-top: 15px;
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .sort-right-box{
|
|
|
|
- height: calc(100% - 58px);
|
|
|
|
- .goods-box{
|
|
|
|
|
|
+
|
|
|
|
+ .sort-right-box {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50px;
|
|
|
|
+ height: calc(100% - 50px);
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
+ .goods-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% - 44px);
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- .goods-row{
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ // box-sizing: border-box;
|
|
|
|
+ .goods-row {
|
|
width: calc(100% - 24px);
|
|
width: calc(100% - 24px);
|
|
height: 185px;
|
|
height: 185px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin: 4px 0 12px 12px;
|
|
margin: 4px 0 12px 12px;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
border-radius: 15px;
|
|
border-radius: 15px;
|
|
- .goods-top{
|
|
|
|
- display: flex;
|
|
|
|
|
|
+
|
|
|
|
+ .goods-top {
|
|
|
|
+ display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+
|
|
.select {
|
|
.select {
|
|
- color: #52A63A;
|
|
|
|
|
|
+ color: #52A63A;
|
|
font-size: 35px;
|
|
font-size: 35px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.select-goods {
|
|
.select-goods {
|
|
color: #52A63A;
|
|
color: #52A63A;
|
|
font-size: 35px;
|
|
font-size: 35px;
|
|
float: left;
|
|
float: left;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
- .split-line{
|
|
|
|
|
|
+
|
|
|
|
+ .split-line {
|
|
height: 1px;
|
|
height: 1px;
|
|
background: #EEEEEE;
|
|
background: #EEEEEE;
|
|
margin-top: 5px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.goods-middle {
|
|
.goods-middle {
|
|
display: flex;
|
|
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-img{
|
|
|
|
- width: 84px;
|
|
|
|
- height: 84px;
|
|
|
|
- }
|
|
|
|
- .goods-details{
|
|
|
|
- height: 28px;
|
|
|
|
- font-size: 12px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- color: #999999;
|
|
|
|
- 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-spec{
|
|
|
|
- height: 16px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- line-height: 16px;
|
|
|
|
- font-size: 15px;
|
|
|
|
- color: #52A63A;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- }
|
|
|
|
- .goods-bottom{
|
|
|
|
- position: relative;
|
|
|
|
- left: 130px;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
+
|
|
|
|
+ .goods-bottom {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: baseline;
|
|
align-items: baseline;
|
|
|
|
+ font-size: 14px;
|
|
}
|
|
}
|
|
- .settle-btn{
|
|
|
|
|
|
+
|
|
|
|
+ .settle-btn {
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
background: #52A63A;
|
|
background: #52A63A;
|
|
border-radius: 40px;
|
|
border-radius: 40px;
|
|
@@ -175,46 +337,13 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
- .goods-number{
|
|
|
|
- height: 16px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- line-height: 16px;
|
|
|
|
- .goods-icon{
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #52A63A;
|
|
|
|
- }
|
|
|
|
- .goods-spec{
|
|
|
|
- font-size: 15px;
|
|
|
|
- color: #52A63A;
|
|
|
|
- margin-right: 15px;
|
|
|
|
- }
|
|
|
|
- .goods-sales{
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #999999;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .goods-info{
|
|
|
|
- width: calc(100% - 104px);
|
|
|
|
- height: 84px;
|
|
|
|
- float: left;
|
|
|
|
- .goods-name{
|
|
|
|
- height: 18px;
|
|
|
|
- font-size: 15px;
|
|
|
|
- font-family: PingFang SC;
|
|
|
|
- color: #333333;
|
|
|
|
- line-height: 18px;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- overflow: hidden;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .goods-cart{
|
|
|
|
- width: 20px;
|
|
|
|
- height: 84px;
|
|
|
|
- float: left;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // /deep/ .uni-numbox {
|
|
|
|
+ // width: 80px;
|
|
|
|
+ // height: 20px;
|
|
|
|
+ // }
|
|
</style>
|
|
</style>
|