|
|
@@ -1,24 +1,44 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <navigation-bar :title="title" background-color="#fff" front-color="#000000" :left-button="null" />
|
|
|
+ <!-- <image src="../../static/images/top-bg.png"></image> -->
|
|
|
+ <!-- <navigation-bar :title="title" background-color="#fff" front-color="#000000" :left-button="null" /> -->
|
|
|
+ <uni-nav-bar color="#fff" height="60" left-icon="back" @clickLeft="back()" right-icon="list" :border="false" backgroundColor="#0081ff" :title="title" />
|
|
|
+ </u-navbar>
|
|
|
<u-list v-if="active==1" class="list" width="100%" @scrolltolower="scrolltolower">
|
|
|
<u-list-item v-for="(item, index) in goods" :key="index">
|
|
|
- <view class="card" @click="toDetails(item.id)">
|
|
|
- <view class="card-body">
|
|
|
- <image
|
|
|
- src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
|
|
|
- mode="aspectFill" class="img"></image>
|
|
|
- <view class="txt">
|
|
|
- <view style="font-size: 30rpx;height: 140rpx;">{{item.goodsName}}</view>
|
|
|
- <view class="piece">{{item.price}} 元</view>
|
|
|
- </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="goods-item">
|
|
|
+ <u-row>
|
|
|
+ <u-col span="5" @click="toDetails(item.id)">
|
|
|
+ <u--image :showLoading="true" src="" width="270rpx" height="220rpx"></u--image>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="7">
|
|
|
+ <view class="t1 txt" @click="toDetails(item.id)">
|
|
|
+ <text>{{item.goodsName}}</text>
|
|
|
+ <!-- <text>[老板力荐]鲜活小龙虾(帮剪头去虾线)约250g/份</text> -->
|
|
|
+ </view>
|
|
|
+ <view class="txt">
|
|
|
+ <text v-if="item.grossWeight">{{item.grossWeight}}吨</text>
|
|
|
+ </view>
|
|
|
+ <view class="txt" v-if="item.tradeAreaName">
|
|
|
+ <u-tag style="width: 250rpx" :text="item.tradeAreaName" plain size="mini"></u-tag>
|
|
|
+ </view>
|
|
|
+ <view class="t4">
|
|
|
+ <view class="price">￥{{item.price}}</view>
|
|
|
+ <view class="car">
|
|
|
+ <u-icon color="#fff" name="shopping-cart-fill" size="30"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-list-item>
|
|
|
</u-list>
|
|
|
<order v-if="active==3"></order>
|
|
|
<view class="tab">
|
|
|
- <view :class="active==item.id ? 'active-btn' : 'tabBtn'" v-for="item in tabList" :key="item.id" @click="tabClick(item.id)">{{item.name}}</view>
|
|
|
+ <view :class="active==item.id ? 'active-btn' : 'tabBtn'" v-for="item in tabList" :key="item.id"
|
|
|
+ @click="tabClick(item.id)">{{item.name}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -31,8 +51,7 @@
|
|
|
goods: [],
|
|
|
active: 1,
|
|
|
title: '一级市场',
|
|
|
- tabList: [
|
|
|
- {
|
|
|
+ tabList: [{
|
|
|
id: 1,
|
|
|
name: "市场"
|
|
|
},
|
|
|
@@ -82,69 +101,105 @@
|
|
|
},
|
|
|
tabClick(id) {
|
|
|
this.active = id
|
|
|
- if(id==1) {
|
|
|
- this.title='一级市场'
|
|
|
- }else if(id==2) {
|
|
|
- this.title='购物车'
|
|
|
- } else{
|
|
|
- this.title='订单列表'
|
|
|
+ if (id == 1) {
|
|
|
+ this.title = '一级市场'
|
|
|
+ } else if (id == 2) {
|
|
|
+ this.title = '购物车'
|
|
|
+ } else {
|
|
|
+ this.title = '订单列表'
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rightClick() {
|
|
|
+ console.log('rightClick');
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+ page {
|
|
|
+ background-image: url(../../static/images/top-bg.png);
|
|
|
+ background-size: 100% 400rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top;
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ }
|
|
|
+
|
|
|
.list {
|
|
|
height: auto;
|
|
|
border-radius: 10rpx;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .card {
|
|
|
- padding: 10rpx;
|
|
|
+ margin: 15rpx;
|
|
|
}
|
|
|
|
|
|
- .card-body {
|
|
|
- display: flex;
|
|
|
- height: 300rpx;
|
|
|
+ .tab {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 1rpx;
|
|
|
width: 100%;
|
|
|
- /* border: #888 1rpx solid; */
|
|
|
- box-shadow: 1rpx 1rpx #888;
|
|
|
- border-radius: 10rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-top: #CFCFCF 1rpx solid;
|
|
|
}
|
|
|
|
|
|
- .img {
|
|
|
- height: 300rpx;
|
|
|
- width: 300rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
+ .goods-item {
|
|
|
+ margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
- .txt {
|
|
|
- padding: 10rpx;
|
|
|
- width: 300rpx;
|
|
|
+ .item-box {
|
|
|
+ height: 230rpx;
|
|
|
+ width: 90%;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1rpx #FFF solid;
|
|
|
+ margin: 10rpx 0rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
- .piece {
|
|
|
- margin: 50rpx 10rpx;
|
|
|
- color: red;
|
|
|
+
|
|
|
+ .txt{
|
|
|
+ /* height: 50rpx; */
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t1{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ word-wrap: break-word;
|
|
|
position: relative;
|
|
|
- top: 50rpx;
|
|
|
- /* left: 5rpx; */
|
|
|
+ top: 1rpx;
|
|
|
+ right: 5rpx;
|
|
|
}
|
|
|
|
|
|
- .tab{
|
|
|
- position: absolute;
|
|
|
+ .t4{
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
bottom: 1rpx;
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
+ right: 5rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price{
|
|
|
+ color: #ef732a;
|
|
|
+ width: 400rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .car{
|
|
|
+ background-color: #0081ff;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ text-align: center;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- border-top: #CFCFCF 1rpx solid;
|
|
|
}
|
|
|
-
|
|
|
- .tabBtn{
|
|
|
+
|
|
|
+ .tabBtn {
|
|
|
width: 35%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -152,9 +207,9 @@
|
|
|
justify-content: center;
|
|
|
margin: 0 30rpx;
|
|
|
}
|
|
|
-
|
|
|
- .active-btn{
|
|
|
- width: 35%;
|
|
|
+
|
|
|
+ .active-btn {
|
|
|
+ width: 35%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
mym
