新增旧货交易列表页面

pages/index/old/list/list.vue

@@ -0,0 +1,464 @@
+ <template>
+ 	<view>
+ 		<top-bar></top-bar>
+ 		<common-header></common-header>
+ 		<category-bar></category-bar>
+
+ 		<view class="page-nav">
+ 			<el-breadcrumb separator=">">
+ 				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+ 				<el-breadcrumb-item>
+ 					<navigator style="display: inline-block;" url="/pages/index/old/list/list">旧货交易</navigator>
+ 				</el-breadcrumb-item>
+ 				<el-breadcrumb-item class="text-main">采购信息</el-breadcrumb-item>
+ 			</el-breadcrumb>
+ 			<el-row class="">
+ 				<el-button @click="toRelease" type="primary" round>发布旧货交易</el-button>
+ 				<el-button @click="toMy" type="primary" round plain class="empty-bg-plain-btn">我发布的信息
+ 				</el-button>
+ 			</el-row>
+ 		</view>
+
+
+ 		<!-- 筛选表单 -->
+ 		<view class="filter-outer">
+ 			<el-form @submit.native.prevent label-width="80px">
+ 				<el-form-item label="关键词" class="border-bottom pb-30">
+ 					<el-input @keyup.enter.native="search(1)" clearable placeholder="输入关键字搜索" v-model="keyword">
+ 						<i slot="prefix" class="el-input__icon el-icon-search"></i>
+ 						<el-button @click="search(1)" type="primary" slot="append" style="border-radius: 0">搜索
+ 						</el-button>
+ 					</el-input>
+ 				</el-form-item>
+ 				<el-form-item label="物资分类" class="border-bottom pb-30">
+ 					<view class="flex justify-start items-center flex-wrap">
+ 						<text @click="clickedCateIndex = -1" class="pointer mr-25"
+ 							:class="[clickedCateIndex === -1 ? 'text-main selected-cate' : '']">全部
+ 						</text>
+ 						<view v-for="(item, index) in categoryTreeData" :key="index">
+ 							<text @click="clickedCateIndex = index" class="pointer mr-25"
+ 								:class="[clickedCateIndex === index ? 'text-main selected-cate' : '']"
+ 								v-if="index < 10">
+ 								{{ item.name }}
+ 							</text>
+ 						</view>
+ 					</view>
+ 					<view class="child-cate flex justify-start items-center flex-wrap">
+ 						<template v-if="clickedCateIndex === -1">
+ 							<text class="pointer mr-25" @click="selectCate(item._id)"
+ 								:class="[checkCategoryList.includes(item._id) ? 'text-main' : '']"
+ 								v-for="(item, index) in allChildCate" :key="index">{{ item.name }}
+ 							</text>
+ 						</template>
+ 						<template v-else>
+ 							<text class="pointer mr-25" @click="selectCate(item._id)"
+ 								:class="[checkCategoryList.includes(item._id) ? 'text-main' : '']"
+ 								v-for="(item, index) in categoryTreeData[clickedCateIndex].children" :key="index">
+ 								{{ item.name }}
+ 							</text>
+ 						</template>
+ 					</view>
+ 				</el-form-item>
+ 				<el-form-item label="筛选区域" class="border-bottom pb-30">
+ 					<view class="flex justify-start items-center flex-wrap">
+ 						<text @click="selectProvince(-1)" class="pointer mr-25 flex-grow-0"
+ 							:class="[checkProvinceList.length === 0 ? 'text-main selected-cate' : '']">全国
+ 						</text>
+ 						<view v-for="(item, index) in provinceData" :key="index" class="flex-grow-0 pointer mr-25">
+ 							<text @click="selectProvince(item.code)"
+ 								:class="[checkProvinceList.includes(item.code)? 'text-main selected-cate' : '']"
+ 								v-if="index < 10 || showAllProvince">
+ 								{{ item.name }}
+ 							</text>
+ 						</view>
+ 						<text @click="showAllProvince = !showAllProvince" class="pointer mr-25">查看更多
+ 						</text>
+ 					</view>
+ 				</el-form-item>
+ 				<el-form-item label="已选">
+ 					<view class="tags">
+ 						<el-tag v-for="(item, index) in checkCategoryArr" :key="index">{{ item.name }}</el-tag>
+ 					</view>
+ 				</el-form-item>
+
+ 			</el-form>
+ 		</view>
+
+ 		<!-- 商品列表 -->
+ 		<view class="goods-list">
+ 			<view v-for="(item, index) in goodsData.rows" :key="index" class="goods">
+ 				<view class="goods-info">
+ 					<el-image src="https://oss.wsdns.cn/20231204/d35332fa6a3b4596b522edf9527ac612.png"
+ 						class="goods-img" />
+          <view class="info">
+            <view class="goods-name">高强螺栓 2000套</view>
+            <view class="field">
+              <view class="desc"><view class="text">企      业</view><view>广西聚钱财实业有限公司</view></view>
+              <view class="desc"></view>
+              <view class="desc"><view class="text">所属分类</view><view>成品钢材</view></view>
+              <view class="desc"><view class="text">发布时间</view><view>2022-09-30</view></view>
+              <view class="desc"><view class="text">所在地区</view><view>广西壮族自治区-河池市</view></view>
+              <view class="desc"><view class="text">有效日期</view><view>2022-09-30</view></view>
+            </view>
+          </view>
+ 				</view>
+ 				<view class="buttons">
+					<button type="default" class="btn" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" plain>查看电话</button>
+          <button type="default" class="btn green" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" plain>添加微信</button>
+          <button type="default" class="btn" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" plain>向此卖家询价</button>
+ 				</view>
+ 			</view>
+
+      <view class="paginatio">
+        <el-pagination @current-change="search" background layout="prev, pager, next" :total="goodsData.total">
+        </el-pagination>
+      </view>
+ 		</view>
+ 		<common-footer></common-footer>
+ 	</view>
+ </template>
+
+ <script>
+ 	import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
+
+ 	export default {
+ 		data() {
+ 			return {
+ 				categoryTreeData: [],
+ 				allChildCate: [],
+ 				checkCategoryList: [],
+ 				clickedCateIndex: -1,
+ 				provinceData: provinces,
+ 				checkProvinceList: [],
+ 				keyword: '',
+ 				goodsData: {
+ 					total: 0,
+ 					rows: []
+ 				},
+ 				showAllProvince: false
+ 			};
+ 		},
+ 		onShow() {
+ 			this.search(1)
+ 			vk.callFunction({
+ 				url: 'client/spot/category/pub/getTree',
+ 				title: '请求中...',
+ 				data: {},
+ 				success: (data) => {
+ 					this.categoryTreeData = data.rows
+ 					this.allChildCate = []
+ 					this.categoryTreeData.forEach(item => {
+ 						item.children.forEach(child => {
+ 							this.allChildCate.push(child)
+ 						})
+ 					})
+ 				}
+ 			});
+ 		},
+ 		methods: {
+ 			selectCate(id) {
+ 				const index = this.checkCategoryList.indexOf(id)
+ 				if (index === -1) this.checkCategoryList.push(id)
+ 				else this.checkCategoryList.splice(index, 1)
+ 				this.search(1)
+ 			},
+ 			selectProvince(code) {
+ 				if (code === -1) this.checkProvinceList = []
+ 				else {
+ 					const index = this.checkProvinceList.indexOf(code)
+ 					if (index === -1) this.checkProvinceList.push(code)
+ 					else this.checkProvinceList.splice(index, 1)
+ 				}
+ 				this.search(1)
+ 			},
+ 			async toRelease() {
+ 				const {
+ 					userInfo
+ 				} = await vk.callFunction({
+ 					url: 'user/kh/getMyUserInfo'
+ 				})
+ 				if (!userInfo.fadadaConfirm || [-1, 2].includes(userInfo.authStatus)) {
+ 					this.$confirm('您尚未认证, 是否前往认证?', '提示', {
+ 						confirmButtonText: '确定',
+ 						cancelButtonText: '取消',
+ 						type: 'warning'
+ 					}).then(() => {
+ 						vk.navigateTo({
+ 							url: '/pages/user/user?menu=fadada'
+ 						});
+ 					})
+ 				} else if (vk.pubfn.isNull(userInfo.businessCard)) {
+ 					this.$confirm('请完善名片信息', '提示', {
+ 						confirmButtonText: '确定',
+ 						cancelButtonText: '取消',
+ 						type: 'warning'
+ 					}).then(() => {
+ 						vk.navigateTo({
+ 							url: '/pages/user/user?menu=business-card'
+ 						});
+ 					})
+ 				} else {
+ 					vk.navigateTo({
+ 						url: '/pages/spot/release/release'
+ 					})
+ 				}
+ 			},
+ 			async toMy() {
+ 				const {
+ 					userInfo
+ 				} = await vk.callFunction({
+ 					url: 'user/kh/getMyUserInfo'
+ 				})
+ 				if (!userInfo.fadadaConfirm && userInfo.authStatus === 1) {
+ 					this.$confirm('您尚未认证, 是否前往认证?', '提示', {
+ 						confirmButtonText: '确定',
+ 						cancelButtonText: '取消',
+ 						type: 'warning'
+ 					}).then(() => {
+ 						this.getCertUrl()
+ 					})
+ 				} else if (vk.pubfn.isNull(userInfo.businessCard)) {
+ 					this.$confirm('请完善名片信息', '提示', {
+ 						confirmButtonText: '确定',
+ 						cancelButtonText: '取消',
+ 						type: 'warning'
+ 					}).then(() => {
+ 						vk.navigateTo('/pages/user/user?menu=business-card');
+ 					})
+ 				} else {
+ 					vk.navigateTo({
+ 						url: '/pages/spot/goods/my'
+ 					})
+ 				}
+ 			},
+
+ 			search(pageIndex) {
+ 				vk.callFunction({
+ 					url: 'client/spot/goods/pub/getList',
+ 					data: {
+ 						pageIndex: pageIndex,
+ 						pageSize: 20,
+ 						keyword: this.keyword,
+ 						categoryIds: this.checkCategoryList,
+ 						provinceCodes: this.checkProvinceList
+ 					},
+ 					success: (data) => {
+ 						console.log('data: ', data);
+ 						data.rows.forEach(item => {
+ 							try {
+ 								item.addressStr = item.address.province.name + "-" + item.address.city
+ 									.name + "-" + item.address.area.name
+ 							} catch (err) {
+ 								item.addressStr = ""
+ 							}
+ 						})
+ 						this.goodsData = data
+ 					}
+ 				});
+ 			},
+ 			getCertUrl() {
+ 				vk.callFunction({
+ 					url: 'client/fadada.getVerifyUrl',
+ 					success: (res) => {
+ 						location.href = res.data.url
+ 					}
+ 				});
+ 			},
+ 		},
+ 		computed: {
+ 			checkCategoryArr() {
+ 				const arr = []
+ 				this.allChildCate.forEach(item => {
+ 					if (this.checkCategoryList.includes(item._id)) arr.push(item)
+ 				})
+ 				this.provinceData.forEach(item => {
+ 					if (this.checkProvinceList.includes(item.code)) {
+ 						arr.push(item)
+ 					}
+ 				})
+ 				return arr
+ 			}
+
+ 		}
+ 	}
+ </script>
+
+ <style lang="scss" scoped>
+ 	.carousel {
+ 		width: 1200px;
+ 		margin: 20px auto;
+ 	}
+
+ 	.page-nav {
+ 		display: flex;
+ 		justify-content: space-between;
+ 	}
+
+ 	.carousel-img {
+ 		width: 100%;
+ 		height: 100%;
+ 	}
+
+ 	.goods-options {
+ 		background-color: #FFFFFF;
+ 		padding: 20px;
+ 	}
+
+ 	.filter-outer {
+ 		width: 1200px;
+ 		margin: 20px auto;
+ 		background-color: #FFFFFF;
+ 		padding: 20px;
+ 	}
+
+ 	.tags {
+ 		display: flex;
+ 		flex-wrap: wrap;
+
+ 		.el-tag {
+ 			margin-right: 10px;
+ 		}
+ 	}
+
+
+ 	.goods-list {
+ 		width: 1200px;
+ 		margin: 20px auto;
+ 		display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+ 		flex-wrap: wrap;
+ 	}
+
+ 	.goods {
+ 		background-color: #FFFFFF;
+ 		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
+ 		text-align: center;
+    width: 1200px;
+    margin: 10px auto;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    .goods-info{
+      display: flex;
+      .goods-img {
+        width: 200px;
+        height: 150px;
+      }
+      .info{
+        width: 700px;
+        text-align: left;
+        margin-left: 20px;
+        .goods-name{
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 2.5em;
+        }
+        .field{
+          display: flex;
+          flex-wrap: wrap;
+          .desc{
+            display: flex;
+            width: 300px;
+            line-height: 2.5em;
+            .text{
+              width: 80px;
+              color: #999999;
+            }
+          }
+        }
+
+      }
+    }
+
+    .buttons{
+      padding: 0 20px;
+      width: 200px;
+      border-left: 1px solid #f3f3f3;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .btn{
+        width: 120px;
+      }
+      .green{
+        background-color: #7ec050 !important;
+        color: #ffffff;
+      }
+    }
+
+ 		&-title {
+ 			font-size: 15px;
+ 			color: #101010;
+ 			height: 62px;
+ 			padding-top: 20px;
+ 			font-weight: bold;
+ 		}
+
+ 		&-stock {
+ 			font-size: 12px;
+ 			color: #BD3124;
+ 		}
+
+ 		&-address {
+ 			font-size: 12px;
+ 			margin: 10px 0;
+ 		}
+
+ 		&-image {
+ 			width: 200px;
+ 			height: 70px;
+ 			margin: 0 auto;
+
+ 			image {
+ 				width: 100%;
+ 				height: 100%;
+ 			}
+ 		}
+
+ 		&-company {
+ 			color: #4F4F4F;
+ 			font-size: 14px;
+ 			margin: 10px 0;
+ 		}
+
+ 		&-buy {
+ 			width: 108px;
+ 			height: 30px;
+ 			line-height: 30px;
+ 			background-color: rgba(255, 255, 255, 1);
+ 			color: rgba(169, 41, 36, 1);
+ 			font-size: 13px;
+ 			text-align: center;
+ 			font-family: Roboto;
+ 			border: 1px solid rgba(169, 41, 36, 1);
+ 			margin: 0 auto;
+ 			cursor: pointer;
+ 		}
+
+ 		.goods-image {
+ 			width: 100%;
+ 		}
+ 	}
+
+ 	.paginatio {
+ 		float: none;
+ 		width: 1200px;
+ 		margin: 20px auto;
+ 		display: flex;
+ 		justify-content: center;
+ 	}
+
+ 	.selected-cate {
+ 		border-bottom: 2px solid #BD3124;
+ 		line-height: 40rpx;
+ 	}
+
+ 	.child-cate {
+ 		background-color: #DB8382;
+ 		color: white;
+ 		margin-top: 10rpx;
+ 		border-radius: 15rpx;
+ 		padding: 0 20rpx;
+ 	}
+ </style>

pages/index/old/old.vue

@@ -141,7 +141,7 @@
 					<el-card class="new-box">
 						<div slot="header" class="clearfix">
 							<span class="title">最新拍卖信息</span>
-							<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
+							<el-button style="float: right; padding: 3px 0" type="text" @click="navTo('/pages/index/old/list/list')">查看更多</el-button>
 						</div>
             <view class="list8">
               <view class="article">
@@ -169,7 +169,7 @@
 					<el-card class="new-box">
 						<div slot="header" class="clearfix">
 							<span class="title">最新采购信息</span>
-							<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
+							<el-button style="float: right; padding: 3px 0" type="text" @click="navTo('/pages/index/old/list/list')">查看更多</el-button>
 						</div>
             <view class="list8">
               <view class="article">
@@ -197,7 +197,7 @@
 					<el-card class="new-box">
 						<div slot="header" class="clearfix">
 							<span class="title">最新租赁信息</span>
-							<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
+							<el-button style="float: right; padding: 3px 0" type="text" @click="navTo('/pages/index/old/list/list')">查看更多</el-button>
 						</div>
             <view class="list8">
               <view class="article">
@@ -225,7 +225,7 @@
 					<el-card class="new-box">
 						<div slot="header" class="clearfix">
 							<span class="title">最新物资回收信息</span>
-							<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
+							<el-button style="float: right; padding: 3px 0" type="text" @click="navTo('/pages/index/old/list/list')">查看更多</el-button>
 						</div>
 						<view class="list8">
               <view class="article">