mrr.sj.front/pages/syr/workstation/components/buyOrderCard.vue

<template>
  <view class="order-card">
    <view class="order-card-header">
      <view class="order-card-header__left">{{ info.title }}</view>
      <view class="order-card-header__right">
        <image
          src="/static/images/icons/location_icon.png"
          mode="aspectFit"
          class="order-card-header__right__img"
        ></image>
        {{ distance }}km
      </view>
    </view>
    <view class="order-card-content">
      <view class="order-card-content__left">
        <image
          :src="photo && photo[0]"
          mode="aspectFill"
          class="order-card-content__left__img"
        ></image>
      </view>
      <view class="order-card-content__right">
        <view class="order-card-content__right__price"
          >价格：{{ info.price }} 元/10分钟</view
        >
        <view class="order-card-content__right__scope"
          >服务范围:{{ info.first_class_title }} {{ second_class_title }}</view
        >
        <view class="order-card-content__right__button">
          <view class="order-card-content__right__button__btn" @tap="placeOrder"> 租工位 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "buyOrderCard",
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {
    distance() {
      return this.info.distance.toFixed(2);
    },
    photo() {
      return JSON.parse(this.info.photo);
    },
    second_class_title() {
      return this.info.second_class_title.join("、");
    },
  },
  methods:{
	  placeOrder(){
		  this.$emit('placeOrder',this.info.id);
	  }
  }
};
</script>

<style scoped lang="less">
.order-card {
  padding: 34rpx 20rpx 40rpx 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx 30rpx;
  .order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    &__left {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
    }
    &__right {
      font-weight: 500;
      font-size: 24rpx;
      color: #666666;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      display: flex;
      align-items: center;
      &__img {
        width: 23rpx;
        height: 24rpx;
        margin-right: 7rpx;
      }
    }
  }
  .order-card-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    &__left {
      margin-right: 30rpx;
      &__img {
        width: 172rpx;
        height: 172rpx;
        border-radius: 20rpx;
      }
    }
    &__right {
      &__price {
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 14rpx;
      }
      &__scope {
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 27rpx;
      }
      &__button {
        width: 438rpx;
        display: flex;
        justify-content: flex-end;
        &__btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #FF4767;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
          width: 160rpx;
          height: 58rpx;
          border-radius: 32rpx;
          border: 2rpx solid #FF4767;
        }
      }
    }
  }
}
</style>