上传

api/model/index.js

@@ -46,6 +46,17 @@ const api = {
 		url: '/index_common/getCategoryList',
 		method: 'GET',
 	},
+	// 新查询分类以及商品数据接口
+	getCategoryPidList: {
+		url: '/index_common/getCategoryPidList',
+		method: 'GET',
+		debounce : 250,
+	},
+	// 查询一级分类接口
+	getPidList: {
+		url: '/index_common/getCategoryPidList',
+		method: 'GET',
+	},
 	// 获取分类分页商品列表接口
 	getClassShopPageList: {
 		url: '/index_common/getClassShopPageList',
@@ -112,6 +123,14 @@ const api = {
 		limit: 1000,
 		showLoading: true,
 	},
+	// 取消订单
+	cancelOrder: {
+		url: '/index_common/cancelOrder',
+		method: 'GET',
+		auth: true,
+		limit: 1000,
+		showLoading: true,
+	},
 	// 获取首页广告列表
 	getRiceProductList: {
 		url: '/index_common/getRiceAdList',

components/user/productList.vue

@@ -31,7 +31,9 @@
 			</view>
 		</view>
 		
-		<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
+		<view style="width: 700rpx;">
+			<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
+		</view>
 	</view>
 </template>
 
@@ -71,7 +73,6 @@
 	.list {
 		display: flex;
 		flex-wrap: wrap;
-
 		.item {
 			position: relative;
 			width: 345rpx;

mixins/order.js

@@ -51,5 +51,20 @@ export default {
 				}
 			})
 		},
+		// 取消订单
+		cancelOrder(item){
+			uni.showModal({
+				title: '确认取消订单吗？',
+				success : e => {
+					if(e.confirm){
+						this.$api('cancelOrder', {
+							orderId : item.id,
+						}, res => {
+							this.getData()
+						})
+					}
+				}
+			})
+		},
 	}
 }

pages/index/category.vue

@@ -9,23 +9,41 @@
 
 		<!-- 搜索栏 -->
 		<view class="search">
-			<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData"
-				v-model="queryParams.title"></uv-search>
+			<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" 
+			@search="search" 
+			@change="search" 
+			@custom="search"
+			v-model="queryParams.title"></uv-search>
+		</view>
+		
+		<!-- 商品列表 -->
+		<view style="position: 20rpx;"
+		v-if="queryParams.title">
+			<productList :list="list" />
 		</view>
 
 		<!-- 分类商品列表 -->
-		<view class="category">
+		<view class="category"
+		v-else>
 			<uv-vtabs 
 			:list="category" 
 			:current="current"
-			keyName="title" 
+			keyName="name" 
 			@change="change">
 				<view class="list">
 					<uv-vtabs-item>
-						<productItem v-for="(item, index) in list" :key="index" :item="item"
-							@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)" />
+						<view class="category-item"
+						v-for="(item, index) in category[current].children" :key="index">
+							<view class="category-title">
+								{{ item.name }}
+							</view>
+							
+							<productItem :item="pro"
+							v-for="(pro, i) in item.shopList" :key="i"
+							@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" />
+						</view>
 					
-						<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
+						<uv-empty mode="list" v-if="category[current].children.length == 0"></uv-empty>
 					</uv-vtabs-item>
 				</view>
 			</uv-vtabs>
@@ -43,11 +61,13 @@
 		mapState
 	} from 'vuex'
 	import tabber from '@/components/base/tabbar.vue'
+	import productList from '@/components/user/productList.vue'
 	export default {
 		mixins: [mixinsList],
 		components: {
 			productItem,
 			tabber,
+			productList,
 		},
 		data() {
 			return {
@@ -65,21 +85,28 @@
 			if (search) {
 				this.queryParams.title = search
 			}
-			this.$store.commit('getCategoryList')
+			// this.$store.commit('getCategoryList')
 			if(this.category.length > 0 && cid){
 				this.category.forEach((n, i) => {
 					if(n.id == cid){
 						this.current = i
 					}
 				})
-				this.queryParams.classId = cid
+				// this.queryParams.classId = cid
 			}else if (this.category.length > 0) {
-				this.queryParams.classId = this.category[0].id
+				// this.queryParams.classId = this.category[0].id
 			}
 		},
 		methods: {
 			change(e) {
-				this.queryParams.classId = this.category[e].id
+				// this.queryParams.classId = this.category[e].id
+				this.current = e
+			},
+			search(){
+				for(let i = 0;i < 10;i++){
+					delete this.queryParams[i]
+				}
+				this.queryParams.pageSize = 10
 				this.getData()
 			},
 		}
@@ -126,6 +153,30 @@
 	.category {
 		font-size: 30rpx;
 		color: #333;
+		.category-title{
+			position: relative;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 120rpx;
+			
+			&::before,
+			&::after {
+				position: absolute;
+				top: 50%;
+				content: '';
+				width: 10%;
+				border-top: 2rpx solid black;
+			}
+			
+			&::before {
+				left: 25%;
+			}
+			
+			&::after {
+				right: 25%;
+			}
+		}
 		
 		&::v-deep .uv-vtabs {
 			width: 750rpx;

pages/index/index.vue

@@ -19,11 +19,11 @@
 			<!-- 首页-分类菜单 -->
 			<view class="home-menu">
 				<uv-grid :border="false" :col="5">
-					<uv-grid-item v-for="(item,index) in category" 
+					<uv-grid-item v-for="(item, index) in categoryList" 
 					:key="index" 
 					@click="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)">
 						<image :src="item.image" mode="aspectFill"></image>
-						<text class="menu-text">{{item.title}}</text>
+						<text class="menu-text">{{item.name}}</text>
 					</uv-grid-item>
 				</uv-grid>
 			</view>
@@ -131,7 +131,8 @@
 				riceProductList: [], //体验产品
 				newList: [], //新闻列表
 				mixinsListApi: 'getClassShopPageList',
-				adList: []
+				adList: [],
+				categoryList : [],
 			}
 		},
 		computed: {
@@ -146,6 +147,7 @@
 			this.getBanner()
 			this.getRiceNoticeList()
 			this.getRiceIconList()
+			this.getCategoryList()
 			this.getRiceAdList()
 			if(uni.getStorageSync('token')){
 				this.$store.commit('getRiceInfo')
@@ -164,6 +166,14 @@
 				})
 				this.keyword = ''
 			},
+			// 查询分类接口
+			getCategoryList() {
+				this.$api('getPidList', res => {
+					if (res.code == 200) {
+						this.categoryList = res.result
+					}
+				})
+			},
 
 			// 获取轮播图
 			getBanner() {

pages/index/order.vue

@@ -6,8 +6,8 @@
 		<!-- 订单筛选 -->
 		<view class="tabs">
 			<uv-tabs :list="tabs" :activeStyle="{color : '#fff', fontWeight : 600}" lineColor="#fff"
-				:inactiveStyle="{color: 'rgba(255,255,255,.8)'}" lineHeight="8rpx" lineWidth="50rpx" :current="current"
-				:scrollable="false" @click="clickTabs"></uv-tabs>
+			:inactiveStyle="{color: 'rgba(255,255,255,.8)'}" lineHeight="8rpx" lineWidth="50rpx" :current="current"
+			@click="clickTabs"></uv-tabs>
 		</view>
 
 		<view class="list">
@@ -55,6 +55,10 @@
 						立即付款
 					</view>
 
+					<view @click.stop="cancelOrder(item)" class="btn" v-if="item.state == 0">
+						取消订单
+					</view>
+
 					<view class="btn" @click.stop="confirmOrder(item)" v-if="item.state == 2">
 						确认收货
 					</view>
@@ -65,6 +69,11 @@
 				</view>
 
 			</view>
+			<view style="
+			margin-top: 20rpx;
+			min-width: 700rpx;">
+				<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
+			</view>
 		</view>
 		
 		<customerServicePopup ref="customerServicePopup" />
@@ -86,7 +95,7 @@
 		mixins: [mixinsList, mixinsOrder],
 		components: {
 			tabber,
-			customerServicePopup
+			customerServicePopup,
 		},
 		computed: {},
 		data() {
@@ -97,6 +106,12 @@
 					{
 						name: '待付款'
 					},
+					{
+						name: '待发货'
+					},
+					{
+						name: '待收货'
+					},
 					{
 						name: '已完成'
 					},

store/store.js

@@ -134,7 +134,7 @@ const store = new Vuex.Store({
 		},
 		// 查询分类接口
 		getCategoryList(state) {
-			api('getCategoryList', res => {
+			api('getCategoryPidList', res => {
 				if (res.code == 200) {
 					state.category = res.result
 				}