kailin_mp/pages/orders/completion.vue

<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" v-for="(item, index) in productTitleInfo" :key="index"> {{ item.name }} {{ item.spec }} 特惠价 ￥{{ item.price }} </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="lottery_title">恭喜您预约成功，诚邀您参与以下活动</view>
      <view class="banner_list">
        <swiper class="banner_swiper" :autoplay="true">
          <swiper-item v-for="(item, index) in orderBannerList" :key="index">
            <image class="image" :src="item.thumb" @click="navLottery(item.link_url)"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <uni-popup ref="addFollow" type="center" class="center_popup">
      <FollowPopup :closePopup="closePopup" />
    </uni-popup>
  </view>
</template>

<script>
import FollowPopup from "@/components/FollowPopup/FollowPopup.vue";
export default {
  components: { FollowPopup },
  data() {
    return {
      //轮播图
      orderBannerList: [],
      //是否展示抽奖区域
      islotteryinfo: 0,
      //报单成功的商品信息
      productTitleInfo: [],
    };
  },
  onLoad(option) {
    //接受参数
    let productInfo = option.params;

    if (productInfo) {
      //解密参数
      productInfo = decodeURIComponent(productInfo);
      //转成js数组对象
      productInfo = JSON.parse(productInfo);
      this.productTitleInfo = productInfo;
    }
  },
  onShow() {
    this.$http.request("/api/orders_banner/get_list").then((re) => {
      if (re.code === "success") {
        this.orderBannerList = re.data;
        this.islotteryinfo = this.orderBannerList.length;
      }
    });
    //如果已选城市且没有添加客服每天弹窗一次
    if (this.$checkAccess.getFollowQrcode()) {
      this.$refs.addFollow.open("center");
    }
  },
  methods: {
    closePopup() {
      this.$refs.addFollow.close();
    },
    navOrder() {
      uni.redirectTo({
        url: "/pages/orders/index",
      });
    },
    navHome() {
      uni.switchTab({
        url: "/pages/index/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>