<template>
  <view class="content">
    <view class="info">
      <div class="cro">
        <div class="cro_left_bottom"></div>
        <div class="cro_right_bottom"></div>
        <view class="img">
          <u-image width="100%" height="580rpx" :src="info.pic"></u-image>
          <view class="" style="font-size: 36rpx;color: #333333;margin-top: 40rpx;">红色西柚新鲜砧板水果原产地加拿大美食新鲜爆汁5斤</view>
        </view>
      </div>
      <div class="cro cro2">
        <div class="cro_left_top"></div>
        <div class="cro_right_top"></div>
        <view class="img">
          <view class="u-content"><u-parse :html="info.note"></u-parse></view>
        </view>
      </div>
      <!-- <view class="" @click="show = true">设置城市</view>
      <view class="">{{ val }}</view>
      <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker> -->
    </view>
    <view class="" style="position: absolute;bottom: 0;width: 100%;">
      <u-button type="error" style="background: #FF4900;border-radius: 0;height: 100rpx;font-size: 36rpx;color: #FFFEFD;">填写收货地址</u-button>
    </view>
  </view>
</template>

<script>
import { getInfo } from '@/common/api.js'
export default {
  data() {
    return {
      info: {},
      options: {},
      show: false,
      val: '',
      arrCode: []
    }
  },
  onLoad(options) {
    if (!options.id) return uni.$showMsg('请扫描二维码访问')
    this.options = options
    getInfo(options).then(({ data }) => {
      this.info = data
    })
  },
  methods: {
    change(e) {
      this.val = e.province.label + e.city.label + e.area.label
      this.arrCode = [e.province.value, e.city.value, e.area.value]
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 100rpx);
  background: url(../../static/bgi.png) no-repeat;
  background-size: 100% 100%;
  .info {
    padding: 52rpx 25rpx 34rpx;
    .cro {
      width: 100%;
      background-color: #ffffff;
      position: relative;
      border-radius: 15px 15px 0 0;
      .img {
        padding: 40rpx;
        .u-image {
          border-radius: 15px !important;
          overflow: hidden !important;
        }
      }
    }
    .cro2 {
      width: 100%;
      height: 100px;
      border-top: 1px dashed #dedede;
      background-color: #ffffff;
      position: relative;
      border-radius: 0 0 15px 15px;
    }
    .cro_left_top,
    .cro_right_top,
    .cro_left_bottom,
    .cro_right_bottom {
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: 1;
      background-color: #fc843f;
    }
    .cro_left_top {
      top: -1px;
      left: -1px;
      border-radius: 0 0 10px 0;
    }
    .cro_right_top {
      top: -1px;
      right: -1px;
      background-color: #f99954;
      border-radius: 0 0 0 10px;
    }
    .cro_left_bottom {
      left: -1px;
      bottom: -1px;
      border-radius: 0 10px 0 0;
    }
    .cro_right_bottom {
      right: -1px;
      bottom: -1px;
      background-color: #f99954;
      border-radius: 10px 0 0 0;
    }
  }
}
</style>
