【Add】积分兑换落地页轮播功能

pages.json

@@ -114,10 +114,16 @@
         "navigationBarTitleText": "兑换记录"
       }
     },
+	{
+	  "path": "pages/score/completion",
+	  "style": {
+	    "navigationBarTitleText": "兑换结果"
+	  }
+	},
     {
       "path": "pages/orders/completion",
       "style": {
-        "navigationBarTitleText": "下单成功"
+        "navigationBarTitleText": "下单结果"
       }
     },
     {

pages/score/completion.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="order_completion_box">
+    <view class="order_completion_title">
+      <view class="completion_icon">
+        <uni-icons class="icon" type="checkmarkempty" size="40" color="#eeeeee"></uni-icons>
+      </view>
+      <view class="product_title" > {{productInfo.name}}</view>
+    </view>
+    <view class="nav_button">
+      <view class="nav_order" @click="navOrder()">
+        <text>查看订单</text>
+      </view>
+      <view class="nav_home" @click="navHome()">
+        <text>返回积分页面</text>
+      </view>
+    </view>
+    <view class="lotteryinfo" v-if="this.islotteryinfo">
+      <view class="banner_list">
+        <swiper class="banner_swiper" :autoplay="true">
+          <swiper-item v-for="(item, index) in scoreBannerList" :key="index">
+            <image class="image" :src="item.thumb" show-menu-by-longpress @click="navLottery(item.link_url)"></image>
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //轮播图
+      scoreBannerList: [],
+      //是否展示抽奖区域
+      islotteryinfo: 0,
+      //报单成功的商品信息
+      productInfo:{
+      	id:0,
+      	name:"",
+      	score:0,
+      	spec:"",
+      	stock:0,
+      	thumb:"",
+      	description:"",
+      }
+    };
+  },
+  onLoad(option) {
+    //接受参数
+    if( option.name ) this.productInfo.name = option.name;
+  },
+  onShow() {
+    this.$http.request("/api/score_banner/get_list").then((re) => {
+      if (re.code === "success") {
+        this.scoreBannerList = re.data;
+        this.islotteryinfo = this.scoreBannerList.length;
+      }
+    });
+  },
+  methods: {
+    navOrder() {
+      uni.redirectTo({
+        url: "/pages/score/orders",
+      });
+    },
+    navHome() {
+      uni.switchTab({
+        url: "/pages/score/index",
+      });
+    },
+    navLottery(url) {
+      // 没有路径，不跳转
+      if (!url) return;
+      // 判断是不是小程序链接
+      if (url.includes("http")) {
+        // 转码
+        let link_url = encodeURIComponent(url);
+        // 跳转到webview
+        uni.redirectTo({
+          url: `/pages/webview/index?link_url=${link_url}`,
+        });
+      } else {
+        // 跳转到webview
+        uni.navigateTo({
+          url: url,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.order_completion_box {
+  display: block;
+  padding-bottom: 60rpx;
+  .order_completion_title {
+    display: block;
+    width: 630rpx;
+    margin: 20rpx auto;
+    line-height: 2;
+    .completion_icon {
+      width: 150rpx;
+      height: 150rpx;
+      margin: 30rpx auto;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #e15c21;
+    }
+    .product_title {
+      text-align: center;
+      font-size: 24rpx;
+    }
+  }
+  .nav_button {
+    width: 630rpx;
+    display: block;
+    overflow: hidden;
+    margin: 20rpx auto;
+    line-height: 100rpx;
+    .nav_order {
+      text-align: center;
+      margin: 30rpx 0rpx;
+      border-radius: 60rpx;
+      background-color: #e15c21;
+      text {
+        color: #eeeeee;
+      }
+    }
+    .nav_home {
+      text-align: center;
+      border: 2rpx solid #6ca69e;
+      margin: 30rpx 0rpx;
+      border-radius: 60rpx;
+    }
+  }
+  .lotteryinfo {
+    width: 680rpx;
+    overflow: hidden;
+    margin: 50rpx auto;
+    .lottery_title {
+      display: block;
+      height: 60rpx;
+      font-size: 32rpx;
+      line-height: 60rpx;
+      text-align: center;
+    }
+    .banner_list {
+      display: block;
+      width: 680rpx;
+      height: 382rpx;
+      line-height: 382rpx;
+      text-align: center;
+      .banner_swiper {
+        display: block;
+        width: 680rpx;
+        height: 382rpx;
+        line-height: 382rpx;
+        text-align: center;
+        .image {
+          width: 680rpx;
+          height: 382rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/score/product.vue

@@ -240,7 +240,8 @@
 						// 关闭弹窗
 						this.$refs.specPopup.close();
 						// 跳转到订单列表
-						uni.navigateTo({url:"/pages/score/orders"});
+						let name 	= this.productInfo.name;
+						uni.navigateTo({url:`/pages/score/completion?name=${name}`});
 						return ;
 					}else{
 						uni.showModal({title:re.msg,showCancel:false});