warm_man/pages/Goods/index.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <u-swiper
      :list="detail.images"
      indicatorMode="line"
      :indicator="true"
      height="720"
  ></u-swiper>
  <view class="detail-container">
    <view class="detail-item price row ">
      <view class="price-container row pad-26">
        <view class="price-item">
          <u-text size="32" color="#FF9545" text="暖新币" custom-style="margin-right:10rpx;"></u-text>
        </view>
        <view class="price-item">
          <u-text mode="price" size="48" color="#FF9545" :text="detail.price"></u-text>
        </view>


      </view>
      <view class="street pad-26">
        <u-text size="28" color="#AFB5BE" text="已兑换 50件"></u-text>
      </view>
      <view class="item-desc row pad-26">
        <view class="item">
          <view class="title">
            <u-text align="left" size="36" color="#020B18"
                    text="新鲜鹿茸菇特级干货鹿茸菌云南特产煲汤脆姑蘑菇香菇48元500g包邮"></u-text>
          </view>
        </view>
      </view>
      <view class="hr"></view>
      <view class="cell row pad-26">
        <u-cell-group :border="false">
          <u-cell
              :rightIconStyle="{
            fontSize:'28rpx'
          }"
              :center="true"
              :border="false"
              :clickable="false"
          >
            <template v-slot:icon>
              <view class="cell-icon">
                <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
              </view>
            </template>

            <template v-slot:title>
              <view class="cell-container ">
                <view class="cell-title">

                  <u-text align="left" size="28" color="#020B18"
                          text="退换货售后服务请联系客服"></u-text>
                </view>
                <view class="cell-border"></view>
                <view class="cell-title-desc row">
                  <view class="icon">
                    <u-icon name="phone-fill" size="30" color="#FF9545"></u-icon>
                  </view>
                  <view class="value">
                    <u-text align="left" size="28" color="#FF9545"
                            text="028-66668888"></u-text>
                  </view>
                </view>
              </view>
            </template>
          </u-cell>
          <view class="hr"></view>
          <u-cell
              :rightIconStyle="{
            fontSize:'28rpx'
          }"
              :center="true"
              :border="false"
              :clickable="false"
          >
            <template v-slot:icon>
              <view class="cell-icon">
                <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
              </view>
            </template>

            <template v-slot:title>
              <view class="cell-container ">
                <view class="cell-title">

                  <u-text align="left" size="28" color="#020B18"
                          text="全暖新币兑换"></u-text>
                </view>
              </view>
            </template>
          </u-cell>
          <view class="hr"></view>
          <u-cell
              :rightIconStyle="{
            fontSize:'28rpx'
          }"
              :center="true"
              :border="false"
              :clickable="false"
          >
            <template v-slot:icon>
              <view class="cell-icon">
                <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
              </view>
            </template>

            <template v-slot:title>
              <view class="cell-container ">
                <view class="cell-title">

                  <u-text align="left" size="28" color="#020B18"
                          text="全国包邮"></u-text>
                </view>
              </view>
            </template>
          </u-cell>
          <view class="hr"></view>
        </u-cell-group>

      </view>
      <u-loadmore
          fontSize="28"
          color="#AFB5BE"
          loadmore-text="商品详情"
          marginTop="72"
          marginBottom="32"
          line
      />
      <view class="detail-image">
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
        <u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
      </view>

    </view>
  </view>
  <view class="foot-button border-box row">
    <view class="collect">
      <!--      <u-icon name="heart-fill" size="48" color="#FF9545"></u-icon>-->
      <!--      <u-text size="28" color="#FF9545" text="收藏" align="center"></u-text>-->
      <!--      <u-icon name="heart-fill" size="48" color="#AFB5BE"></u-icon>-->
    </view>
    <view class="button-group">
      <view class="desc row col">
        <view class="desc-content">
          <u-text size="32" color="#020B18" text="可用暖新币："></u-text>
        </view>
        <view class="desc-content">
          <u-text size="32" color="#FF9545" text="3986"></u-text>
        </view>
        <view class="desc-content">
          <u-text size="32" color="#020B18" text="币"></u-text>
        </view>

      </view>
      <view class="button exchange">
        <u-text size="32" color="#020B18" text="立即兑换" @click="exchangeShow = true"></u-text>
      </view>
    </view>
  </view>
  <u-popup :show="exchangeShow" mode="bottom" :round="10"  @close="close" @open="open">
    <view class="popup-container row">
      <view class="price-container-out ">
        <view class="price-container row col pad-26">
          <view class="price-item">
            <u-text size="32" color="#FF9545" text="暖新币" lineHeight="32" custom-style="margin-right:10rpx;"></u-text>
          </view>
          <view class="price-item">
            <u-text mode="price" size="48" color="#FF9545" lineHeight="48" :text="detail.price"></u-text>
          </view>
          <view class="price-item">
            <u-text size="32" color="#FF9545" text="币" lineHeight="32" custom-style="margin-left:5rpx;"></u-text>
          </view>


        </view>
        <view class="street pad-26">
          <u-text size="28" color="#AFB5BE" text="库存充足"></u-text>
        </view>
      </view>
      <view class="hr"></view>
      <view class="pop-cell row pad-26">
        <view class="left">
          <u-text size="32" color="#AFB5BE" text="规格" custom-style="margin-right:10rpx;"></u-text>
        </view>
        <view class="right col">
          <view class="tags row">
            <view class="tag" v-for="(item,index) in specificationsList" :class="{active:(index === specificationsCheck)}" @click="specificationsCheck = index">
              {{ item }}</view>
          </view>
        </view>
      </view>
      <view class="hr"></view>
      <view class="pop-cell row pad-26">
        <view class="left">
          <u-text size="32" color="#AFB5BE" text="数量" custom-style="margin-right:10rpx;"></u-text>
        </view>
        <view class="right col">
          <u-number-box inputWidth="60" buttonSize="60" v-model="value">
            <template #input>
              <view class="number">
                <u-input type="number" v-model="value" inputAlign="center" customStyle="width:60rpx;height:60rpx"></u-input>
              </view>
            </template>
          </u-number-box>
        </view>
      </view>
      <view class="hr"></view>
      <view class="submit-button col-12 pad-26">
        <u-button
            type="primary"
            text="确认兑换"
            shape="circle"
            :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
            @click="submit"
        ></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import api from "@/utils/functions.js";
import {roomDetail} from "@/api/shop";

export default {
  computed: {},
  components: {},
  data() {
    return {
      title: '商品详情',
      size: {
        height: 0
      },
      specificationsList:[
        123,456,789,100
      ],
      specificationsCheck:0,
      exchangeShow:false,
      value:1,
      detail: {
        id: '',
        images: '',
        price: '',
        street: '',
        bedroom_number: '',
        area: '',
        toward: '',
        year: '',
        payment_cycle: '',
        payment_type: '',
        address: '',
        coordinate: '',
        rental_overview: '',
        jiadian: '',
        furniture: '',
        tel: '',
      }
    }
  },
  onLoad(option) {
    this.getDetail(option.id)
  },
  onReady() {
    this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
  },
  methods: {
    getDetail(id) {
      roomDetail({
        house_id: id
      }).then(res => {
        console.log(res.data)
        this.detail = res.data;
      });
    },
    submit(){
      wx.navigateTo({url:'/pages/Order/confirm'})
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {

  },
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>