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">
        <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="detail.tel" @click="callPhone"></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-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" :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="(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" 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 {goodsDetail, goodsSpec, roomDetail} from "@/api/shop";

export default {
  computed: {},
  components: {},
  data() {
    return {
      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:{}
      },
    }
  },
  onLoad(option) {
    this.getDetail(option.id)
  },
  onReady() {
    this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
  },
  methods: {
    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(){
      this.exchangeShow = true;
      this.getSpec();
    },
    submit(){
      this.model.info = this.specificationsList[this.model.spec];
      this.model.info.name = this.detail.name;
      this.model.info.image = this.detail.images[0];
      wx.navigateTo({url:'/pages/Order/confirm?info='+JSON.stringify(this.model)})
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {
    this.userInfo = this.$store.userInfo
    if(!this.userInfo){
      this.userInfo = uni.getStorageSync('user');
    }
    console.log(this.userInfo)
    if(this.userInfo){
      this.model.order.name = this.userInfo.name;
      this.model.order.id_card = this.userInfo.id_card;
      this.model.order.phone = this.userInfo.phone;
    }
  },
}
</script>

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