订单,个人中心

common/api/account.js

@@ -2,6 +2,23 @@
  * @Author: ch
  * @Date: 2022-03-17 16:38:39
  * @LastEditors: ch
- * @LastEditTime: 2022-03-17 16:38:39
+ * @LastEditTime: 2022-03-30 17:58:33
  * @Description: file content
  */
+
+import {ToAsyncAwait, Request} from '@/common/utils';
+
+import orderList from '@/mock/orderList'
+
+const ApiGetCurrentUser = () => 
+	ToAsyncAwait(Request.get('/user/current'));
+	 
+const ApiPutUser = (data) => 
+	ToAsyncAwait(Request.put('/user/', data))
+export {
+	// 获取当前登录用户信息
+	ApiGetCurrentUser,
+	// 修改用户信息
+	ApiPutUser
+}
+

common/api/order.js

@@ -2,17 +2,27 @@
  * @Author: ch
  * @Date: 2022-03-29 17:38:17
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 18:07:01
+ * @LastEditTime: 2022-03-30 15:25:23
  * @Description: file content
  */
 import {ToAsyncAwait, Request} from '@/common/utils';
 
 import orderList from '@/mock/orderList'
 
-const ApiGetOrderList = (params) => ToAsyncAwait(new Promise((resolve)=>resolve(orderList.data)))
+const ApiGetOrderList = (params) => 
-	//  ToAsyncAwait(Request.get('/app/tradeOrder/page', params));
+	ToAsyncAwait(Request.get('/app/tradeOrder/page', params));
+
+const ApiPostSubmitOrder = (data) => 
+	ToAsyncAwait(Request.post('/app/tradeOrder/submitOrder', data));
+
+const ApiPostWxPay = (data) => 
+	ToAsyncAwait(Request.post('/pay/wxPay/app', data));
 	 
 export {
 	// 获取订单列表
-	ApiGetOrderList
+	ApiGetOrderList,
+	// 提交订单
+	ApiPostSubmitOrder,
+	// 获取支付参数
+	ApiPostWxPay
 }

common/plugins/msbUniRequest.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-17 16:36:59
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 18:16:44
+ * @LastEditTime: 2022-03-30 10:14:44
  * @Description: 针对uniapp request请求做了一次封装，使用思维参考axios
  * 
  * 
@@ -78,7 +78,6 @@ class MsbUniRequest {
 		this.hook[hookName] = cb;
 	}
 	get(url, data, header){
-		console.log(data)
 		return this.method({method : 'GET', url, data, header});
 	}
 	post(url, data, header){

common/store/index.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-22 18:28:52
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 11:08:32
+ * @LastEditTime: 2022-03-30 16:58:03
  * @Description: file content
  */
 import Vue from 'vue'
@@ -12,12 +12,17 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
 	state : {
-		token : uni.getStorageSync('tk') || ''
+		token : uni.getStorageSync('tk') || '',
+		userInfo : JSON.parse(uni.getStorageSync('ui') || '{}')
 	},
 	mutations:{
 		SET_TOKEN (state, token = ''){
 			state.token = token;
 			uni.setStorageSync('tk', token);
+		},
+		SET_USER_INFO (state, userInfo = {}){
+			state.userInfo = userInfo;
+			uni.setStorageSync('ui', JSON.stringify(userInfo));
 		}
 	},
 	getters:{

common/utils/requset.js

@@ -2,11 +2,13 @@
  * @Author: ch
  * @Date: 2022-03-17 17:42:32
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 18:15:37
+ * @LastEditTime: 2022-03-30 10:22:01
  * @Description: 项目接口请求统一处理器，返回一个需要token和不需要token的请求封装方法
  */
 
-const { default: MsbUniRequest } = require("../plugins/msbUniRequest");
+import MsbUniRequest from '@/common/plugins/msbUniRequest';
+import $store from '@/common/store';
+
 const ENV = 'test';
 const BASE_URL = {
 	// 'test' : 'http://39.103.236.147/api',
@@ -15,7 +17,6 @@ const BASE_URL = {
 	'prod' : ''
 };
 const successIntercept = (response) =>{
-	console.log(response)
 	if(response.statusCode === 200){
 		const result = response.data;
 		if(result.code === 'SUCCESS'){
@@ -38,6 +39,7 @@ Request.baseUrl = BASE_URL[ENV];
 
 
 Request.use('request', (option) => {
+	$store.state.token && (option.header = {...option.header, Authorization:$store.state.token});
 	return option;
 })
 Request.use('success', successIntercept);
@@ -46,11 +48,11 @@ Request.use('error', errorIntercept);
 // 需要token的接口
 const RequestTk = new MsbUniRequest();
 RequestTk.baseUrl = BASE_URL[ENV];
-Request.use('request', (option) => {
+RequestTk.use('request', (option) => {
 	return option;
 })
-Request.use('success', successIntercept);
+RequestTk.use('success', successIntercept);
-Request.use('error', errorIntercept);
+RequestTk.use('error', errorIntercept);
 
 export {
 	// 不需要Token的接口请求用这个实例

components/UiButton.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-26 10:06:38
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 18:20:53
+ * @LastEditTime: 2022-03-30 15:12:56
  * @Description: file content
 -->
 <template>
@@ -28,8 +28,8 @@ export default {
 	padding: 0 50rpx;
 	border-radius: 50rpx;
 	&__normal{
-		height: 60rpx;
+		height: 70rpx;
-		line-height: 60rpx;
+		line-height: 70rpx;
 		font-size: 28rpx;
 	}
 	&__max{

manifest.json

@@ -77,6 +77,12 @@
             "proxy" : {
                 "/user/" : {
                     "target": "http://192.168.10.251:4500/"
+                },
+                "/app/" : {
+                    "target": "http://192.168.10.109:4001/"
+                },
+                "/pay/" : {
+                    "target": "http://192.168.10.109:4001/"
                 }
             }
         }

pages.json

@@ -63,6 +63,7 @@
 		},
 		{
 			"path": "pages/account/index",
+			"aliasPath" : "/account",
 			"style": {
 				"navigationStyle" : "custom",
 				"navigationBarTitleText": "uni-app"
@@ -71,6 +72,7 @@
 		{
 			
 			"path": "pages/account/cart",
+			"aliasPath" : "/cart",
 			"style": {
 				"navigationStyle" : "custom",
 				"navigationBarTitleText": "uni-app"
@@ -79,23 +81,26 @@
 		{
 			
 			"path": "pages/account/setting/index",
+			"aliasPath" : "/setting",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "设置"
 			}
 		},
 		{
 			
 			"path": "pages/account/setting/setUserInfo",
+			"aliasPath" : "/setUserInfo",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "个人资料"
 			}
 		},
 		{
 			
 			"path": "pages/account/setting/setName",
+			"aliasPath" : "/setNickname",
 			"style": {
 				"navigationStyle" : "custom",
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "设置昵称"
 			}
 		},
 		{
@@ -123,30 +128,29 @@
 			}
 		},
 		{
-			"path": "pages/account/order/submit",
+			"path": "pages/order/submit",
+			"aliasPath" : "/orderSubmit",
 			"style": {
-				"navigationStyle" : "custom",
+				"navigationBarTitleText": "提交订单"
-				"navigationBarTitleText": "uni-app"
 			}
 		},
 		{
-			"path": "pages/account/order/paySuccess",
+			"path": "pages/order/paySuccess",
 			"style": {
 				"navigationBarTitleText": "支付成功"
 			}
 		},
 		{
-			"path": "pages/account/order/payFail",
+			"path": "pages/order/payFail",
 			"style": {
 				"navigationBarTitleText": "支付失败"
 			}
 		},
 		{
-			"path": "pages/account/order/list",
+			"path": "pages/order/list",
 			"aliasPath" : "/orderList",
 			"style": {
-				"navigationStyle" : "custom",
+				"navigationBarTitleText": "我的订单"
-				"navigationBarTitleText": "uni-app"
 			}
 		},
 		{
@@ -197,7 +201,8 @@
 		]
 	},
 	"globalStyle": {
-		"navigationBarTextStyle": "white",
+		"navigationBarBackgroundColor": "#fff",
+		"navigationBarTextStyle" : "black",
 		"backgroundColor": "#F8F8F8"
 	},
 	"easycom" : {

pages/account/address/list.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-22 13:54:15
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 16:25:49
+ * @LastEditTime: 2022-03-30 14:54:44
  * @Description: file content
 -->
 <template>
@@ -11,6 +11,7 @@
 			<BsEmpty tips="暂无收货地址呢~"></BsEmpty>
 			<view class="addressItem" v-for="item in 2" :key="item"
 				:class="{'addressItem__last' : item === 2,'addressItem__default':item == 1}">
+				
 				<view>
 					<view class="addressItem--city">湖南省长沙市岳麓区</view>
 					<view class="addressItem--detail">西上海大厦芯城科技园8栋13楼</view>

pages/account/cart.vue

@@ -54,7 +54,7 @@
 		<view class="title">为您推荐</view>
 		<BsGoodsGroup></BsGoodsGroup>
 		<!-- 底部操作栏 -->
-		<view v-if="list.length" class="footer">
+		<view v-if="!list.length" class="footer">
 			<label class="all-radio" @click="handleCheckAll">
 				<radio class="radio" color="#fa2209" :checked="checkedIds.length > 0 && checkedIds.length === list.length" />
 				<text>全选</text>
@@ -248,9 +248,10 @@ import UiPageHeader from '../../components/UiPageHeader.vue';
       // 结算选中的商品
       handleOrder() {
         const app = this
+        app.$Router.push('/orderSubmit')
         if (app.checkedIds.length) {
           const cartIds = app.checkedIds.join()
-          app.$Router.push('/pages/order/submit', { mode: 'cart', cartIds })
+          app.$Router.push('orderSubmit', { mode: 'cart', cartIds })
         }
       },
 

pages/account/index.vue

@@ -3,7 +3,7 @@
 	components: { UiCell },: ch
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 17:15:58
+ * @LastEditTime: 2022-03-30 18:47:31
  * @Description: file content
 -->
 <template>
@@ -12,7 +12,8 @@
 			<u-badge class="header--badge" max="99" :value="9"></u-badge>
 			<image class="header--msg" src="@/static/account/xx.png" />
 		</view>
-		<UiCell title="昵称" label="第一个青春是上帝给的..." class="header--cell">
+		<UiCell class="header--cell" :title="userInfo.nickname" label="第一个青春是上帝给的..."
+			@click="$Router.push('/setUserInfo')">
 			<image slot="icon" class="head-img" src="@/static/account/tx.png" shape="circle" />
 		</UiCell>
 		<view class="order">
@@ -48,7 +49,7 @@
 			<UiCell title="联系客服">
 				<image slot="icon" class="cell--icon" src="@/static/account/kf.png" />
 			</UiCell>
-			<UiCell title="设置" class="cell--last" @click="$Router.push('/pages/account/setting/index')">
+			<UiCell title="设置" class="cell--last" @click="$Router.push('/setting')">
 				<image slot="icon" class="cell--icon" src="@/static/account/sz.png" />
 			</UiCell>
 		</view>
@@ -57,10 +58,30 @@
 
 <script>
 import UiCell from '../../components/UiCell.vue';
+import { ApiGetCurrentUser } from '@/common/api/account'
 export default {
 	components : { UiCell },
-	methods: {
+	data(){
+		return { 
+			userInfo : {}
+		}
+	},
+	onLoad(){
+		this.getUserInfo();
+	},
+	onShow(){
 		
+	},
+	methods: {
+		async getUserInfo(){
+			const {error, result} = await ApiGetCurrentUser();
+			if(error){
+				uin.$u.totas(error.message);
+				return false;
+			}
+			this.userInfo = result;
+			this.$store.commit('SET_USER_INFO', result);
+		}
 	}
 }
 

pages/account/setting/index.vue

@@ -2,18 +2,18 @@
  * @Author: ch
  * @Date: 2022-03-22 15:09:06
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 17:12:14
+ * @LastEditTime: 2022-03-30 18:43:33
  * @Description: file content
 -->
 <template>
 	<view>
-		<UiCell class="userInfo cell" title="昵称" @click="$Router.push('/pages/account/setting/setUserInfo')">
+		<UiCell class="userInfo cell" :title="userInfo.nickname" @click="$Router.push('/setUserInfo')">
 			<image slot="icon" class="userInfo--head" src="@/static/account/tx.png" ></image>
 		</UiCell>
 		<UiCell class="cell" title="我的收货地址"></UiCell>
 		<UiCell class="cell" title="关于我们" ></UiCell>
 		<UiCell class="cell cell--last" title="版本号" value="1.0.0" valueClass="cell--value" :rightIcon="false"></UiCell>
-		<view class="logout">退出登录</view>
+		<view class="logout" @click="logout">退出登录</view>
 	</view>
 </template>
 <script>
@@ -21,6 +21,17 @@ import UiButton from '@/components/UiButton.vue'
 import UiCell from '@/components/UiCell.vue'
 export default {
 	components: { UiCell, UiButton },
+	computed:{
+		userInfo (){
+			return this.$store.state.userInfo
+		}
+	},
+	methods:{
+		logout(){
+			// this.$store.commit('SET_TOKEN');
+			this.$Router.replace('/login')
+		}
+	}
 	
 }
 </script>

pages/account/setting/setName.vue

@@ -2,18 +2,18 @@
  * @Author: ch
  * @Date: 2022-03-28 15:38:23
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 17:08:34
+ * @LastEditTime: 2022-03-30 18:04:37
  * @Description: file content
 -->
 <template>
 	<view>
 		<UiPageHeader title="设置昵称">
-			<view slot="operation" class="headerBtn">确定</view>
+			<view slot="operation" class="headerBtn" @click="confirm">确定</view>
 		</UiPageHeader>
-		<u--input class="input" placeholder="请输入昵称" clearable ></u--input>
+		<u--input class="input" v-model="userInfo.nickname" maxlength="10" placeholder="请输入昵称" clearable ></u--input>
 		<view class="tips">
 			<text>请输入1-10个字符</text>
-			<text>(1/10)</text>
+			<text>({{userInfo.nickname.length}}/10)</text>
 		</view>
 	</view>
 </template>
@@ -21,9 +21,26 @@
 import UiButton from '@/components/UiButton.vue'
 import UiCell from '@/components/UiCell.vue'
 import UiPageHeader from '@/components/UiPageHeader.vue'
+import {ApiPutUser} from '@/common/api/account';
 export default {
 	components: { UiCell, UiButton, UiPageHeader },
-	
+	computed:{
+		userInfo (){
+			return this.$store.state.userInfo
+		}
+	},
+	methods:{
+		async confirm(){
+			const {error, result} = await ApiPutUser({
+				nickname : this.userInfo.nickname
+			});
+			if(error){
+				ui.$u.totas(error.message);
+				return false;
+			}
+			this.$store.commit('SET_USER_INFO', {...this.userInfo});
+		}
+	}
 }
 </script>
 <style lang="scss" scoped>

pages/account/setting/setUserInfo.vue

@@ -2,39 +2,88 @@
  * @Author: ch
  * @Date: 2022-03-28 15:38:23
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 16:37:16
+ * @LastEditTime: 2022-03-30 21:23:22
  * @Description: file content
 -->
 <template>
 	<view>
 		<view class="userInfo">
-			<u-upload  class="userInfo--upload" name="6" :fileList="fileList6" @afterRead="headUpload" >
+			<u-upload  class="userInfo--upload" name="6" :fileList="fileList" @afterRead="headUpload" >
 				<image class="userInfo--head" src="@/static/account/tx.png" ></image>
 			</u-upload>
-			<view>昵称</view>
+			<view>{{userInfo.nickname}}</view>
+			<u-input type="file" value="xxx"/>
 		</view>
-		<UiCell class="cell" title="昵称" value="马士兵" @click="$Router.push('/pages/account/setting/setName')"></UiCell>
+		<UiCell class="cell" title="昵称" :value="userInfo.nickname" @click="$Router.push('/setNickname')"></UiCell>
-		<UiCell class="cell cell--last" title="性别" value="男" @click="sexShow = true"></UiCell>
+		<UiCell class="cell cell--last" title="性别" :value="sexName" @click="sexShow = true"></UiCell>
-		<u-picker :show="sexShow" :columns="sexData" keyName="label" @cancel="sexShow = false" @confirm="sexChange"></u-picker>
+		<u-picker :show="sexShow" :columns="sexData" :defaultIndex="sexDefault" 
+			keyName="label" @cancel="sexShow = false" @confirm="sexChange"></u-picker>
 	</view>
 </template>
 <script>
 import UiButton from '@/components/UiButton.vue'
-import UiCell from '@/components/UiCell.vue'
+import UiCell from '@/components/UiCell.vue';
+import {Request} from '@/common/utils';
+import {ApiPutUser} from '@/common/api/account';
+const OSS = {"accessid":"LTAI4GHRNb5Xn2w5NeHVbR4c","policy":"eyJleHBpcmF0aW9uIjoiMjAyMi0wNC0xNVQyMDowODoyNi4zMTlaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJ0ZXN0LyJdXX0=","signature":"okaB3sNp3vzyfM0S3ypudaUAZ+0=","dir":"test/","host":"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com","expire":"1650053306"}
 export default {
 	components: { UiCell, UiButton },
 	data(){
 		return {
 			fileList: [],
 			sexShow : false,
-			sexData : [[{label:'女',val:0},{label:'男',val:1}]]
+			sexData : [[{label:'女',val:2},{label:'男',val:1}]]
+		}
+	},
+	computed:{
+		userInfo (){
+			return this.$store.state.userInfo
+		},
+		sexName (){
+			const curSex = this.sexData[0].find(i => i.val === this.userInfo.gender);
+			return curSex ? curSex.label : '未知';
+		},
+		sexDefault (){
+			return [this.sexData[0].findIndex(i => i.val === this.userInfo.gender)];
 		}
 	},
 	methods:{
-		sexChange(){
+		/**
-			this.sexShow = false
+		 * 切换性别，发起性别修改请求
+		 */
+		async sexChange(val){
+			const value = val.value[0].val;
+			const {error, result} = await ApiPutUser({gender:value});
+			if(error){
+				ui.$u.totas(error.message);
+				return false
+			}
+			this.$store.commit('SET_USER_INFO', {...this.userInfo, gender:value});
+			this.sexShow = false;
+		},
+		headUpload(val){
+			console.log(val);
+			const file = val.file;
+			uni.getFileInfo({filePath:file.url,success(res){
+				console.log(res,'====');
+			}})
+			uni.uploadFile({
+				name : 'file',
+				filePath : file.url,
+				url : OSS.host,
+				formData : {
+					name : file.name,
+					key : `${OSS.dir}${'${filename}'}`,
+					policy : OSS.policy,
+					OSSAccessKeyId : OSS.accessid,
+					success_action_status : 200,
+					signature : OSS.signature
 				},
-		headUpload(){
+				success(res){
+					console.log(res,'-----');
+				}
+			})
+
 
 		}
 	}

pages/order/list.vue

@@ -2,17 +2,17 @@
  * @Author: ch
  * @Date: 2022-03-22 10:58:24
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 20:12:55
+ * @LastEditTime: 2022-03-30 14:23:17
  * @Description: file content
 -->
 <template>
 	<view>
 		<view class="tabs">
-			<text :class="item.key === currentKey && 'tabs__active'" 
+			<text :class="item.key === currentTabKey && 'tabs__active'" 
 				v-for="item in tabListData" :key="item.key" @click="changeTab(item.key)">
 				{{item.name}}</text>
 		</view>
-		<BsEmpty v-if="!orderListData.length" tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
+		<BsEmpty v-if="!orderListData.length && loadingStatus === 'nomore'" tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
 			<ui-button slot="btn" type="line" @click="$Router('/')">去逛逛</ui-button>
 		</BsEmpty>
 
@@ -29,9 +29,7 @@
 						<text class="orders--item-pirce">￥{{i.realAmount}}</text>
 					</view>
 					<view class="orders--item-desc">
-						<view>
+						<text>{{i.skuDescribe}}</text>
-							<text class="orders--item-desc-item">{{i.skuDescribe}}</text>
-						</view>
 						<text class="orders--item-num">x{{i.quantity}}</text>
 					</view>
 				</view>
@@ -49,11 +47,12 @@
 				<button class="orders--footer-btn orders--footer-btn__red"  v-if="item.orderStatus == 4">确认收货</button>
 			</view>
 		</view>
+		<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
 	</view>
 </template>
 <script>
-import BsEmpty from '../../../components/BsEmpty.vue';
+import BsEmpty from '@/components/BsEmpty.vue';
-import UiButton from '../../../components/UiButton.vue';
+import UiButton from '@/components/UiButton.vue';
 import { DictOrderStatus } from '@/common/dicts/order';
 import { ApiGetOrderList } from '@/common/api/order';
 
@@ -68,12 +67,11 @@ export default {
 				{key : '4', name : '待收货'},
 				{key : '6', name : '待评价'}
 			],
-			currentKey : '-1',
+			currentTabKey : '-1',
 			orderListData : [],
-			isLoading : true,
+			loadingStatus : 'loading',
 			pageIndex : 1,
-			pageSize : 10,
+			pageSize : 10
-			lastPage : false
 		}
 	},
 	onLoad(){
@@ -87,34 +85,36 @@ export default {
 		 * 切换tab 拉取当前分类第一页数据
 		 */
 		changeTab(key){
-			this.currentKey = key;
+			this.currentTabKey = key;
 			this.pageIndex = 1;
-			this.getOrderList = [];
+			this.orderListData = [];
 			this.getOrderList();
 		},
 		async getOrderList(){
-			this.isLoading = true;
+			this.loadingStatus = 'loading';
-			const {error, result} = await ApiGetOrderList();
+			const {error, result} = await ApiGetOrderList({
+				length : this.pageSize,
+				pageIndex : this.pageIndex,
+				orderStatus : this.currentTabKey > -1 ? this.currentTabKey : null
+			});
 			if(error){
 				uni.$u.toast(error.message);
 				return false;
 			}
 			// 标记是否为最后一页
-			if(result.records.length){
+			if(!result.records.length){
-				this.lastPage = true;
+				this.loadingStatus = 'nomore';
-			}else{
-				this.lastPage = false;
 			}
-			this.isLoading = false
 			this.orderListData = this.orderListData.concat(result.records);
 		},
 		/**
 		 * 到底拉取下一页数据，并判断是否执行拉取
 		 */
 		next(){
-			if(!this.lastPage){
+			if(this.loadingStatus === 'nomore'){
-				this.pageIndex++;
+				return false
 			}
+			this.pageIndex++;
 			this.getOrderList();
 		}
 	}
@@ -211,14 +211,6 @@ page{
 		line-height: 39rpx;
 		display: flex;
 		justify-content: space-between;
-		&-item{
-			background: #F8F8F8;
-			padding: 0 15rpx;
-			height: 32rpx;
-			line-height: 32rpx;
-			display: inline-block;
-			margin: 0 10px 10rpx 0;
-		}
 	}
 	&--item-num{
 		font-size: 28rpx;

pages/order/submit.vue

@@ -2,18 +2,18 @@
  * @Author: ch
  * @Date: 2022-03-20 14:14:53
  * @LastEditors: ch
- * @LastEditTime: 2022-03-25 15:39:28
+ * @LastEditTime: 2022-03-30 18:56:51
  * @Description: file content
 -->
 <template>
 	<view>
 		<u-cell class="address" :title="addres.title" :label="addres.label" 
-			:border="false" isLink @click="$Router.push('/pages/account/address/list')">
+			:border="false" isLink @click="$Router.push('/addressList')">
 			<image class="address--icon" slot="icon" src="@/static/common/dz.png" />
 		</u-cell>
 
 		<view class="goods-group">
-			<view class="goods-group--item">
+			<view class="goods-group--item" v-for="item in goodsData" :key="item.productId">
 				<image class="goods-group--item-image" mode="widthFix" src="http://static.yoshop.xany6.com/2018071717370507f183424.jpg" />
 				<view >
 					<view class="goods-group--item-con">
@@ -26,26 +26,14 @@
 					</view>
 				</view>
 			</view>
-			<view class="goods-group--item">
-				<image class="goods-group--item-image" mode="widthFix" src="http://static.yoshop.xany6.com/2018071717370507f183424.jpg" />
-				<view >
-					<view class="goods-group--item-con">
-						<text class="goods-group--item-title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</text>
-						<text class="goods-group--item-pirce">￥1922.00</text>
-					</view>
-					<view class="goods-group--item-desc">
-						<text>多线程与高并发内部教材+试听课</text>
-						<text class="goods-group--item-num">x1</text>
-					</view>
-				</view>
-			</view>
 		</view>
 
 		<view class="service">
-			<u-cell title="配送方式" value="快递配送"></u-cell>
+			<UiCell class="service--cell" title="配送方式" value="快递配送" :rightIcon="false"></UiCell>
-			<u-cell title="买家留言" :border="false">
+			<UiCell class="service--cell service--cell__last" title="买家留言" value="快递配送" :rightIcon="false">
-				<textarea slot="value" class="service--remark" auto-height maxlength="50" placeholder="填写您想要备注的信息，50字以内" />
+				<textarea slot="value" class="service--remark"  auto-height v-model="userMessage" 
-			</u-cell>
+					maxlength="50" placeholder="填写您想要备注的信息，50字以内" />
+			</UiCell>
 		</view>
 
 		<view class="play">
@@ -74,7 +62,7 @@
 				<text>合计：</text>
 				<text class="footer--amount">￥19923.00</text>
 			</view>
-			<button class="footer--btn">去支付</button>
+			<UiButton class="footer--btn" type="solid" @click="submit">去支付</UiButton>
 		</view>
 	</view>
 	
@@ -82,18 +70,67 @@
 </template>
 
 <script>
+import UiCell from '@/components/UiCell';
+import {ApiPostSubmitOrder, ApiPostWxPay} from '@/common/api/order';
+import UiButton from '@/components/UiButton.vue';
 export default {
+	components : {UiCell, UiButton },
 	data(){
 		return {
 			addres : {
 				title : '选择收货地址',
 				label : '陈先生 189****6782'
+			},
+			userMessage : '',
+			goodsData : [
+				{
+					productId : 1,
+					productSkuId : 1,
+					quantity : 1
+				},
+
+				{
+					productId : 2,
+					productSkuId : 2,
+					quantity : 2
+				}
+			]
+		}
+	},
+	methods:{
+		/**
+		 * 获取预订单信息，将要提交的订单信息
+		 */
+		getBeforeOrder(){
+
+		},
+		/**
+		 * 提交订单
+		 */
+		async submit(){
+			const {error, result} = await ApiPostSubmitOrder({
+				orderSource : 2,
+				recipientAddressId : 1,
+				products : this.goodsData.map(i => ({
+					productId : i.productId,
+					productSkuId : i.productSkuId,
+					quantity : i.quantity
+				})),
+				userMessage : this.userMessage
+			});
+			if(error){
+				uni.$u.totas(error.message);
+				return false;
 			}
+			this.wxpay(result.orderId);
+		},
+		async wxpay(orderId){
+			const {error, result} = await ApiPostWxPay({orderId});
+
 		}
 	}
 }
 </script>
-
 <style lang="scss" scoped>
 page{
 	background: #f8f8f8;
@@ -158,6 +195,13 @@ page{
 
 .service{
 	background: #fff;
+	margin: 20rpx 0;
+	&--cell{
+		padding: 0 30rpx;
+		&__last{
+			border: 0;
+		}
+	}
 	&--remark{
 		font-size: 28rpx;
 		width: 500rpx;
@@ -209,14 +253,7 @@ page{
 		margin-left: 10rpx;
 	}
 	&--btn{
-		height: 70rpx;
-		line-height: 70rpx;
-		border-radius: 35rpx;
-		padding: 0 58rpx;
 		margin: 0;
-		font-size: 28rpx;
-		background: #FF512B;
-		color: #fff;
 	}
 }
 </style>