小程序取消订单 昵称、头像优化及上传

order-app/src/api/order.js

@@ -2,6 +2,9 @@ import http from '../common/http.js'
 export const splaceOrderApi = (parm) => {
 	return http.post("/wxapi/order/splaceOrder", parm)
 }
-export const getOrderListApi = (parm)=>{
-	return http.get("/wxapi/order/getOrderList",parm)
+export const getOrderListApi = (parm) => {
+	return http.get("/wxapi/order/getOrderList", parm)
+}
+export const cancelOrderApi = (parm) => {
+	return http.post("/wxapi/order/cancelOrder", parm)
 }

order-app/src/api/user.js

@@ -65,4 +65,8 @@ export const editAddressApi = (parm) => {
 export const getAddressApi = (parm) => {
 	console.log("查询默认地址成功")
 	return http.get("/wxapi/address/getAddress", parm)
+}
+//头像上传
+export const uploadImageApi = (parm) => {
+	return http.upload(parm)
 }

order-app/src/common/http.js

@@ -1,40 +1,62 @@
- const baseUrl = 'http://localhost:8089'
-//const baseUrl = 'http://192.168.31.70:8089'  
+const baseUrl = 'http://localhost:8089'
+//const baseUrl = 'http://192.168.31.70:8089'
 const http = (options = {}) => {
-    return new Promise((resolve, reject) => {
-        uni.request({
-            url: baseUrl + options.url || '',
-            method:options.type || 'GET' ,
-            data: options.data || {},
-            header: options.header || {},
-        }).then((response) => {
-            console.log(response)
-            resolve(response.data);
-        }).catch(error => {
-            reject(error)
-        })
-    });
+	return new Promise((resolve, reject) => {
+		uni.request({
+			url: baseUrl + options.url || '',
+			method: options.type || 'GET',
+			data: options.data || {},
+			header: options.header || {},
+		}).then((response) => {
+			console.log(response)
+			resolve(response.data);
+		}).catch(error => {
+			reject(error)
+		})
+	});
 }
-const get=(url,data,options={})=>{
-    options.type='get';
-    options.data = data;
-    options.url = url;
-    return http(options)
+const get = (url, data, options = {}) => {
+	options.type = 'get';
+	options.data = data;
+	options.url = url;
+	return http(options)
 }
 const post = (url, data, options = {}) => {
-    options.type = 'post';
-    options.data = data;
-    options.url = url;
-    return http(options)
+	options.type = 'post';
+	options.data = data;
+	options.url = url;
+	return http(options)
 }
 const put = (url, data, options = {}) => {
-    options.type = 'put';
-    options.data = data;
-    options.url = url;
-    return http(options)
+	options.type = 'put';
+	options.data = data;
+	options.url = url;
+	return http(options)
+}
+const upload = (parm) => {
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: baseUrl + parm.url,
+			filePath: parm.filePath,
+			name: 'file',
+			formData: {
+				openid: uni.getStorageSync('openid')
+			},
+			header: {
+				// Authorization: uni.getStorageSync("token")
+			},
+			success: (res) => {
+				resolve(res.data);
+			},
+			fail: (error) => {
+				reject(error)
+			}
+		})
+	})
 }
 export default {
-    get,
-    post,
-    put
+	get,
+	post,
+	put,
+	upload
 }

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

@@ -1,15 +1,20 @@
 <template>
 	<view>
-		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
+		<!-- <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>
+			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+				<image class="uimage" :src="avatarUrl"></image>
+			</button>
+			<input id="nickname-input" type="nickname" style="text-align: center;" class="weui-input"
+				placeholder="请选择昵称" v-model="nickName" @blur="onNickName" />
 		</view>
-
 		<view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item @click="toOrder" icon="star" title="我的订单"></u-cell-item>
@@ -25,7 +30,8 @@
 		onShow
 	} from '@dcloudio/uni-app';
 	import {
-		ref
+		ref,
+		getCurrentInstance
 	} from 'vue'
 	import {
 		userLogin
@@ -34,6 +40,31 @@
 	const nickName = ref('大幕孤烟直')
 	//头像
 	const avatarUrl = ref('/static/user.jpg')
+	const onChooseAvatar = async (e) => {
+		console.log(e)
+		avatarUrl.value = e.detail.avatarUrl
+		uploadImageApi({
+			url: "/api/upload/uploadImage",
+			filePath: e.detail.avatarUrl
+		}).then((res) => {
+			console.log(res)
+		})
+	}
+	const onNickName = (e) => {
+		console.log(e)
+		uni.createSelectorQuery().in(instance) // 注意这里要加上 in(this)  
+			.select("#nickname-input")
+			.fields({
+				properties: ["value"],
+			})
+			.exec((res) => {
+				console.log(res)
+				nickName.value = res?.[0]?.value
+				console.log('昵称', nickName.value)
+
+			})
+		// nickName.value = e.detail.nickName
+	}
 	//获取头像点击事件
 	const getUserInfo = () => {
 		console.log('获取头像')

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

@@ -47,7 +47,8 @@
 									</text>
 								</view>
 								<view class="bottom">
-									<view v-if="res.status == '0'" class="exchange btn">取消订单</view>
+									<view @click="cancel(res,index)" v-if="res.status == '0'" class="exchange btn">取消订单
+									</view>
 									<view v-if="res.status == '2'" class="evaluate btn">评价</view>
 								</view>
 							</view>
@@ -65,7 +66,8 @@
 		onReady
 	} from '@dcloudio/uni-app';
 	import {
-		getOrderListApi
+		getOrderListApi,
+		cancelOrderApi
 	} from '../../api/order.js'
 	import {
 		ref,
@@ -164,11 +166,38 @@
 			res.data.records.map(item => {
 				orderList.value[idx].push(item)
 			})
-			loadStatus.value.splice(currents.value, 1, 'loadmore')
+			if (res.data.total == pages.value) {
+				loadStatus.value.splice(currents.value, 1, 'nomore')
+			} else {
+				loadStatus.value.splice(currents.value, 1, 'loadmore')
+			}
+
 		} else {
 			loadStatus.value.splice(currents.value, 1, 'nomore')
 		}
 	}
+	//取消订单
+	const cancel = (item, index) => {
+		uni.showModal({
+			title: '提示',
+			content: '确定取消订单吗？',
+			success: async function(res) {
+				if (res.confirm) {
+					console.log('用户点击确定');
+					console.log(item)
+					let res = await cancelOrderApi({
+						orderId: item.orderId
+					})
+					if (res && res.code == 200) {
+						change(index + 1)
+						getOrderList(index + 1);
+					}
+				} else if (res.cancel) {
+					console.log('用户点击取消');
+				}
+			}
+		});
+	}
 	onReady(() => {
 		getOrderList(0);
 	})