<template>
  <view class="box">
    <!-- 定位 -->
    <view class="location">
      <view class="location-left">
        <view><uni-icons type="location" size="20"></uni-icons></view>
        <view>暂未添加门店或定位未授权</view>
      </view>
      <view class="location-right">
        <view>切换</view>
        <view><uni-icons type="right" size="20"></uni-icons></view>
      </view>
    </view>
    <!-- 文字 -->
    <view class="text">*订水之前需要先购买水票，订水后配送师傅会根据订单先后安排配送，为不耽误您的使用还请提前2个小时订水下单</view>
    <!-- 卡片 -->
    <view class="card">
      <view class="card-up">请选择您要订制的产品</view>
      <view v-for="(item, index) in commodity" :key="index" @click="commoditys(index)" class="card-center">
        <view class="card-center-up">{{ item.name }}</view>
        <view class="card-center-botton">
          <view class="card-center-botton-left">
            <text style="font-size: 0.5rem">￥</text>
            <text style="font-size: 1.1rem; color: #ff6b06">{{ item.price }}</text>
            <del style="margin-left: 0.2rem; font-size: 0.8rem">￥{{ item.retail }}</del>
          </view>
          <view :class="{ active: commodityindex === index }" class="card-center-botton-right"><uni-icons color="#fff" type="checkmarkempty" size="20"></uni-icons></view>
        </view>
      </view>
      <view class="card-botton">确定选择</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const commodityindex = ref(0);
const commodity = ref([
  {
    name: '哇哈哈',
    price: '5.00',
    retail: '5.00'
  },
  {
    name: '农夫三拳',
    price: '8.00',
    retail: '5.00'
  }
]);
const commoditys = (index) => {
  commodityindex.value = index;
};
</script>

<style lang="scss" scoped>
.location {
  width: 83%;
  margin: 0.5rem auto;
  padding: 0.5rem 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  .location-left {
    display: flex;
  }
  .location-right {
    display: flex;
  }
}
.text {
  width: 92%;
  margin: 0 auto;
  color: #7c818b;
  font-size: 0.9rem;
  line-height: 1.3rem;
  margin-bottom: 1rem;
}
.card {
  text-align: center;
  width: 92%;
  margin: 0 auto;
  background-color: #fff;
  display: flow-root;
  .card-up {
    padding: 0.8rem 0;
    background-color: #ebedf5;
    font-size: 0.9rem;
    color: #878b96;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .card-center {
    background-color: #fff;
    height: 10rem;
    .card-center-up {
      padding-top: 0.8rem;
      display: flex;
      margin-left: 6rem;
    }
    .card-center-botton {
      margin-top: 2rem;
      display: flex;
      justify-content: space-between;
      .card-center-botton-left {
        margin-left: 6rem;
      }
      .card-center-botton-right {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
        border: 1px solid #7c818b;
        margin-right: 1rem;
      }
      .active {
        background-color: #00ba26;
      }
    }
  }
  .card-botton {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    margin: 0 1rem 1rem;
    background-color: #00ba26;
    border-radius: 1.5rem;
    color: #fff;
  }
}
</style>
