w-front-end / select_good · Files

<template>
<div class="good-details-box">
    <!-- H5唤起App组件 -->
        <call-app-box
            class="call-app-box"
            :style="'padding-top: ' + $parent.top.value + 'px'"
            ref="callApp"
            v-if="!isCNLive.value"
            :callApps="$parent.callApps"
        >
        </call-app-box>
        <back-box
            v-if="$parent.isBack && isCNLive.value"
            class="back-box"
            :style="'padding-top: ' + $parent.top.value + 'px'"
            @back="back"
            :backs="backs"
        >
        </back-box>
        <!--轮播-->
        <swiper
          :style="
                'margin-top:' +
                    ($parent.isBack && isCNLive.value ? 62 : 10) +
                    'px'
            "
            v-if="banner"
            :swipers="banner"
            :isPointsMall= 'true'
            :options="{
                showIndicators: true
            }"
        >
        </swiper>
        <!-- 内容 -->
        <div class="main-box">
            <!-- 标题 -->
            <div class="title">
              山东沂蒙 优质大蒜山东沂蒙 优质大蒜
            </div>
            <!-- 积分 -->
            <div class="title-t">
              <span class="price">¥200</span>
              <span class="integral">15000</span>
              <span class="integral-in">积分</span>
            </div>
            <!-- 商品信息 -->
            <div class="goods-info">
              <div class="good-title">
                <span class="left">————</span>商品详情<span class="right">————</span>
              </div>
              <div class="good-desc">
                商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置
              </div>
              <div class="good-title">
                <span class="left">————</span>兑换规则<span class="right">————</span>
              </div>
              <div class="good-desc">
                <div class="text-left">商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置</div>
                <div class="text-left">
                  <span>· 正版授权</span>
                  所售商品均已官方授权，请放心购买；
                </div>
                <div class="text-left">
                  <span>· 正品保障</span>
                  独家正品保障。
                </div>
              </div>
              <div class="good-title">
                <span class="left">————</span>相似商品<span class="right">————</span>
              </div>
               <!-- 像是商品推荐 -->
              <!-- 商品样式 7 列表 -->
              <column-list-box class="column-list-box" v-if="similarGoods && similarGoods.list && similarGoods.list.length" @jump="toDetail" 
                  :lists="similarGoods"
                  com="7">
              </column-list-box>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">
          <div class="btn">
            立即兑换
          </div>
        </div>
</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import callAppBox from "@/components/callAppBox/callAppBox";
import swiper from "@/components/swiper/swiper";
import backBox from "@/components/backBox/backBox";
import columnListBox from "@/components/columnListBox/columnListBox";
export default {
  data () {
    return {
      banner: [
        {          id: "290",
          shop_type: "",
          simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
          title: "世行",
          to: "0",
          type: "0",        }, {          id: "290",
          shop_type: "",
          simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
          title: "世行",
          to: "0",
          type: "0",        }],
      backs: null, // 后退按钮组
      similarGoods: null // 相似商品
    }
  },
  //部件
  components: {
    callAppBox,
    swiper,
    backBox,
    columnListBox
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    /**
     * 积分商品详情页页面接口
     */
    fansShopMessageList () {

      // 校验登录
      if (this.$parent.checkLogin()) {

        // 加载中提示
        Indicator.open("加载中...");

        // 获取证书请求接口
        this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
          uid: this.getStore("uid")
        }, this.fansShopMessageListCallback, {
            method: "POST"
          });
      }
    },

    /**
     * 积分商品详情页页面接口回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
    fansShopMessageListCallback (res, ext) {

      // 加载完成
      Indicator.close();

      // 返回处理
      if (res.code == 200) {

        // 解构数据
        let { data: datas } = res;

        /* 获取banner */



        /* 获取详细信息 */

        /* 相似商品 */

      } else if (res.code == 400) {

        // 获取积分商品详情页失败
        Toast(res.message);
      } else {

        // 获取积分商品详情页失败
        Toast("获取积分商品详情页失败");
      }
    },
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "积分商品详情页");

    // 判断是否在App内
    if (this.isCNLive.value) {

      // 添加后退按钮组“后退”和“分享”按钮
      this.$set(this, 'backs', {
        funcs: {
          back: {
            icon: "static/img/icon_back.png"
          },
          funcArray: [
            {
              icon: "static/img/icon_share.png",
              func: this.toShare
            }
          ]
        }
      });

      // 设置标题
      this.$set(this.backs, 'title', '积分商品详情页');
      // 临时，实物商品列表
      this.$set(this, 'similarGoods', {
        list: [
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500, // 积分
            time_state: 2,
            stock: 0
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          }
        ]
      });
    }

  },
  mounted () {
  }
}
</script>

<style rel="stylesheet/less" lang="less" scoped>
@import './goodDetails.less';
</style>