首页核销，扫一扫，订单核销销

src/pages/components/mask.vue

@@ -5,11 +5,12 @@
     <view class="content">
       <view class="header">
         <view class="title">订单兑换</view>
-        <image src="../../static/images/closeicon.png" class="iconclose" />
+        <image src="../../static/images/closeicon.png" class="iconclose" @tap="closeMask" />
       </view>
       <view class="content-warp">
         <view class="message">
-          <image src="../../static/images/sureicon.png" class="iocn"></image>
+          <image v-if="iconShow" src="../../static/images/sureicon.png" class="iocn"></image>
+          <icon v-if="!iconShow" class="iocn" type="warn" size="40"/>
           <view class="txt">{{ txt }}</view>
         </view>
         
@@ -30,6 +31,10 @@ export default {
       type: String,
       default: '该订单已核销',
     },
+    iconShow: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     //这里存放数据
@@ -43,6 +48,9 @@ export default {
     sureconver () {
       this.$emit('isSureConver', true)
     },
+    closeMask() {
+      this.$emit('isSureConver', false)
+    },
 
     // 禁止页面滚动
     moveHandle() {}

src/pages/index/conversion.vue

@@ -1,219 +1,273 @@
 <!-- 订单兑换 -->
 <template>
-	<view class="conversion">
-		<Header :title="title"></Header>
-		<view class="" style="height: 94upx;"></view>
-		<view class="order-detail-content">
-			<view class="order-message">
-				<view class="title">订单信息</view>
-				<view class="ordername titlebar"
-					>产品名称：<text class="txt">观光车</text></view
-				>
-				<view class="shopname titlebar"
-					>店铺名称：<text class="txt">观光车</text></view
-				>
-				<view class="waternum titlebar"
-					>流水号：<text class="txt">观光车</text></view
-				>
-				<view class="ordernum titlebar"
-					>订单号：<text class="txt">观光车</text></view
-				>
-				<view class="phonenum titlebar"
-					>手机号：<text class="txt">观光车</text></view
-				>
-				<view class="goindate titlebar"
-					>入园日期：<text class="txt">观光车</text></view
-				>
-				<view class="price titlebar"
-					>产品价格：<text class="txt">观光车</text></view
-				>
-				<view class="buynum titlebar"
-					>购买数量：<text class="txt">观光车</text></view
-				>
-				<view class="palytime titlebar"
-					>游玩时间：<text class="txt">观光车</text></view
-				>
-				<view class="orderstatus titlebar"
-					>订单状态：<text class="txt">退款中</text>
-				</view>
-				<view class="tourist">
-					<view class="title">游客信息</view>
-					<view class="name touristbar"
-						>姓名：<text class="txt">猪猪虾</text></view
-					>
-					<view class="idcard touristbar"
-						>身份证：<text class="txt">500233199308278293</text></view
-					>
-				</view>
-			</view>
-			<view class="paymessage">
-				<view class="title">支付信息</view>
-				<view class="shoppric">产品价格:<text class="money">￥280</text></view>
-				<view class="realitypirc"
-					>实付金额:<text class="money">￥280</text></view
-				>
-			</view>
-			<view class="btns">
-				<view class="btn cancel">取消兑换</view>
-				<view class="btn convert" @tap="sureconvert">确认兑换</view>
-			</view>
-		</view>
-
-		<mask :txt="masktxt" v-if="isShowMask" @isSureConver="isSureConver"></mask>
-
-		<rf-loading v-if="loading"></rf-loading>
-	</view>
+  <view class="conversion">
+    <Header :title="title"></Header>
+    <view class="" style="height: 94upx;"></view>
+    <view class="order-detail-content">
+      <view class="order-message">
+        <view class="title">订单信息</view>
+        <view class="ordername titlebar"
+          >产品名称：<text class="txt">{{ orderDetail.goodsName }}</text></view
+        >
+        <view class="shopname titlebar"
+          >店铺名称：<text class="txt">{{ orderDetail.shopName }}</text></view
+        >
+        <view class="waternum titlebar"
+          >流水号：<text class="txt">观光车</text></view
+        >
+        <view class="ordernum titlebar"
+          >订单号：<text class="txt">{{ orderDetail.ordersNo }}</text></view
+        >
+
+        <view class="phonenum titlebar"
+          >手机号：<text class="txt">{{ orderDetail.buyPhone }}</text></view
+        >
+        <view class="goindate titlebar"
+          >入园日期：<text class="txt">{{ orderDetail.orderTime }}</text></view
+        >
+        <view class="price titlebar"
+          >产品价格：<text class="txt">{{
+            orderDetail.ordersPrice
+          }}</text></view
+        >
+        <view class="buynum titlebar"
+          >购买数量：<text class="txt">{{
+            orderDetail.playManList.length
+          }}</text></view
+        >
+        <view class="palytime titlebar"
+          >游玩时间：<text class="txt">{{ orderDetail.payTime }}</text></view
+        >
+        <view class="orderstatus titlebar"
+          >订单状态：<text class="txt">{{ orderDetail.statusName }}</text>
+        </view>
+        <view class="tourist">
+          <view class="title">游客信息</view>
+          <view
+            class="tourist-warp"
+            v-for="(item, index) in orderDetail.playManList"
+            :key="index"
+          >
+            <view class="name touristbar"
+              >姓名：<text class="txt">{{ item.name }}</text></view
+            >
+            <view class="idcard touristbar"
+              >身份证：<text class="txt">{{ item.idcard }}</text></view
+            >
+          </view>
+        </view>
+      </view>
+      <view class="paymessage">
+        <view class="title">支付信息</view>
+        <view class="shoppric"
+          >产品价格:<text class="money"
+            >￥{{ orderDetail.ordersPrice }}</text
+          ></view
+        >
+        <view class="realitypirc"
+          >实付金额:<text class="money"
+            >￥{{ orderDetail.ordersPrice }}</text
+          ></view
+        >
+      </view>
+      <view class="btns">
+        <view class="btn cancel" @tap="cancelChange">取消兑换</view>
+        <view class="btn convert" @tap="sureconvert">确认兑换</view>
+      </view>
+    </view>
+
+    <mask
+      :txt="masktxt"
+      :iconShow="iconShow"
+      v-if="isShowMask"
+      @isSureConver="isSureConver"
+    ></mask>
+
+    <rf-loading v-if="loading"></rf-loading>
+  </view>
 </template>
 
 <script>
 import Header from '../components/header.vue';
 import mask from '../components/mask';
 export default {
-	components: {
-		Header,
-		mask
-	},
-	data() {
-		return {
-			isShowMask: false,
-			title: '订单兑换',
-			loading: false,
-			masktxt: '是的'
-		};
-	},
-	onLoad() {},
-	methods: {
-		//  确认兑换
-		sureconvert() {
-			this.masktxt = '兑换成功!';
-			this.isShowMask = true;
-		},
-
-		// 监听遮罩层行为
-		isSureConver(e) {
-			if (e) {
-				console.log(e);
+  components: {
+    Header,
+    mask,
+  },
+  data() {
+    return {
+      title: '订单兑换',
+      loading: false,
+
+      isShowMask: false,
+      iconShow: false,
+      masktxt: '是的',
+
+      orderDetail: uni.getStorageSync('orderDetail'),
+    };
+  },
+  onLoad() {
+    console.log(this.orderDetail);
+  },
+  methods: {
+    // 取消兑换
+    cancelChange() {
+      this.masktxt = '已取消兑换';
+      this.iconShow = false;
+      this.isShowMask = true;
+    },
+
+    //  确认兑换
+    sureconvert() {
+      this.iconShow = true;
+      this.masktxt = '兑换成功!';
+      this.isShowMask = true;
+    },
+
+    // 监听遮罩层行为
+    isSureConver(e) {
+      console.log(e);
+      if (e) {
+        this.$http
+          .get('/orders/verOrdersByNo/' + this.orderDetail.ordersNo)
+          .then((res) => {
+						if (res.data === 1) {
+							this.$mHelper.toast('核销成功！')
+						} else {
+							this.$mHelper.toast('订单异常,核销失败！')
+						}
+          });
+      } else {
+				this.$mHelper.toast('已取消核销该订单')
 			}
-			this.isShowMask = false;
-			this.$mRouter.back()
-		}
-	}
+      this.isShowMask = false;
+      this.$mRouter.back();
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .conversion {
-	.order-detail-content {
-		padding: 24upx 32upx 44upx;
+  .order-detail-content {
+    padding: 24upx 32upx 44upx;
 
-		.order-message {
-			background-color: #ffffff;
-			padding: 31upx 33upx 35upx;
-			border-radius: 17upx;
+    .order-message {
+      background-color: #ffffff;
+      padding: 31upx 33upx 35upx;
+      border-radius: 17upx;
 
-			.title {
-				font-size: 34upx;
-				color: #111111;
-			}
+      .title {
+        font-size: 34upx;
+        color: #111111;
+      }
 
-			.titlebar {
-				font-size: 28upx;
-				color: #666666;
-				letter-spacing: 2upx;
-				margin-top: 12upx;
+      .titlebar {
+        font-size: 28upx;
+        color: #666666;
+        letter-spacing: 2upx;
+        margin-top: 12upx;
 
-				.txt {
-					margin-left: 10upx;
-					font-size: 28upx;
-				}
-			}
+        .txt {
+          margin-left: 10upx;
+          font-size: 28upx;
+        }
+      }
 
-			.ordername {
-				margin-top: 15upx;
-			}
+      .ordername {
+        margin-top: 15upx;
+      }
 
-			.orderstatus {
-				height: 98upx;
-				line-height: 98upx;
-				border-top: 1px solid #e1e1e1;
-				border-bottom: 1px solid #e1e1e1;
-			}
+      .orderstatus {
+        height: 98upx;
+        line-height: 98upx;
+        border-top: 1px solid #e1e1e1;
+        border-bottom: 1px solid #e1e1e1;
+      }
 
-			.tourist {
-				.title {
-					padding: 15upx 0;
-					font-size: 34upx;
-					color: #111111;
-				}
-
-				.touristbar {
-					color: #666666;
-				}
-
-				.txt {
-					margin-left: 10upx;
-					font-size: 28upx;
-				}
-			}
-		}
+      .tourist {
+        .tourist-warp {
+          padding-bottom: 20upx;
+          border-bottom: 1px solid #e1e1e1;
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+        .title {
+          padding: 15upx 0;
+          font-size: 34upx;
+          color: #111111;
+        }
 
-		.paymessage {
-			background-color: #ffffff;
-			padding: 31upx 33upx 35upx;
-			border-radius: 17upx;
-			margin-top: 24upx;
+        .touristbar {
+          color: #666666;
+        }
 
-			.title {
-				font-size: 34upx;
-				color: #111111;
-			}
-			.shoppric {
-				color: #666666;
-				margin-top: 20upx;
-				.money {
-					margin-left: 10upx;
-				}
-			}
+        .txt {
+          margin-left: 10upx;
+          font-size: 28upx;
+        }
+      }
+    }
 
-			.realitypirc {
-				color: #666666;
-				font-size: 28upx;
-				margin-top: 20upx;
-				border-top: 1upx solid #e1e1e1;
-				padding-top: 20upx;
-				.money {
-					margin-left: 10upx;
-					color: #fa4141;
-				}
-			}
-		}
-
-		.btns {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-top: 40upx;
-			.btn {
-				width: 321upx;
-				height: 92upx;
-				box-sizing: border-box;
-				text-align: center;
-				line-height: 92upx;
-				font-size: 38upx;
-				letter-spacing: 2upx;
-				color: #7a7c7c;
-				margin-right: 31upx;
-				background-color: #fff;
-				border: 1px solid #e2e2e2;
-				border-radius: 10upx;
-			}
-			.convert {
-				margin-right: 0;
-				background-color: #a95cff;
-				color: #ffffff;
-				border: none;
-			}
-		}
-	}
+    .paymessage {
+      background-color: #ffffff;
+      padding: 31upx 33upx 35upx;
+      border-radius: 17upx;
+      margin-top: 24upx;
+
+      .title {
+        font-size: 34upx;
+        color: #111111;
+      }
+      .shoppric {
+        color: #666666;
+        margin-top: 20upx;
+        .money {
+          margin-left: 10upx;
+        }
+      }
+
+      .realitypirc {
+        color: #666666;
+        font-size: 28upx;
+        margin-top: 20upx;
+        border-top: 1upx solid #e1e1e1;
+        padding-top: 20upx;
+        .money {
+          margin-left: 10upx;
+          color: #fa4141;
+        }
+      }
+    }
+
+    .btns {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40upx;
+      .btn {
+        width: 321upx;
+        height: 92upx;
+        box-sizing: border-box;
+        text-align: center;
+        line-height: 92upx;
+        font-size: 38upx;
+        letter-spacing: 2upx;
+        color: #7a7c7c;
+        margin-right: 31upx;
+        background-color: #fff;
+        border: 1px solid #e2e2e2;
+        border-radius: 10upx;
+      }
+      .convert {
+        margin-right: 0;
+        background-color: #a95cff;
+        color: #ffffff;
+        border: none;
+      }
+    }
+  }
 }
 </style>

src/pages/index/index.vue

@@ -40,10 +40,9 @@
      
       <!-- 输入框 -->
       <view class="input-code">
-        <input type="text" v-model="ordernum" placeholder-style="color:#b8bbbb;font-size:28upx;" class="code" placeholder="请输入验证码核验">
+        <input type="text" v-model="ordernum" maxlength="-1" placeholder-style="color:#b8bbbb;font-size:28upx;" class="code" placeholder="请输入验证码核验">
         <view class="search" @tap="searchOrder">搜索</view>
       </view>
-
 			<view class="index-content">
 				<!-- 关键指数 -->
 				<view class="exponent">
@@ -257,13 +256,14 @@
 				<view class="" style="height: 40upx;"></view>
 			</view>
 		</view>
-
+    <mask :txt="masktxt" :iconShow="iconShow" v-if="isShowMask" @isSureConver="isSureConver"></mask>
 		<rf-loading v-if="loading"></rf-loading>
 	</view>
 </template>
 <script>
 import uCharts from '../../js_sdk/u-charts/u-charts/u-charts';
 import moment from '@/common/moment';
+import mask from '../components/mask'
 
 let _self;
 let canvaLineA = null;
@@ -272,9 +272,19 @@ let shopSellLine = null;
 let shopMoneyLine = null;
 export default {
   name: 'Header',
+  components: {
+    mask
+  },
   data() {
     return {
       loading: true,
+      
+      // 遮罩层
+      isShowMask: false,
+      iconShow: false,
+      masktxt:'',
+
+
       shopArray: [{ name: '全部', id: 0 }],
       shopID: 0,
       index: 0,
@@ -296,6 +306,9 @@ export default {
 
       pixelRatio: 1, // 像素比
       ordernum: '', // 订单号
+
+      orderMessage: {},
+
       today: moment().format('YYYY-MM-DD'),
 
       // 数据还可以优化
@@ -356,25 +369,49 @@ export default {
     this.loading = false;
   },
   methods: {
-
-    // 搜索
-    orderByNum() {
-      this.isShowList = false;
-      const pattern = /^1[345678]\d{9}$/;
-      let isphone = pattern.test(this.orderbynumber);
-      console.log(isphone);
-      console.log(this.orderbynumber);
-      this.$http
-        .get(`/orders/getOrdersByNo/${this.orderbynumber}`)
-        .then((res) => {
-          if (res.data) {
-            this.orderMessage = res.data;
-            this.$mRouter.push({ route: '/pages/order/orderdetail' });
+    // 监听遮罩层行为
+		isSureConver(e) {
+			this.isShowMask = false;
+			this.$mRouter.back()
+    },
+     // 扫码订单
+    scanCode() {
+      // 允许从相机和相册扫码
+      uni.scanCode({
+        success: function (res) {
+          _self.ordernum = res.result
+          _self.searchOrder()
+        },
+      });
+    },
+     // 搜索框根据订单号查询订单
+    searchOrder() {
+      if (this.ordernum === '') {
+        this.$mHelper.toast('请输入正确的订单号进行查询，不能为空！')
+        return
+      }
+      this.$http.get('/orders/getOrdersByNo/'+this.ordernum).then(res=>{
+        if (res.code === 200 ) {
+          this.ordernum = ''
+          if (res.data === "该订单已失效！") {
+            this.iconShow = false
+            this.isShowMask = true
+            this.masktxt = res.data
+          } else if (res.data === "未查询到该订单，请输入正确的核销码！") {
+            this.iconShow = false
+            this.isShowMask = true
+            this.masktxt = "未查询到该订单，请重新输入！"
+          } else {
+            uni.setStorageSync('orderDetail', res.data);
+            this.$mRouter.push({ route: '/pages/index/conversion' });
           }
-        })
-        .catch((error) => {
-          this.$mHelper.toast('请输入有效的手机号或者订单号');
-        });
+          this.orderMessage = res.data
+        }
+      
+      }).catch( error=>{
+        this.ordernum = ''
+      })
+      
     },
 
     // 选择商铺
@@ -481,30 +518,9 @@ export default {
         });
     },
 
-    // 扫码订单
-    scanCode() {
-      // 允许从相机和相册扫码
-      uni.scanCode({
-        success: function (res) {
-          console.log('条码类型：' + res.scanType);
-          console.log('条码内容：' + res.result);
-        },
-      });
-    },
+   
 
-    // 搜索订单
-    searchOrder() {
-      // 判断该订单是否兑换，存在等状态，若存在且未使用（两个状态），则跳转订单兑换页面
-      let num = this.ordernum
-      console.log(num);
-      this.$http.get('/orders/getById/'+this.ordernum).then(res=>{
-        console.log(res);
-        if (res.code === 200) {
-          
-        }
-      })
-      // this.$mRouter.push({ route: '/pages/index/conversion' });
-    },
+   
 
     // 商品销售走势
     async shopSellTrend() {

src/utils/request/request.js

@@ -12,7 +12,7 @@ export default class Request {
     baseUrl: '',
     header: {
       'content-type': 'application/json',
-      'X-TOKEN': uni.getStorageSync('user') || {}
+      'X-TOKEN': uni.getStorageSync('user')
     },
     method: 'GET',
     dataType: 'json',