zh_order_food_xcx/pages/index/index.vue

<template>
  <view class="flex-common-css">
    <Nav :leftShow='false' :customNav='true' title="" bgckgroundBox='#EF1F0C'></Nav>
    <view class="flex-1 flex-direction iPhone-bottom box-border-box">
      <image class="qd-bg" src="@/static/img/order-food/qd-bg.png" mode=""></image>
      <view class="order-food-box p-0-32 box-border-box">
        <view class="order-food p-32 box-border-box bgc-f b-rad-24" @click="login()">
          <view class="b-FFD7CC bc-FFEDE9-FFF1EE b-rad-24 p-20-32 box-border-box align-items-center flex-justify-space">
            <view class="flex-direction">
              <view class="align-items-center mb-8">
                <view class="fs-36 fc-3 fw-600">
                  堂食扫码点餐
                </view>
                <image class="right-h" src="@/static/img/order-food/right-h.png" mode=""></image>
              </view>
              <view class="fs-28 fc-9">
                自助下单方便快捷
              </view>
            </view>
            <image class="zh-img" src="@/static/img/order-food/zh-img.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    appletLogin
  } from "@/api/member";
  import tools from "@/service/tools";

  export default {
    components: {},
    data() {
      return {}
    },
    onLoad(data) {
      this.login()
    },
    mounted() {},
    methods: {
      login() {
        uni.login({
          provider: "weixin",
          success: (loginRes) => {
            this.appletLogin(loginRes.code);
          },
          fail: (loginRes) => {
            this.isAjax = false;
            tools.error("获取授权信息失败");
          },
        });
      },
      appletLogin(code) {
        appletLogin({
          'code': code
        }).then(res => {
          this.goToUrl()
        })
      },
      goToUrl(shop_id) {
        uni.reLaunch({
          url: '/pages-takeout/shop?shop_id=' + shop_id
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .qd-bg {
    width: 100%;
    height: 696rpx;
  }

  .order-food-box {
    position: relative;
  }

  .order-food {
    width: calc(100% - 64rpx);
    position: absolute;
    left: 32rpx;
    top: -90rpx;
  }

  .bc-FFEDE9-FFF1EE {
    background: linear-gradient(90deg, #FFEDE9 0%, #FFF1EE 100%);
  }

  .zh-img {
    width: 148rpx;
    height: 148rpx;
  }

  .right-h {
    width: 40rpx;
    height: 40rpx;
  }
</style>