Browse Source

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
获取优惠券及订单详情取消订单

1004749546@qq.com 4 years ago
parent
commit
3dc60a6d60
6 changed files with 159 additions and 89 deletions
  1. 3 2
      api/coupon.js
  2. 8 0
      api/order.js
  3. 30 10
      pages/coupon/getCoupon/getCoupon.vue
  4. 9 3
      pages/order/order.vue
  5. 103 72
      pages/order/orderDetail.vue
  6. 6 2
      store/index.js

+ 3 - 2
api/coupon.js

@@ -2,8 +2,9 @@ import axios from '@/libs/axios.js';
 // 确认领取优惠券
 export const receivesCoupon = (params) => {
 	return axios.request({
-		url: `couponReceives/receivesCoupon/${params.couponCode}`,
-		method: 'get'
+		url: `couponReceives/receivesCoupon`,
+		method: 'post',
+		data: params
 	})
 }
 

+ 8 - 0
api/order.js

@@ -50,4 +50,12 @@ export const getUnFinishedOrder = params => {
 	  url: `order/unFinishedOrderRunStatus`,
 	  method: 'get',
 	})
+}
+
+// 取消订单
+export const cancleOrder = params => {
+	return axios.request({
+	  url: `order/cancel/${params.id}`,
+	  method: 'get',
+	})
 }

+ 30 - 10
pages/coupon/getCoupon/getCoupon.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="coupon-list">
-		<view class="coupon-box">
+		<view v-if="couponInfo" class="coupon-box">
 			<view class="coupon-head">
 				<view class="coupon-sel"></view>
 				<view class="coupon-title">
@@ -11,11 +11,12 @@
 				</view>
 			</view>
 			<view class="coupon-desc">
-				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:{{couponInfo&&couponInfo.endTime?couponInfo.endTime:''}}</view>
+				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期:{{couponInfo?couponInfo.validDateStr:''}}</view>
 				<view><u-icon class="icon" size="30" name="info-circle"></u-icon> {{couponInfo && couponInfo.ruleDesc?couponInfo.ruleDesc:''}}</view>
 			</view>
 		</view>
-		<u-button class="handleSubmit" @click="handleSubmit" type="error">确认领取</u-button>
+		<u-empty :text="noDataText" v-if="!couponInfo && status!='loading'" mode="coupon"></u-empty>
+		<u-button class="handleSubmit" :disabled="isDisabled" shape="circle" @click="handleSubmit" type="error">确认领取</u-button>
 	</view>
 </template>
 
@@ -26,16 +27,26 @@
 		data () {
 			return {
 				couponInfo: null, // 领取优惠券信息
+				isDisabled: true, // 是否可领取
+				status: 'loading',
+				noDataText: '暂无优惠券'
 			}
 		},
 		onLoad(options) {
+			console.log(options,'options')
 			// 存储当前扫码的券码
 			if (options.scene) {
 				let scene = decodeURIComponent(options.scene);
+				console.log(scene,'1111')
 				//&是我们定义的参数链接方式
-				let couponCode = scene;
+				let customerType = scene.split(',')[0];
+				let storeId = scene.split(',')[1];
+				let couponCode = scene.split(',')[2];
+				console.log(scene.split(','),'222')
 				//其他逻辑处理。。。。。
-				this.$store.state.vuex_couponCode = couponCode
+				this.$store.state.vuex_couponInfo.customerType = customerType
+				this.$store.state.vuex_couponInfo.storeId = storeId
+				this.$store.state.vuex_couponInfo.couponCode = couponCode
 				// 获取要领取的优惠券
 				this.getCoupon(couponCode)
 			} else {
@@ -54,18 +65,27 @@
 		methods: {
 			// 获取要领取的优惠券
 			getCoupon (code) {
+				this.status = 'loading'
 				couponData({couponCode:code}).then(res=>{
+					this.status = 'onmore'
 					if (res.status == 200) {
 						this.couponInfo = res.data
+						this.isDisabled = false
 					} else {
 						this.couponInfo = null
+						this.isDisabled = true
+						this.noDataText = res.message
 					}
 				})
 			},
 			// 确认领取优惠券
 			handleSubmit () {
-				let couponCode = this.$store.state.vuex_couponCode
-				receivesCoupon({couponCode:couponCode}).then(res =>{
+				let params= {
+					wechatCustomerType: this.$store.state.vuex_couponInfo.customerType,
+					storeId: this.$store.state.vuex_couponInfo.storeId,
+					code: this.$store.state.vuex_couponInfo.couponCode
+				}
+				receivesCoupon(params).then(res =>{
 					if (res.status == 200) {
 						this.toashMsg('领取成功')
 						setTimeout(()=>{
@@ -86,9 +106,9 @@
 		width: 100%;
 		height: 100%;
 		padding: 25rpx;
-		.handleSubmit{
-			width: 80%;
-			margin-top: 40%;
+		.u-size-default.data-v-3bf2dba7 {
+			margin-top: 100px;
+			width: 60%;
 		}
 	}
 	.coupon-box.diabled{

+ 9 - 3
pages/order/order.vue

@@ -42,11 +42,17 @@
 				orderStatusList: []
 			}
 		},
-		onLoad() {
-			this.getList()
-			this.orderStatusList = this.$store.state.vuex_payStatus
+		onShow() {
+			this.pageInit()
 		},
 		methods: {
+			pageInit () {
+				this.pageNo = 1
+				this.count = 0
+				this.list = []
+				this.orderStatusList = this.$store.state.vuex_payStatus
+				this.getList()
+			},
 			getOptionName (list,val) {
 			  let p = list.find((item) => {
 				  return item.code == val

+ 103 - 72
pages/order/orderDetail.vue

@@ -1,54 +1,59 @@
 <template>
 	<view class="order-pages">
-		<u-cell-group>
-			<u-cell-item title="订单状态" :arrow="false">
-				<view slot="right-icon">
-					<text :class="orderInfo.orderStatus">{{getOptionName(orderStatusList,orderInfo?orderInfo.orderStatus:'')}}</text>
+		<view class="order-info">
+			<u-cell-group>
+				<u-cell-item title="订单状态" :arrow="false">
+					<view slot="right-icon">
+						<text :class="orderInfo.orderStatus">{{getOptionName(orderStatusList,orderInfo?orderInfo.orderStatus:'')}}</text>
+					</view>
+				</u-cell-item>
+				<u-cell-item title="订单编号" :arrow="false" >
+					{{orderInfo.orderNo}}
+				</u-cell-item>
+				<u-cell-item title="创建时间" :arrow="false" >
+					{{orderInfo.orderTime}}
+				</u-cell-item>
+				<u-cell-item title="服务网点" :arrow="false">
+					{{orderInfo.storeName}}
+				</u-cell-item>
+				<u-cell-item title="服务项目" :arrow="false">
+					{{orderInfo.itemName}}
+				</u-cell-item>
+				<u-cell-item title="手机号" :arrow="false">
+					{{orderInfo.customerMobile}}
+				</u-cell-item>
+				<u-cell-item title="支付方式" :arrow="false">
+					{{orderInfo.payType}}
+				</u-cell-item>
+				<u-cell-item title="应付金额" :arrow="false">
+					¥{{orderInfo.payableAmount}}
+				</u-cell-item>
+				<u-cell-item title="优惠价" :arrow="false">
+					{{orderInfo.couponAmount?orderInfo.couponAmount:0}}
+				</u-cell-item>
+				<u-cell-item title="实付金额" :arrow="false">
+					<text class="order-price">¥{{orderInfo.payStatus=='paid' ? orderInfo.paymentAmount : 0}}</text>
+				</u-cell-item>
+			</u-cell-group>
+			<view class="order-photo">
+				<view v-if="orderInfo.beginImage">
+					<view>洗车前</view>
+					<u-image width="100%" height="400rpx" :src="orderInfo.beginImage"></u-image>
+				</view>
+				<view v-if="orderInfo.endImage">
+					<view>洗车后</view>
+					<u-image width="100%" height="400rpx" :src="orderInfo.endImage"></u-image>
 				</view>
-			</u-cell-item>
-			<u-cell-item title="订单编号" :arrow="false" >
-				{{orderInfo.orderNo}}
-			</u-cell-item>
-			<u-cell-item title="创建时间" :arrow="false" >
-				{{orderInfo.orderTime}}
-			</u-cell-item>
-			<u-cell-item title="服务网点" :arrow="false">
-				{{orderInfo.storeName}}
-			</u-cell-item>
-			<u-cell-item title="服务项目" :arrow="false">
-				{{orderInfo.itemName}}
-			</u-cell-item>
-			<u-cell-item title="手机号" :arrow="false">
-				{{orderInfo.customerMobile}}
-			</u-cell-item>
-			<u-cell-item title="支付方式" :arrow="false">
-				{{orderInfo.payType}}
-			</u-cell-item>
-			<u-cell-item title="应付金额" :arrow="false">
-				¥{{orderInfo.payableAmount}}
-			</u-cell-item>
-			<u-cell-item title="优惠价" :arrow="false">
-				{{orderInfo.couponAmount?orderInfo.couponAmount:0}}
-			</u-cell-item>
-			<u-cell-item title="实付金额" :arrow="false">
-				<text class="order-price">¥{{orderInfo.payStatus=='已支付' ? orderInfo.paymentAmount : 0}}</text>
-			</u-cell-item>
-		</u-cell-group>
-		<view class="order-photo">
-			<view v-if="orderInfo.beginImage">
-				<view>洗车前</view>
-				<u-image width="100%" height="400rpx" :src="orderInfo.beginImage"></u-image>
-			</view>
-			<view v-if="orderInfo.endImage">
-				<view>洗车后</view>
-				<u-image width="100%" height="400rpx" :src="orderInfo.endImage"></u-image>
 			</view>
 		</view>
+		<view v-if="orderInfo.orderStatus=='UN_PAY'" class="footer">
+			<u-button @click="cancleOrder" type="error" plain>取消订单</u-button>
+		</view>
 	</view>
 </template>
 
 <script>
-	import {orderDetail} from '@/api/order.js'
+	import {orderDetail, cancleOrder} from '@/api/order.js'
 	import {getLookUpDatas} from '@/api/data.js'
 	export default{
 		data() {
@@ -85,45 +90,71 @@
 					} else {
 					}
 				})
-			}
+			},
+			// 取消订单
+			cancleOrder (){
+				cancleOrder({id:this.orderInfo.id}).then(res=>{
+					if (res.status==200) {
+						this.toashMsg(res.message)
+						setTimeout(()=>{
+							uni.navigateBack()
+						},500)
+					}
+				})
+			} 
 		},
 	}
 </script>
 
 <style lang="scss">
+	page {
+		height: 100%;
+	}
 	.order-pages{
 		width: 100%;
-		.u-cell{
-			padding:10rpx 32rpx;
-		}
-		.order-photo{
-			padding:0 30rpx;
-			>view{
-				text-align: center;
-				padding: 20rpx;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		.order-info{
+			width: 100%;
+			flex: 1;
+			overflow-y: scroll;
+			.u-cell{
+				padding:10rpx 32rpx;
+			}
+			.order-photo{
+				padding:0 30rpx;
+				>view{
+					text-align: center;
+					padding: 20rpx;
+				}
+			}
+			.FINISHED{
+				color: #00aa00;
+			}
+			.UN_PAY{
+				color: #ff0000;
+			}
+			.CANCELED{
+				color: #7e7b88;
+			}
+			.PAID{
+				color: #00aaff;
+			}
+			.REFUNDING{
+				color: #00557f;
+			}
+			.REFUNDED{
+				color: #005500;
+			}
+			.order-price{
+				font-size: 36rpx;
+				color: red;
 			}
 		}
-		.FINISHED{
-			color: #00aa00;
-		}
-		.UN_PAY{
-			color: #ff0000;
-		}
-		.CANCELED{
-			color: #7e7b88;
-		}
-		.PAID{
-			color: #00aaff;
-		}
-		.REFUNDING{
-			color: #00557f;
-		}
-		.REFUNDED{
-			color: #005500;
-		}
-		.order-price{
-			font-size: 36rpx;
-			color: red;
+		.footer{
+			padding: 20rpx;
 		}
+		
 	}
 </style>

+ 6 - 2
store/index.js

@@ -72,8 +72,12 @@ const store = new Vuex.Store({
 		// 设备运行页面的计时器
 		vuex_orderDjs: 0, // 订单完成倒计时
 		vuex_workStep: 0, // 进度条步骤
-		// 优惠券码
-		vuex_couponCode: ''
+		// 优惠券相关信息
+		vuex_couponInfo: {
+			storeId: '', // 网点id
+			customerType: '', // 客户类型
+			couponCode: '' // 优惠券码
+		}
 	},
 	mutations: {
 		$uStore(state, payload) {