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.coin_number"></u-text>
        </view>


      </view>
      <view class="street pad-26">
        <u-text size="28" color="#AFB5BE" :text="'已兑换' +detail.sales_number+'件'"></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="detail.name"></u-text>
          </view>
        </view>
      </view>
      <view class="hr"></view>
      <view class="cell row pad-26">
          <view class="cell-item row">
            <view class="left top">
              <view class="cell-icon " style="height:100%;">
                <u-image mode="aspectFill" class="img" :src="staticImage.goodsPhone" height="48" width="48"></u-image>
              </view>
            </view>
            <view class="right">
              <view class="cell-container ">
                <view class="cell-title" style="margin-bottom:18rpx;">

                  <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="detail.tel" @click="callPhone"></u-text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="hr"></view>
        <view class="cell-item row">
          <view class="left" style="display: flex;">
            <view class="cell-icon " style="height:100%;">
              <u-image mode="aspectFill" class="img" :src="staticImage.goodsAllCron" height="48" width="48"></u-image>
            </view>
          </view>
          <view class="right">
            <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>
          </view>
        </view>
          <view class="hr"></view>
        <view class="cell-item row">
          <view class="left" style="display: flex;">
            <view class="cell-icon " style="height:100%;">
              <u-image mode="aspectFill" class="img" :src="staticImage.goodsAddr" height="48" width="48"></u-image>
            </view>
          </view>
          <view class="right">
            <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>
          </view>
        </view>
          <view class="hr"></view>

      </view>
      <u-loadmore
          fontSize="28"
          color="#AFB5BE"
          loadmore-text="商品详情"
          marginTop="72"
          marginBottom="32"
          line
      />
      <view class="detail-image">
        <u-parse :content="detail.detail"></u-parse>
      </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="userInfo.coin_number"></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="getSpecPop"></u-text>
      </view>
    </view>
  </view>
  <u-popup :show="exchangeShow" mode="bottom" :closeOnClickOverlay="true" :round="10"  @close="exchangeShow = false" @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="(specificationsList[model.spec].coin_number*value)"></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="specificationsList[model.spec].quantity+'件'||'库存充足'"></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 === model.spec)}" @click="model.spec = index">
              {{ item.spec }}
            </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="model.number">
            <template #input>
              <view class="number">
                <u-input type="number" v-model="model.number" inputAlign="center" @blur="numberBlur" 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>
  <u-modal :show="modalShow"  :content='modalContent' @confirm="modalShow = false"></u-modal>
</template>

<script>
import api from "@/utils/functions.js";
import {goodsDetail, goodsSpec, roomDetail} from "@/api/shop";
import {imghost} from "@/config/host";
import {userExtends} from "@/api/user";

export default {
  computed: {},
  components: {},
  data() {
    return {
      staticImage:{
        goodsPhone:imghost+'/goods-phone.png',
        goodsAllCron:imghost+'/goods-all-cron.png',
        goodsAddr:imghost+'/goods-addr.png',
      },
      title: '商品详情',
      size: {
        height: 0
      },
      specificationsList:[{
        coin_number:0,
        quantity:0,
        spec:'',
        id:'',
      }],
      exchangeShow:false,
      value:1,
      detail: {
        id: '',
        name:'',
        images: '',
        coin_number: '',
        sales_number: '',
        tel: '',
        detail: '',
      },
      userInfo:{},
      model:{
        number:1,
        spec:0,
        info:{}
      },
      modalShow:false,
      modalContent:'',
    }
  },
  onLoad(option) {
    this.getDetail(option.id)
  },
  onReady() {
    this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
  },
  methods: {
    numberBlur(){
      if(this.model.number > this.specificationsList[this.model.spec].quantity){
        this.model.number = this.specificationsList[this.model.spec].quantity;
        console.log('blur')
      }
    },
    callPhone(){
      uni.makePhoneCall({
        phoneNumber: this.detail.tel?.toString()
      });
    },
    getDetail(id) {
      goodsDetail({
        goods_id: id
      }).then(res => {
        console.log(res.data)
        this.detail = res.data;
      });
    },
    getSpec() {
      goodsSpec({
        goods_id: this.detail.id
      }).then(res => {
        this.specificationsList = res.data;
      });
    },
    getSpecPop(){
      if (!uni.getStorageSync('token')) {
        wx.navigateTo({
          url: '/pages/Login/index'
        })
        return false;
      }
      this.exchangeShow = true;
      this.getSpec();
    },
    submit(){
      if(this.model.number > this.specificationsList[this.model.spec].quantity){
        this.model.number = this.specificationsList[this.model.spec].quantity;
        uni.$u.toast('超过最大库存数量,已为您填入最大数量');
        return false;
      }

      if(this.userInfo.coin_number
          <(this.model.number*this.specificationsList[this.model.spec].coin_number)){
        this.exchangeShow = false;
        uni.$u.toast('暖新币不足');
        return false;
      }

      if(this.specificationsList[this.model.spec].quantity === 0){
        uni.$u.toast('库存不足');
        return false;
      }

      this.model.info = this.specificationsList[this.model.spec];
      this.model.info.image = this.detail.images[0];
      this.model.info.name = this.detail.name;
      uni.setStorageSync('detailInfo',this.model);
      wx.navigateTo({url:'/pages/Order/confirm'})
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {
    this.userInfo = uni.getStorageSync('user');
  },
}
</script>

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