|
|
@@ -0,0 +1,220 @@
|
|
|
+<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" @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" @click=""></view>
|
|
|
+ <cover-image class="goods-img" @click="" :src="item.url"></cover-image>
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="split-line"></view>
|
|
|
+ <view class="goods-bottom">
|
|
|
+ <text class="magr5">合计</text>
|
|
|
+ <view class="goods-spec magr5">
|
|
|
+ <text>{{item.spec}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="settle-btn"><text>结算(3)</text></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>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uniTag from "@/components/uni-tag/uni-tag.vue"
|
|
|
+ export default {
|
|
|
+ components: {'uni-tag': uniTag},
|
|
|
+ data() {
|
|
|
+ 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}
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ page{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .magr5{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #F3F3F3;
|
|
|
+ .swiper{
|
|
|
+ height: 150px;
|
|
|
+ background-color: #52A63A;
|
|
|
+ border-radius: 0 0 40px 40px;
|
|
|
+ .swiper-text{
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sort-right-box{
|
|
|
+ height: calc(100% - 58px);
|
|
|
+ .goods-box{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 44px);
|
|
|
+ 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-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;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
+ .settle-btn{
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #52A63A;
|
|
|
+ border-radius: 40px;
|
|
|
+ height: 30px;
|
|
|
+ width: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhaoxw