完成菜品分类页面接口

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/category/entity/SysCategory.java

@@ -2,10 +2,15 @@ package com.itmk.web.category.entity;
 
 
 import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.annotation.TableId;
 import com.baomidou.mybatisplus.annotation.TableName;
+import com.itmk.web.goods.entity.SysGoods;
 import lombok.Data;
 
+import java.util.ArrayList;
+import java.util.List;
+
 @Data
 
 @TableName("sys_category")//表明该类实体类所关联的数据表库
@@ -16,4 +21,7 @@ public class SysCategory {
     private Long categoryId;
     private String categoryName;
     private Integer orderNum;
+
+    @TableField(exist = false)
+    private List<SysGoods> goods = new ArrayList<>();
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/wxapi/controller/WxCategoryController.java

@@ -0,0 +1,59 @@
+package com.itmk.web.wxapi.controller;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.itmk.utils.ResultUtils;
+import com.itmk.utils.ResultVo;
+import com.itmk.web.category.entity.SysCategory;
+import com.itmk.web.category.service.SysCategoryService;
+import com.itmk.web.goods.entity.SysGoods;
+import com.itmk.web.goods.service.SysGoodsService;
+import com.itmk.web.goods_specs.entity.SysGoodsSpecs;
+import com.itmk.web.goods_specs.service.SysGoodsSpecsService;
+import com.itmk.web.banner.entity.SysBanner;
+import com.itmk.web.banner.service.SysBannerService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/wxapi/category")
+public class WxCategoryController {
+    @Autowired
+    private SysGoodsService sysGoodsService;
+    @Autowired
+    private SysCategoryService sysCategoryService;
+    @Autowired
+    private SysGoodsSpecsService sysGoodsSpecsService;
+
+    //分类数据
+    @GetMapping("/getCategoryList")
+    public ResultVo getCategoryList(){
+        QueryWrapper<SysCategory> query = new QueryWrapper<>();
+        query.lambda().orderByAsc(SysCategory::getOrderNum);
+        List<SysCategory> list = sysCategoryService.list(query);
+        if(list.size() > 0){
+            for (int i = 0; i < list.size(); i++) {
+                //查询分类下面的菜品
+                QueryWrapper<SysGoods> queryWrapper = new QueryWrapper<>();
+                queryWrapper.lambda().eq(SysGoods::getCategoryId,list.get(i).getCategoryId())
+                        .orderByAsc(SysGoods::getOrderNum);
+                List<SysGoods> goods = sysGoodsService.list(queryWrapper);
+                list.get(i).setGoods(goods);
+                if(goods.size() > 0){
+                    for (int j = 0; j < goods.size(); j++) {
+                        //查询价格
+                        QueryWrapper<SysGoodsSpecs> queryWrapperPrice = new QueryWrapper<>();
+                        queryWrapperPrice.lambda().eq(SysGoodsSpecs::getGoodsId,goods.get(j).getGoodsId())
+                                .orderByAsc(SysGoodsSpecs::getOrderNum);
+                        List<SysGoodsSpecs> specs = sysGoodsSpecsService.list(queryWrapperPrice);
+                        goods.get(j).setSpecs(specs);
+                    }
+                }
+            }
+        }
+        return ResultUtils.success("查询成功",list);
+    }
+}

order-app/project.config.json

@@ -12,7 +12,16 @@
       "outputPath": ""
     },
     "useCompilerPlugins": false,
-    "minifyWXML": true
+    "minifyWXML": true,
+    "compileWorklet": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
   },
   "compileType": "miniprogram",
   "simulatorPluginLibVersion": {},
@@ -21,5 +30,6 @@
     "include": []
   },
   "appid": "wx6a41b250d82adc97",
-  "editorSetting": {}
+  "editorSetting": {},
+  "libVersion": "3.9.1"
 }

order-app/project.private.config.json

@@ -9,6 +9,14 @@
     "preloadBackgroundData": false,
     "autoAudits": false,
     "showShadowRootInWxmlPanel": true,
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
   }
 }

order-app/src/api/category.js

@@ -0,0 +1,5 @@
+import http from '../common/http.js'
+//分类数据
+export const getCategoryListApi = () => {
+	return http.get("/wxapi/category/getCategoryList")
+}

order-app/src/api/home.js

@@ -3,7 +3,6 @@ import http from '../common/http.js'
 export const getSwipperListApi = ()=>{
 	return http.get("/api/home/getSwipperList")
 }
-
 //首页热推
 export const getHotListApi = ()=>{
 	return http.get("/api/home/getHotList")

order-app/src/api/order.js

@@ -0,0 +1,4 @@
+import http from '../common/http.js'
+export const splaceOrderApi = (parm) => {
+	return http.post("/wxapi/order/splaceOrder", parm)
+}

order-app/src/api/user.js

@@ -0,0 +1,64 @@
+import http from '../common/http.js'
+//获取code
+export const getCode = () => {
+	const promise = new Promise((resolve, reject) => {
+		uni.login({
+			provider: 'weixin', //使用微信登录
+			success: function(loginRes) {
+				console.log('8888888888')
+				console.log(loginRes.code);
+				//如果返回数据
+				if (loginRes && loginRes.code) {
+					//数据返回
+					resolve(loginRes.code)
+				} else {
+					reject(loginRes)
+				}
+			}
+		})
+	}).catch(res => {
+		uni.showToast({
+			icon: 'none',
+			title: res.errMsg || '获取code失败!'
+		})
+	})
+	return promise;
+}
+//小程序登录
+export const wxLoginApi = (code) => {
+	return http.post('/wxapi/user/wxLogin', {
+		code: code
+	})
+}
+//封装登录
+export const userLogin = async () => {
+	//获取code
+	let res = await getCode()
+	//登录: 调用我们自己的后端接口
+	const {
+		data
+	} = await wxLoginApi(res)
+	console.log('登录')
+	console.log(data)
+	if (data) {
+		//存储
+		uni.setStorageSync('openid', data.openid)
+		uni.setStorageSync('sessionkey', data.sessionKey)
+	}
+}
+//新增地址
+export const addAddressApi = (parm) => {
+	return http.post("/wxapi/address", parm)
+}
+//地址列表
+export const addressListApi = (parm) => {
+	return http.get("/wxapi/address/list", parm)
+}
+//编辑地址
+export const editAddressApi = (parm) => {
+	return http.put("/wxapi/address", parm)
+}
+//默认地址查询
+export const getAddressApi = (parm) => {
+	return http.get("/wxapi/address/getAddress", parm)
+}

order-app/src/common/http.js

@@ -1,4 +1,5 @@
-const baseUrl = 'http://localhost:8089'
+ const baseUrl = 'http://localhost:8089'
+//const baseUrl = 'http://192.168.31.70:8089'  
 const http = (options = {}) => {
     return new Promise((resolve, reject) => {
         uni.request({

order-app/src/pages.json

@@ -1,5 +1,11 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		/* 		{
+					"path": "pages/address/address",
+					"style": {
+						"navigationBarTitleText": ""
+					}
+				}, */
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -11,31 +17,53 @@
 				"navigationBarTitleText": "分类",
 				"enablePullDownRefresh": false
 			}
-
 		}, {
 			"path": "pages/car/car",
 			"style": {
 				"navigationBarTitleText": "购物车",
 				"enablePullDownRefresh": false
 			}
-
 		}, {
 			"path": "pages/mine/mine",
 			"style": {
 				"navigationBarTitleText": "我的",
 				"enablePullDownRefresh": false
 			}
-
-		},
-		{
+		}, {
 			"path": "pages/detail/detail",
 			"style": {
 				"navigationBarTitleText": ""
 			}
-		},{
+		}, {
 			"path": "pages/address/address",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "新增地址"
+			}
+		},
+		// {
+		// 	"path": "common/common",
+		// 	"style": {
+		// 		"navigationBarTitleText": ""
+		// 	}
+		// },
+		{
+			"path": "pages/confirm/confirm",
+			"style": {
+				"navigationBarTitleText": "确认订单"
+			}
+		},
+		{
+			"path" : "pages/addresslist/addresslist",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/order/order",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
 			}
 		}
 	],

order-app/src/pages/address/address.vue

@@ -2,23 +2,22 @@
 	<view class="wrap">
 		<view class="top">
 			<view class="item">
-				<view class="left">收货人:</view>
-				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
+				<view class="left">收货人</view>
+				<input type="text" v-model="address.userName" placeholder-class="line" placeholder="请填写收货人姓名" />
 			</view>
 			<view class="item">
-				<view class="left">手机号码:</view>
-				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
+				<view class="left">手机号码</view>
+				<input type="text" v-model="address.phone" placeholder-class="line" placeholder="请填写收货人手机号" />
 			</view>
 			<view class="item" @confirm='confirm' @tap="showRegionPicker">
 				<view class="left">所在地区:</view>
-				<input disabled style="width: 100%;" v-model="finalAddress" type="text" :placeholder-class="line"
+				<input disabled style="width: 100%;" v-model="address.area" type="text" :placeholder-class="line"
 					placeholder="省市区县、乡镇等" />
 			</view>
 			<view class="item address">
-				<view class="left">详细地址:</view>
-				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" />
+				<view class="left">详细地址</view>
+				<textarea type="text" v-model="address.address" placeholder-class="line" placeholder="街道、楼牌等" />
 			</view>
-
 		</view>
 		<view class="bottom">
 			<view class="default">
@@ -27,12 +26,12 @@
 					<view class="tips">提醒：每次下单会默认推荐该地址</view>
 				</view>
 				<view class="right">
-					<switch color="red" @change="setDefault" />
+					<switch :checked="address.status == '1'" color="red" @change="setDefault" />
 				</view>
 			</view>
 		</view>
 		<u-picker v-model="show" mode="region" ref="uPicker" @confirm="confirm"></u-picker>
-		<u-button :custom-style="customStyle" type="warning">提交</u-button>
+		<u-button @click="addBtn" :custom-style="customStyle" type="warning">提交</u-button>
 	</view>
 </template>
 
@@ -41,26 +40,101 @@
 		reactive,
 		ref
 	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		addAddressApi,
+		editAddressApi
+	} from '../../api/user.js'
+	const show = ref(false)
+	const finalAddress = ref('')
 	const customStyle = reactive({
 		margin: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
 	})
-	const finalAddress = ref('')
-	const show = ref(false)
-
-	const setDefault = () => {}
-
+	const setDefault = (dom) => {
+		console.log(dom)
+		//设置默认地址
+		dom.detail.value ? address.status = '1' : address.status = '0'
+	}
 	const showRegionPicker = () => {
-		show.value = true;
+		show.value = true
 	}
-
 	const confirm = (e) => {
 		console.log(e)
-		finalAddress.value = e.province.name + '/' + e.city.name + '/' + e.area.name
-		console.log(finalAddress.value)
+		address.area = e.province.name + '/' + e.city.name + '/' + e.area.name
+		console.log(address.area)
 	}
-	const changeAddress = () => {
-
+	//表单绑定的数据
+	const address = reactive({
+		addressId: '',
+		openid: uni.getStorageSync('openid'),
+		userName: "",
+		phone: '',
+		area: '',
+		address: '',
+		status: '0'
+	})
+	//提交
+	const addBtn = async () => {
+		console.log(address)
+		//表单验证
+		if (!address.userName) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写姓名'
+			})
+			return;
+		}
+		if (!address.phone) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写电话'
+			})
+			return;
+		}
+		if (!address.area) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写区域'
+			})
+			return;
+		}
+		if (!address.address) {
+			uni.showToast({
+				icon: 'none',
+				title: '请填写详细地址'
+			})
+			return;
+		}
+		let res = null;
+		if (type.value == '0') {
+			res = await addAddressApi(address)
+		} else {
+			res = await editAddressApi(address)
+		}
+		console.log(res)
+		if (res && res.code == 200) {
+			//返回列表
+			uni.navigateBack()
+		}
 	}
+	//区分是新增 还是编辑
+	const type = ref('0')
+	onLoad((options) => {
+		console.log(options)
+		//编辑设置值
+		if (options.item) {
+			type.value = '1';
+			const item = JSON.parse(options.item)
+			address.addressId = item.addressId
+			address.phone = item.phone
+			address.userName = item.userName
+			address.area = item.area
+			address.address = item.address
+			address.status = item.status
+		}
+	})
 </script>
 
 <style lang="scss" scoped>

order-app/src/pages/addresslist/addresslist.vue

@@ -0,0 +1,161 @@
+<template>
+	<view>
+		<radio-group @change="radioChange">
+			<view class="item" v-for="(res, index) in siteList.list" :key="res.id">
+				<radio :value="JSON.stringify(res)" :checked="res.addressId == store.checkedId" />
+				<view style="flex-grow: 1;">
+					<view class="top">
+						<view class="name">{{ res.userName }}</view>
+						<view class="phone">{{ res.phone }}</view>
+						<view class="tag">
+							<text v-if="res.status == '1'" style="background-color: #F3AF28;">默认</text>
+						</view>
+					</view>
+					<view class="bottom">
+						{{res.area}},{{res.address}}
+						<u-icon @click="update(res)" name="edit-pen" :size="40" color="#999999"></u-icon>
+					</view>
+				</view>
+			</view>
+		</radio-group>
+		<view class="addSite" @tap="toAddSite">
+			<view class="add">
+				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		reactive,
+		ref
+	} from 'vue'
+	import {
+		addressStore
+	} from '../../store/address.js'
+	import {
+		addressListApi
+	} from '../../api/user.js'
+	const store = addressStore()
+	//地址数据
+	const siteList = reactive({
+		list: []
+	})
+	//查询地址数据
+	const getList = async () => {
+		let res = await addressListApi({
+			openid: uni.getStorageSync('openid')
+		})
+		console.log(res)
+		if (res && res.code == 200) {
+			siteList.list = res.data
+		}
+	}
+	//跳转新增地址
+	const toAddSite = () => {
+		uni.navigateTo({
+			url: '../address/address'
+		});
+	}
+	//修改
+	const update = (item) => {
+		console.log(item)
+		uni.navigateTo({
+			url: '../address/address?item=' + JSON.stringify(item)
+		});
+	}
+	//单选点击事件
+	const radioChange = (e) => {
+		console.log(e)
+		if (e.detail.value) {
+			let item = JSON.parse(e.detail.value)
+			store.checkedId = item.addressId
+			store.userName = item.userName
+			store.phone = item.phone
+			store.area = item.area
+			store.address = item.address
+			//关闭页面
+			uni.navigateBack()
+		}
+	}
+	onShow(() => {
+		getList()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.item {
+		padding: 40rpx 20rpx;
+		display: flex;
+		align-items: center;
+
+		.top {
+			display: flex;
+			font-weight: bold;
+			font-size: 34rpx;
+
+			.phone {
+				margin-left: 60rpx;
+			}
+
+			.tag {
+				display: flex;
+				font-weight: normal;
+				align-items: center;
+
+				text {
+					display: block;
+					width: 60rpx;
+					height: 34rpx;
+					line-height: 34rpx;
+					color: #ffffff;
+					font-size: 20rpx;
+					border-radius: 6rpx;
+					text-align: center;
+					margin-left: 30rpx;
+					background-color: rgb(49, 145, 253);
+				}
+
+				.red {
+					background-color: red
+				}
+			}
+		}
+
+		.bottom {
+			display: flex;
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			justify-content: space-between;
+			color: #999999;
+		}
+	}
+
+	.addSite {
+		display: flex;
+		justify-content: space-around;
+		width: 600rpx;
+		line-height: 100rpx;
+		position: absolute;
+		bottom: 30rpx;
+		left: 80rpx;
+		background-color: #F3AF28;
+		border-radius: 60rpx;
+		font-size: 30rpx;
+
+		.add {
+			display: flex;
+			align-items: center;
+			color: #ffffff;
+
+			.icon {
+				margin-right: 10rpx;
+			}
+		}
+	}
+</style>

order-app/src/pages/car/car.vue

@@ -35,7 +35,7 @@
 				总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text>
 			</view>
 		</view>
-		<view class="end-right">
+		<view class="end-right" @click="confirm">
 			结算({{totalNum}})
 		</view>
 	</view>
@@ -57,9 +57,9 @@
 	const checked = ref(true);
 	//获取购物车数据
 	const goods = computed(() => {
-		if(store.carList.length == 0){
+		if (store.carList.length == 0) {
 			allchecked.value = false;
-		}else{
+		} else {
 			allchecked.value = true;
 		}
 		return store.carList
@@ -101,18 +101,19 @@
 	}
 
 	const reduce = (item) => {
+		console.log(item)
 		let num = item.num
 		if (num > 1) {
 			num -= 1
 		} else if (num = 1) {
-			store.carList.map((dom, i) => {
+			goods.map((dom, i) => {
 				if (dom.goodsID == item.goodsID) {
-					store.carList.splice(i, 1)
+					goods.splice(i, 1)
 				}
 			})
 		}
 		item.num = num;
-		if (store.carList.length == 0) {
+		if (goods.length == 0) {
 			allchecked.value = false;
 		}
 	}
@@ -129,7 +130,7 @@
 		})
 		return totalNum
 	})
-
+	//总共价格
 	const totalPrice = computed(() => {
 		let totalPrice = 0;
 		store.carList.map(item => {
@@ -137,6 +138,12 @@
 		})
 		return totalPrice
 	})
+	//跳转确认订单
+	const confirm = (item) => {
+		uni.navigateTo({
+			url: '../confirm/confirm'
+		});
+	}
 </script>
 
 <style lang="scss">
@@ -212,7 +219,7 @@
 		.end-right {
 			width: 30%;
 			line-height: 90rpx;
-			background-color: #F44545;
+			background-color: #F3AF28;
 			text-align: center;
 			color: #fff;
 		}

order-app/src/pages/category/category.vue

@@ -5,7 +5,8 @@
 				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
 					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
 					@tap.stop="swichMenu(index)">
-					<text class="u-line-1">{{item.name}}</text>
+
+					<text class="u-line-1">{{item.categoryName}}</text>
 				</view>
 			</scroll-view>
 			<block v-for="(item,index) in tabbar" :key="index">
@@ -16,9 +17,10 @@
 								<text>{{item.name}}</text>
 							</view> -->
 							<view class="item-container">
-								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
-									<image class="item-menu-image" :src="item1.icon" mode=""></image>
-									<view class="item-menu-name">{{item1.name}}</view>
+								<view class="thumb-box" v-for="(item1, index1) in item.goods" :key="index1">
+									<image @click="toDetails(item1)" class="item-menu-image"
+										:src="item1.goodsImage.split(',')[0]" mode=""></image>
+									<view class="item-menu-name">{{item1.goodsName}}</view>
 								</view>
 							</view>
 						</view>
@@ -30,84 +32,76 @@
 </template>
 
 <script setup>
+	import {
+		getCategoryListApi
+	} from "../../api/category";
 	import {
 		ref,
 		getCurrentInstance
 	} from "vue"
 	// 获取组件实例
 	const instance = getCurrentInstance();
-	const tabbar = ref([{
-		"name": "早点",
-		"foods": [{
-				"name": "豆浆",
-				"key": "豆浆",
-				"icon": "/static/test-5.png",
-				"cat": 6
-			},
-			{
-				"name": "油条",
-				"key": "糕点饼干",
-				"icon": "/static/test-8.png",
-				"cat": 6
-			},
-			{
-				"name": "油条",
-				"key": "糕点饼干",
-				"icon": "/static/test-8.png",
-				"cat": 6
-			}
-		]
-	},
-	{
-		"name": "米线",
-		"foods": [{
-				"name": "小锅米线",
-				"key": "豆浆",
-				"icon": "/static/test-5.png",
-				"cat": 6
-			},
-			{
-				"name": "豆花米线",
-				"key": "糕点饼干",
-				"icon": "/static/test-5.png",
-				"cat": 6
-			}
-		]
-	}
-	])
+
+	const tabbar = ref([])
 	const scrollTop = ref(0)
 	const current = ref(0)
 	const menuHeight = ref(0)
-	const menuItemHeight = ref(0)
-	const getImg = ()=>{
+	const menuItemHeight = ref(0)	const getImg = ()=>{
+	const getImg = () => {
 		return Math.floor(Math.random() * 35)
 	}
-	const swichMenu = async(index)=>{
-		if(index == current.value) return ;
+
+	const swichMenu = async (index) => {
+		if (index == current.value) return;
 		current.value = index;
 		// 如果为0，意味着尚未初始化
-		if(menuHeight.value == 0 || menuItemHeight.value == 0) {
+
+		if (menuHeight.value == 0 || menuItemHeight.value == 0) {
 			await getElRect('menu-scroll-view', 'menuHeight');
 			await getElRect('u-tab-item', 'menuItemHeight');
 		}
 		// 将菜单菜单活动item垂直居中
 		scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
 	}
-	const getElRect = (elClass, dataVal)=>{
+{
+	const getElRect = (elClass, dataVal) => {
 		new Promise((resolve, reject) => {
 			const query = uni.createSelectorQuery().in(instance);
-			query.select('.' + elClass).fields({size: true},res => {
+
+			query.select('.' + elClass).fields({
+				size: true
+			}, res => {
 				// 如果节点尚未生成，res值为null，循环调用执行
-				if(!res) {
+
+				if (!res) {
 					setTimeout(() => {
 						getElRect(elClass);
 					}, 10);
-					return ;
+
+					return;
 				}
 				instance[dataVal] = res.height;
 			}).exec();
 		})
 	}
+	//获取分类数据
+	const getCategoryList = async () => {
+		let res = await getCategoryListApi()
+		if (res && res.code == 200) {
+			tabbar.value = res.data;
+		}
+	}
+	//跳转详情
+	const toDetails = (item) => {
+		console.log(item)
+		//在起始页面跳转到details.vue页面并传递参数
+		uni.navigateTo({
+			url: '../detail/detail?goods=' + JSON.stringify(item)
+		});
+	}
+	onLoad(() => {
+		getCategoryList()
+	})
 </script>
 
 
@@ -229,5 +223,5 @@
 		width: 120rpx;
 		height: 120rpx;
 	}
-</style>
 
+</style>

order-app/src/pages/confirm/confirm.vue

@@ -0,0 +1,276 @@
+<template>
+	<view class="address" @click="toAddress">
+		<view>
+			<view class="info">
+				<view class="name">
+					{{astore.userName}}
+				</view>
+				<view class="phone">
+					{{astore.phone}}
+				</view>
+			</view>
+			<view>
+				{{astore.area}}{{astore.address}}
+			</view>
+		</view>
+		<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
+	</view>
+	<view style="padding-bottom: 60px;margin-top: 10px;" v-if="goods.length > 0">
+		<view class="goods-detail" v-for="(item,index) in goods" :key="index">
+			<view class="detail-left">
+				<view class="goods-left">
+					<image style="width: 150rpx; height: 140rpx; margin-left:10px;" :src="item.goodsImage"></image>
+				</view>
+				<view class="size">
+					<text style="font-size: 25rpx;">名称：{{item.goodsName}}</text>
+					<text style="font-size: 25rpx;">规格：{{item.specsName}}</text>
+					<text class="goods-price">￥{{item.price}}{{item.goodsUnit}}</text>
+				</view>
+			</view>
+			<view class="detail-right">
+				<text class="num">x{{item.num}}</text>
+			</view>
+		</view>
+	</view>
+	<view class="end">
+		<view class="end-left">
+			<view>
+				总计：<text style="color: #F3AF28;font-weight: bold;">￥{{totalPrice}}</text>
+			</view>
+		</view>
+		<view @click="commitBtn" class="end-right">
+			提交订单({{totalNum}})
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		computed
+	} from 'vue'
+	import {
+		orderStore
+	} from '../../store/order.js'
+	import {
+		addressStore
+	} from '../../store/address.js'
+	import {
+		getAddressApi
+	} from '../../api/user.js'
+	import {
+		splaceOrderApi
+	} from '../../api/order.js'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	//获取store
+	const store = orderStore()
+	const astore = addressStore()
+	const goods = computed(() => {
+		return store.orderList
+	})
+	// const goods = reactive([{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		specsName: '中',
+	// 		num: 1,
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		goodsUnit: '/份',
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	}
+	// ])
+
+	//总数
+	const totalNum = computed(() => {
+		let totalNum = 0;
+		store.orderList.map(item => {
+			item.flag ? totalNum += item.num : totalNum += 0;
+		})
+		return totalNum
+	})
+	//总共价格
+	const totalPrice = computed(() => {
+		let totalPrice = 0;
+		store.orderList.map(item => {
+			item.flag ? totalPrice += item.num * item.price : totalPrice += 0;
+		})
+		return totalPrice
+	})
+	//跳转新增地址
+	const toAddress = (item) => {
+		uni.navigateTo({
+			url: '../addresslist/addresslist'
+		});
+	}
+	//查询默认地址
+	const getAddress = async () => {
+		let res = await getAddressApi({
+			openid: uni.getStorageSync('openid')
+		})
+		console.log(res)
+		if (res && res.code == 200) {
+			astore.checkedId = res.data.addressId
+			astore.userName = res.data.userName
+			astore.phone = res.data.phone
+			astore.area = res.data.area
+			astore.address = res.data.address
+		}
+	}
+	//提交订单
+	const commitBtn = async () => {
+		let commitParm = reactive({
+			openid: uni.getStorageSync('openid'),
+			userName: astore.userName,
+			phone: astore.phone,
+			address: astore.area + "," + astore.address,
+			price: totalPrice.value,
+			details: store.orderList
+		})
+		const res = await splaceOrderApi(commitParm)
+		console.log(res)
+		if (res && res.code == 200) {
+			//清空购物车
+			store.orderList = []
+			uni.navigateBack()
+		}
+	}
+	onLoad(() => {
+		getAddress()
+	})
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f4f4f4;
+	}
+
+	.address {
+		display: flex;
+		justify-content: space-between;
+		background-color: #FFF;
+		padding: 10px 20px;
+
+		.info {
+			display: flex;
+
+			.name {
+				font-size: 15px;
+				font-weight: 600;
+			}
+
+			.phone {
+				margin-left: 10px;
+			}
+		}
+	}
+
+	.goods-detail {
+		display: flex;
+		padding: 30rpx 15rpx 30rpx 30rpx;
+		background-color: #FFF;
+		justify-content: space-between;
+		border-bottom: 5rpx solid #f1f1f1;
+		align-items: center;
+
+		.detail-left {
+			display: flex;
+
+			.goods-left {
+				display: flex;
+				align-items: center;
+			}
+
+			.size {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				margin-left: 30rpx;
+
+				.goods-price {
+					font-size: 25rpx;
+					color: #F44545;
+				}
+			}
+		}
+
+		.detail-right {
+			text {
+				width: 50rpx;
+				line-height: 50rpx;
+				text-align: center;
+				display: inline-block;
+				background-color: #F7F7F7;
+				margin-right: 10rpx;
+			}
+
+			.add {
+				color: #FA4305;
+				border-radius: 10rpx 30rpx 30rpx 10rpx;
+				margin-right: 20rpx;
+			}
+
+			.subtract {
+				border-radius: 30rpx 10rpx 10rpx 30rpx;
+			}
+		}
+	}
+
+	.end {
+		width: 100%;
+		height: 90rpx;
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+
+		.end-left {
+			width: 70%;
+			display: flex;
+			justify-content: space-between;
+			padding: 0 30rpx;
+		}
+
+		.end-right {
+			width: 30%;
+			line-height: 90rpx;
+			background-color: #F3AF28;
+			text-align: center;
+			color: #fff;
+		}
+	}
+</style>

order-app/src/pages/detail/detail.vue

@@ -1,8 +1,7 @@
 <template>
-	<view>
-		<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
-			:list="swipperList"></u-swiper>
-	</view>
+	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
+		:list="swipperList">
+	</u-swiper>
 	<view class="info">
 		<view class="title">
 			{{title}}
@@ -32,22 +31,7 @@
 		<swiper-item class="swiper-item">
 			<scroll-view scroll-y style="height: 100%;width: 100%;">
 				<view class="page-box">
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
-					我是内容一
+					<u-parse :html="content"></u-parse>
 				</view>
 			</scroll-view>
 		</swiper-item>
@@ -79,40 +63,49 @@
 	</swiper>
 	<view class="navigation">
 		<view class="left">
-			<view class="item">
+			<view class="item" @click="toHome">
 				<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
 				<view class="text u-line-1">首页</view>
 			</view>
-			<view class="item car">
+			<view class="item car" @click="toCar">
 				<u-badge class="car-num" :count="carCount" type="error" :offset="[-3, -6]"></u-badge>
 				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
 				<view class="text u-line-1">购物车</view>
 			</view>
 		</view>
 		<view class="right">
-			<view class="cart btn u-line-1">加入购物车</view>
-			<view class="buy btn u-line-1">立即购买</view>
+			<view class="cart btn u-line-1" @click="addCar">加入购物车</view>
+			<view @click="addBuy" class="buy btn u-line-1">立即购买</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
+	import {
+		computed,
+		ref
+	} from 'vue';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
-	import {
-		ref,
-		computed
-	} from 'vue';
 	import {
 		carStore
-	} from '../../store/car';
+	} from '../../store/car.js'
+	import {
+		orderStore
+	} from '../../store/order.js'
+	import {
+		userLogin
+	} from '../../api/user.js'
 	//获取store
 	const store = carStore()
-	//购物车数量动态变化
-	const carCount = computed(()=>{
+	const ostore = orderStore()
+	//购物车数量
+	const carCount = computed(() => {
 		return store.carList.length
 	})
+	//菜品详情
+	const content = ref('')
 	const current = ref(0)
 	//轮播图高度
 	const height = ref('400')
@@ -142,13 +135,12 @@
 		price.value = item.goodsPrice
 		carData.value.price = item.goodsPrice
 		carData.value.specsName = item.specsName
-		console.log(carData)
 	}
 	//详情tab
 	const swiperCurrent = ref(0)
 	const dx = ref(0)
 	const tabIndex = ref(0)
-	//购物车数据
+	//购物车的数据类型
 	const carData = ref({
 		flag: true,
 		goodsName: "",
@@ -168,6 +160,15 @@
 	const addCar = () => {
 		store.addCar(carData.value)
 	}
+	//立即购买
+	const addBuy = () => {
+		//清空
+		ostore.orderList = []
+		ostore.addOrder(carData.value)
+		uni.navigateTo({
+			url: '../confirm/confirm'
+		});
+	}
 	const animationfinish = ({
 		detail: {
 			current
@@ -177,7 +178,20 @@
 		swiperCurrent.value = current;
 		tabIndex.value = current;
 	}
+	//跳转首页
+	const toHome = () => {
+		uni.switchTab({
+			url: '../index/index'
+		});
+	}
+	//跳转购物车
+	const toCar = () => {
+		uni.switchTab({
+			url: '../car/car'
+		});
+	}
 	onLoad((options) => {
+		userLogin()
 		const goods = JSON.parse(options.goods)
 		swipperList.value = goods.goodsImage.split(',')
 		console.log(goods)
@@ -196,7 +210,7 @@
 	})
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		display: flex;
 		flex-direction: column;

order-app/src/pages/index/index.vue

@@ -1,4 +1,5 @@
 <template>
+
 	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
 		:list="swiperList">
 	</u-swiper>
@@ -8,12 +9,15 @@
 			<template v-slot:left="{leftList}">
 				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
 					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
+
 					<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
 					<view class="demo-title">
+
 						{{item.goodsName}}
 					</view>
 					<view class="price-item">
 						<view class="demo-price">
+
 							{{item.specs[0].goodsPrice}}元
 						</view>
 						<view class="demo-title">
@@ -25,12 +29,15 @@
 			</template>
 			<template v-slot:right="{rightList}">
 				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
+
 					<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
 					<view class="demo-title">
+
 						{{item.goodsName}}
 					</view>
 					<view class="price-item">
 						<view class="demo-price">
+
 							{{item.specs[0].goodsPrice}}元
 						</view>
 						<view class="demo-title">
@@ -66,11 +73,11 @@
 	const interval = ref(2000)
 	//滑动动画时长
 	const duration = ref(500)
+
 	//定义轮播图的数据,创建一个空数组
 	const swiperList = ref([])
 	//列表数据,默认空数组
-	const flowList = ref([])
-	//跳转详情
+	const flowList = ref([])	//跳转详情
 	const toDetails = (item) => {
 		//在起始页面跳转到details.vue页面并传递参数
 		uni.navigateTo({

order-app/src/pages/mine/mine.vue

@@ -1,22 +1,94 @@
 <template>
 	<view>
-		我的
+		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
+			<view class="userinfo u-flex-1" @click="getUserInfo">
+				<view class="img-container">
+					<image class="uimage" :src='avatarUrl'></image>
+				</view>
+				<!-- 分割线 -->
+				<u-divider>{{nickName}}</u-divider>
+			</view>
+		</view>
+
+		<view class="u-m-t-20">
+			<u-cell-group>
+				<u-cell-item icon="star" title="我的收藏"></u-cell-item>
+				<u-cell-item icon="photo" title="我的订单"></u-cell-item>
+				<u-cell-item icon="coupon" title="我的地址"></u-cell-item>
+			</u-cell-group>
+		</view>
+
+
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
+<script setup>
+	import {
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		ref
+	} from 'vue'
+	//昵称
+	const nickName = ref('大幕孤烟直')
+	//头像
+	const avatarUrl = ref('/static/user.jpg')
+	//获取头像点击事件
+	const getUserInfo = () => {
+		console.log('获取头像')
+		if (uni.getStorageSync('avatarUrl') && uni.getStorageSync('nickName')) {
+			nickName.value = uni.getStorageSync('nickName')
+			avatarUrl.value = uni.getStorageSync('avatarUrl')
+		} else {
+			uni.getUserProfile({
+				desc: '用于头像昵称展示', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+				success: (res) => {
+					console.log(res)
+					nickName.value = res.userInfo.nickName
+					avatarUrl.value = res.userInfo.avatarUrl
+					uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
+					uni.setStorageSync('nickName', res.userInfo.nickName);
+				}
+			})
 		}
 	}
+	onShow(() => {
+		getUserInfo()
+	})
 </script>
 
-<style>
+<style lang="scss">
+	page {
+		background-color: #ededed;
+	}
+
+	.userinfo {
+		margin: 30rpx 0rpx;
+	}
+
+	.img-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 
-</style>
+	.uimage {
+		height: 50px;
+		width: 50px;
+		border-radius: 50%;
+		margin: 5px 0px;
+	}
+
+	.camera {
+		width: 54px;
+		height: 44px;
+
+		&:active {
+			background-color: #ededed;
+		}
+	}
+
+	.user-box {
+		background-color: #fff;
+	}
+</style>

order-app/src/pages/order/order.vue

@@ -0,0 +1,551 @@
+<template>
+	<view>
+		<view class="wrap">
+			<view class="u-tabs-box">
+				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="currents" @change="change"
+					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
+			</view>
+			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
+				@animationfinish="animationfinish">
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+						<view class="page-box">
+							<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">
+								<view class="top">
+									<view class="left">
+										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
+										<view class="store">{{ res.store }}</view>
+										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+									</view>
+									<view class="right">{{ res.deal }}</view>
+								</view>
+								<view class="item" v-for="(item, index) in res.goodsList" :key="index">
+									<view class="left">
+										<image :src="item.goodsUrl" mode="aspectFill"></image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{ item.title }}</view>
+										<view class="type">{{ item.type }}</view>
+										<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
+									</view>
+									<view class="right">
+										<view class="price">
+											￥{{ priceInt(item.price) }}
+											<text class="decimal">.{{ priceDecimal(item.price) }}</text>
+										</view>
+										<view class="number">x{{ item.number }}</view>
+									</view>
+								</view>
+								<view class="total">
+									共{{ totalNum(res.goodsList) }}件商品 合计:
+									<text class="total-price">
+										￥{{ priceInt(totalPrice(res.goodsList)) }}.
+										<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
+									</text>
+								</view>
+								<view class="bottom">
+									<view class="more">
+										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
+									</view>
+									<view class="logistics btn">查看物流</view>
+									<view class="exchange btn">卖了换钱</view>
+									<view class="evaluate btn">评价</view>
+								</view>
+							</view>
+							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
+						</view>
+					</scroll-view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+						<view class="page-box">
+							<view class="order" v-for="(res, index) in  orderList[1]" :key="res.id">
+								<view class="top">
+									<view class="left">
+										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
+										<view class="store">{{ res.store }}</view>
+										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+									</view>
+									<view class="right">{{ res.deal }}</view>
+								</view>
+								<view class="item" v-for="(item, index) in res.goodsList" :key="index">
+									<view class="left">
+										<image :src="item.goodsUrl" mode="aspectFill"></image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{ item.title }}</view>
+										<view class="type">{{ item.type }}</view>
+										<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
+									</view>
+									<view class="right">
+										<view class="price">
+											￥{{ priceInt(item.price) }}
+											<text class="decimal">.{{ priceDecimal(item.price) }}</text>
+										</view>
+										<view class="number">x{{ item.number }}</view>
+									</view>
+								</view>
+								<view class="total">
+									共{{ totalNum(res.goodsList) }}件商品 合计:
+									<text class="total-price">
+										￥{{ priceInt(totalPrice(res.goodsList)) }}.
+										<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
+									</text>
+								</view>
+								<view class="bottom">
+									<view class="more">
+										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
+									</view>
+									<view class="logistics btn">查看物流</view>
+									<view class="exchange btn">卖了换钱</view>
+									<view class="evaluate btn">评价</view>
+								</view>
+							</view>
+							<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
+						</view>
+					</scroll-view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;">
+						<view class="page-box">
+							<view>
+								<view class="centre">
+									<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="">
+									</image>
+									<view class="explain">
+										您还没有相关的订单
+										<view class="tips">可以去看看有那些想买的</view>
+									</view>
+									<view class="btn">随便逛逛</view>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+						<view class="page-box">
+							<view class="order" v-for="(res, index) in  orderList[3]" :key="res.id">
+								<view class="top">
+									<view class="left">
+										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
+										<view class="store">{{ res.store }}</view>
+										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+									</view>
+									<view class="right">{{ res.deal }}</view>
+								</view>
+								<view class="item" v-for="(item, index) in res.goodsList" :key="index">
+									<view class="left">
+										<image :src="item.goodsUrl" mode="aspectFill"></image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{ item.title }}</view>
+										<view class="type">{{ item.type }}</view>
+										<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
+									</view>
+									<view class="right">
+										<view class="price">
+											￥{{ priceInt(item.price) }}
+											<text class="decimal">.{{ priceDecimal(item.price) }}</text>
+										</view>
+										<view class="number">x{{ item.number }}</view>
+									</view>
+								</view>
+								<view class="total">
+									共{{ totalNum(res.goodsList) }}件商品 合计:
+									<text class="total-price">
+										￥{{ priceInt(totalPrice(res.goodsList)) }}.
+										<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
+									</text>
+								</view>
+								<view class="bottom">
+									<view class="more">
+										<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
+									</view>
+									<view class="logistics btn">查看物流</view>
+									<view class="exchange btn">卖了换钱</view>
+									<view class="evaluate btn">评价</view>
+								</view>
+							</view>
+							<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onReady
+	} from '@dcloudio/uni-app';
+	import {
+		ref,
+		computed
+	} from 'vue'
+	const tabs = ref(null);
+	const orderList = ref([
+		[],
+		[],
+		[],
+		[]
+	])
+	const dataList = ref([{
+			id: 1,
+			store: '夏日流星限定贩卖',
+			deal: '交易成功',
+			goodsList: [{
+					goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
+					title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
+					type: '灰色;M',
+					deliveryTime: '付款后30天内发货',
+					price: '348.58',
+					number: 2
+				},
+				{
+					goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
+					title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
+					type: '45cm;S',
+					deliveryTime: '付款后30天内发货',
+					price: '135.00',
+					number: 1
+				}
+			]
+		},
+		{
+			id: 2,
+			store: '江南皮革厂',
+			deal: '交易失败',
+			goodsList: [{
+				goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
+				title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
+				type: '粉色;M',
+				deliveryTime: '付款后7天内发货',
+				price: '128.05',
+				number: 1
+			}]
+		},
+		{
+			id: 3,
+			store: '三星旗舰店',
+			deal: '交易失败',
+			goodsList: [{
+					goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
+					title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
+					type: '4K，广色域',
+					deliveryTime: '保质5年',
+					price: '1998',
+					number: 3
+				},
+				{
+					goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
+					title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
+					type: '容量大，速冻',
+					deliveryTime: '保质5年',
+					price: '2354',
+					number: 1
+				}
+			]
+		},
+		{
+			id: 4,
+			store: '三星旗舰店',
+			deal: '交易失败',
+			goodsList: [{
+					goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
+					title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
+					type: '4K，广色域',
+					deliveryTime: '珍藏10年好酒',
+					price: '1543',
+					number: 3
+				},
+				{
+					goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
+					title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
+					type: '一打',
+					deliveryTime: '口感好',
+					price: '120',
+					number: 1
+				}
+			]
+		},
+		{
+			id: 5,
+			store: '三星旗舰店',
+			deal: '交易成功',
+			goodsList: [{
+				goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
+				title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
+				type: '识别效率高',
+				deliveryTime: '使用方便',
+				price: '451',
+				number: 9
+			}]
+		}
+	])
+	const list = ref([{
+			name: '待付款'
+		},
+		{
+			name: '待发货'
+		},
+		{
+			name: '待收货'
+		},
+		{
+			name: '待评价',
+			count: 12
+		}
+	])
+	const currents = ref(0)
+	const swiperCurrent = ref(0)
+	const tabsHeight = ref(0)
+	const dx = ref(0)
+	const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore'])
+
+	const getOrderList = (idx) => {
+		for (let i = 0; i < 5; i++) {
+			let index = Math.round(Math.random() * (dataList.value.length - 1));
+			// let index = Math.random(0, dataList.value.length - 1);
+			// console.log('666')
+			// console.log(index)
+			let data = JSON.parse(JSON.stringify(dataList.value[index]));
+			data.id = Math.floor(Math.random() * 100 + 1);
+			// console.log(data)
+			orderList.value[idx].push(data);
+		}
+		loadStatus.value.splice(currents.value, 1, "loadmore")
+	}
+	let priceDecimal = computed(() => {
+		return val => {
+			if (val !== parseInt(val)) return val.slice(-2);
+			else return '00';
+		}
+	})
+
+	let priceInt = computed(() => {
+		return val => {
+			if (val !== parseInt(val)) return val.split('.')[0];
+			else return val;
+		}
+	})
+	const totalPrice = (item) => {
+		let price = 0;
+		item.map(val => {
+			price += parseFloat(val.price);
+		});
+		return price.toFixed(2);
+	}
+
+	const totalNum = (item) => {
+		let num = 0;
+		item.map(val => {
+			num += val.number;
+		});
+		return num;
+	}
+	const reachBottom = () => {
+		if (currents.value != 2) {
+			loadStatus.value.splice(currents.value, 1, "loading")
+			setTimeout(() => {
+				getOrderList(currents.value);
+			}, 1200);
+		}
+	}
+	const change = (index) => {
+		swiperCurrent.value = index;
+		getOrderList(index);
+	}
+	const transition = ({
+		detail: {
+			dx
+		}
+	}) => {
+		tabs.value.setDx(dx);
+	}
+	const animationfinish = ({
+		detail: {
+			current
+		}
+	}) => {
+		console.log(current)
+		console.log(currents.value)
+		tabs.value.setFinishCurrent(current);
+		swiperCurrent.value = current;
+		currents.value = current;
+	}
+	onReady(() => {
+		getOrderList(0);
+		getOrderList(1);
+		getOrderList(3);
+	})
+</script>
+
+<style>
+	/* #ifndef H5 */
+	page {
+		height: 100%;
+		background-color: #f2f2f2;
+	}
+
+	/* #endif */
+</style>
+
+<style lang="scss" scoped>
+	.order {
+		width: 710rpx;
+		background-color: #ffffff;
+		margin: 20rpx auto;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		padding: 20rpx;
+		font-size: 28rpx;
+
+		.top {
+			display: flex;
+			justify-content: space-between;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				.store {
+					margin: 0 10rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+
+			.right {
+				color: $u-type-warning-dark;
+			}
+		}
+
+		.item {
+			display: flex;
+			margin: 20rpx 0 0;
+
+			.left {
+				margin-right: 20rpx;
+
+				image {
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.content {
+				.title {
+					font-size: 28rpx;
+					line-height: 50rpx;
+				}
+
+				.type {
+					margin: 10rpx 0;
+					font-size: 24rpx;
+					color: $u-tips-color;
+				}
+
+				.delivery-time {
+					color: #e5d001;
+					font-size: 24rpx;
+				}
+			}
+
+			.right {
+				margin-left: 10rpx;
+				padding-top: 20rpx;
+				text-align: right;
+
+				.decimal {
+					font-size: 24rpx;
+					margin-top: 4rpx;
+				}
+
+				.number {
+					color: $u-tips-color;
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		.total {
+			margin-top: 20rpx;
+			text-align: right;
+			font-size: 24rpx;
+
+			.total-price {
+				font-size: 32rpx;
+			}
+		}
+
+		.bottom {
+			display: flex;
+			margin-top: 40rpx;
+			padding: 0 10rpx;
+			justify-content: space-between;
+			align-items: center;
+
+			.btn {
+				line-height: 52rpx;
+				width: 160rpx;
+				border-radius: 26rpx;
+				border: 2rpx solid $u-border-color;
+				font-size: 26rpx;
+				text-align: center;
+				color: $u-type-info-dark;
+			}
+
+			.evaluate {
+				color: $u-type-warning-dark;
+				border-color: $u-type-warning-dark;
+			}
+		}
+	}
+
+	.centre {
+		text-align: center;
+		margin: 200rpx auto;
+		font-size: 32rpx;
+
+		image {
+			width: 164rpx;
+			height: 164rpx;
+			border-radius: 50%;
+			margin-bottom: 20rpx;
+		}
+
+		.tips {
+			font-size: 24rpx;
+			color: #999999;
+			margin-top: 20rpx;
+		}
+
+		.btn {
+			margin: 80rpx auto;
+			width: 200rpx;
+			border-radius: 32rpx;
+			line-height: 64rpx;
+			color: #ffffff;
+			font-size: 26rpx;
+			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+		}
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - var(--window-top));
+		width: 100%;
+	}
+
+	.swiper-box {
+		flex: 1;
+	}
+
+	.swiper-item {
+		height: 100%;
+	}
+</style>

order-app/src/store/address.js

@@ -0,0 +1,22 @@
+// 引入
+import {
+	defineStore
+} from 'pinia';
+//通过defineStore定义一个store,
+// defineStore 第一个参数是唯一的
+export const addressStore = defineStore('addressStore', {
+	state: () => {
+		return {
+			checkedId: '',
+			userName: '',
+			phone: '',
+			area: '',
+			address: ''
+		};
+	},
+	// 也可以这样定义
+	// state: () => ({ count: 0 })
+	actions: {
+
+	},
+});

order-app/src/store/order.js

@@ -0,0 +1,45 @@
+// 引入
+import {
+	defineStore
+} from 'pinia';
+//通过defineStore定义一个store,
+// defineStore 第一个参数是唯一的
+export const orderStore = defineStore('orderStore', {
+	state: () => {
+		return {
+			count: 0,
+			//存储购物车数据
+			orderList: []
+		};
+	},
+	// 也可以这样定义
+	// state: () => ({ count: 0 })
+	actions: {
+		//单条数据加入
+		addOrder(goods) {
+			//判断是否已经加入到购物车
+			const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
+			//存在，删除购物车数据里面的数据
+			if (index > -1) {
+				//删除原来的数据
+				this.orderList.splice(index, 1);
+			}
+			//加的购物车
+			this.orderList.push(goods)
+		},
+		//多条数据加入
+		addOrderList(list) {
+			list.forEach(goods => {
+				//判断是否已经加入到购物车
+				const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
+				//存在，删除购物车数据里面的数据
+				if (index > -1) {
+					//删除原来的数据
+					this.orderList.splice(index, 1);
+				}
+				//加的购物车
+				this.orderList.push(goods)
+			})
+		}
+	},
+});