1、detail页面 /items/detail/:id

最新推荐文章于 2022-06-29 11:14:15 发布
最新推荐文章于 2022-06-29 11:14:15 发布
阅读量1.2k 收藏
点赞数
原文链接：http://www.cnblogs.com/suanmei/p/10569737.html
版权

 

<template>
    <div class="item_detail">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in goods.pictureList" v-bind:key="index"><img :src="item.url"></van-swipe-item>
    </van-swipe>
    <div class="buy-area">
      <h2 class="title">
        <!-- OGAWA 奥佳华 舒行者全自动按摩椅 OG-7105 泰式定 位拉抻按摩椅 -->
        {{goods.title}}
      </h2>
      <p class="des">
        <!-- 透彻拉筋放松,舒畅全身；如儿时摇篮般的舒适体验；压肩揉按，抚慰颈部疲劳 -->
        {{goods.desc}}
      </p>
      <div class="point">
        {{goods.minScorePrice}} 积分
      </div>
    </div>
    <div class="detail-title">
      <span>
        商品详情
      </span>
    </div>
    <div class="content" v-html="goods.detail">

    </div>
    <van-goods-action>
      <van-goods-action-big-btn primary @click="doBuyNow" text="立即兑换" />
    </van-goods-action>
    <div v-show="showBase">
      <div class="alertBox">
        <div class="mainbox">
          <i class="van-icon van-icon-close icon-pos" @click="doClose"></i>
          <div v-for="(item,n) in itemList" v-bind:key="n">
            <div class="stand-title">
              {{item.specNameTitle}}
            </div>
            <div class="stand-cont clearfix">
              <div class="item" v-for="(oItem,index) in item.valueList" :class="[oItem.notShowFlag == 1 ? 'disabled' : '',subIndex[n] == index ? 'active': '']" @click="select(n,index,item.specNameId,oItem.specNameValueId,oItem.notShowFlag)" v-bind:key="index">{{oItem.specNameValueTitle}}</div>
              <!-- <div class="item active">红</div>https://blog.csdn.net/yx_cos/article/details/82499389
              <div class="item">黑</div>https://blog.csdn.net/panyang01/article/details/76665448  https://blog.csdn.net/this_ITBoy/article/details/82724701
              <div class="item disabled">白</div> -->
            </div>
          </div>
          <div class="count clearfix">
            <span>
              数量选择
            </span>
            <van-stepper v-model="value" :max="maxAmount" />
          </div>
        </div>
        <div class="btmBtn" @click="doPay()">
          确认兑换
        </div>
      </div>
    </div>
    <div class="van-modal" v-show="showBase" @click="doClose" style="z-index: 10;"></div>
    </div>
</template>

<script>
// import { GOODS_DETAIL } from '@/api/goods';

import {
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Popup,
  Sku,
  Stepper,
  Toast
} from 'vant';

export default {
  props: {
    itemId: [String, Number]
  },
  data() {return {
      value: 1,
      showBase: false,
      goods: {},
      subIndex: [],
      accessFlag: true,
      itemList: [],
      tmpItemList: [],
      skuList: [],
      tmpStr: "",
      specStr1: "",
      specStr2: "",
      skuId: "",
      maxAmount: 1
    };
  },

  computed: {

  },
  created() {
    // var that = this
    // history.pushState(null, null, document.URL);
    // window.addEventListener('popstate', function(e) {
    //     that.$router.replace({path: '/'})
    //     // history.pushState(null, null, location.protocol+'//'+location.host + '/');
    // });
    window.scrollTo(0,0)
    this.initData();
  },
  destroyed(){
    this.doClose()
  },
  beforeRouteLeave(to, from, next){
    this.doClose()
    next();
  },
  methods: {
    initData() {
      // this.$reqGet(`${GOODS_DETAIL}`, {
      //   expand: 'desc,skus,prop_imgs,item_imgs'
      // }).then(res => {
      //   this.goods = res.data.data;
      // });
      var that = this
      this.$reqGet('/product/get-product?productId='+that.itemId).then(function(res) {
        console.log(res)
        that.goods = res.data.body.productWithList
        that.itemList = res.data.body.specValueVOList
        that.skuList = res.data.body.skuList
        that.tmpItemList = res.data.body.specValueVOList
      }).catch(function(err) {
        console.log(err)
      })
    },
    doBuyNow() {
      this.value = 1
      this.showBase = true
      document.body.style.height = '100vh'
      document.body.style['overflow'] = 'hidden'
      document.body.style.position = 'fixed'
      this.itemList = JSON.parse(JSON.stringify(this.tmpItemList))  // 隐藏后初始化弹出选中 与 disabled
      this.subIndex = []  // 隐藏后初始化弹出选中 与 disabled
    },
    doClose() {
      this.value = 1
      this.showBase = false
      document.body.style.height = 'unset'
      document.body.style['overflow'] = 'auto'
      document.body.style.position = ''
      this.itemList = this.tmpItemList
    },
    doPay() {
      var that = this
      if (this.subIndex.length == 0) {
        this.$toast('请选择规格');
        return false;
      }
      if(this.subIndex.length < this.goods.nameList.length) {
        this.$toast('请选择规格');
        return false;
      }
      if (that.subIndex.indexOf(-1) > -1) {
        this.$toast('请选择规格');
        return false
      }
      // this.tmpStr = this.specStr1 + this.specStr2
      // console.log(this.tmpStr,2)
      // return false;
      // this.skuList.forEach(function (item,index) {
      //   if (that.tmpStr == item.specStr) {
      //     that.skuId = item.skuId
      //     that.maxAmount = item.stock
      //     if(that.value > that.maxAmount) {
      //       that.value = that.maxAmount
      //       return false
      //     }
      //   }
      // })
      if (this.accessFlag) {
        this.$reqPost('/order/add-order',{remark:"",products:[{skuId:that.skuId,quantity:that.value}]}).then(function(res) {
          console.log(res)
          if(res.data.body.status) {
            // that.doClose()
            that.$router.push({path:'/items/write',query:{skuId:that.skuId,orderNo:res.data.body.data}})
          }else{
            that.$toast(res.data.body.msg);
            that.initData()
          }
        }).catch(function(err) {
          console.log(err)
        })
      }
    },
    select(n,index,pid,cid,flag) {
      if (flag == 1) {
        return false;
      }
      if (n == 0) {
        this.specStr1 = 'nameId'+pid+','+'valueId'+cid+',';
      }
      if (n == 1) {
        this.specStr2 = 'nameId'+pid+','+'valueId'+cid+',';
      }
      // console.log(this.specStr1,this.specStr2)
      if(this.subIndex[n] == index) {
        this.subIndex[n] = -1 //去掉选中状态 下面去掉当时选中德str 同时赋值
        if (n == 0) {
          this.specStr1 = "";
        }
        if (n == 1) {
          this.specStr2 = "";
        }
        this.$set(this.subIndex, n, -1)
      }else {
        this.subIndex[n] = index
        this.$set(this.subIndex, n, index)
      }

      // 判断规格为两种搭配情况下的stock为0情况下 是否不可点击按钮（disabled） （规格为一种时候 通过后台返回的notShowFlag 判断 规格为两种时候 第二种的notShowFlag 为1）
      var that = this
      if (this.itemList.length == 2 && n == 0) {
        this.itemList[1].valueList.forEach(function(item,index) {
          var ppStr1 = that.specStr1 + 'nameId'+that.itemList[1].specNameId+','+'valueId'+item.specNameValueId+','
          that.skuList.forEach(function(obj,j) {
            // console.log(ppStr1,obj.specStr,obj.stock)
            if (ppStr1 == obj.specStr) {
              if(obj.stock == 0) {
                item.notShowFlag = 1
              }else{
                item.notShowFlag = 0
              }
            }
          })
        })
      }
      if (this.itemList.length == 2 && n == 1) {
        this.itemList[0].valueList.forEach(function(item,index) {
          var ppStr2 ='nameId'+that.itemList[0].specNameId+','+'valueId'+item.specNameValueId+','+that.specStr2
          that.skuList.forEach(function(obj,j) {
            // console.log(ppStr2,obj.specStr,obj.stock)
            if (ppStr2 == obj.specStr) {
              if(obj.stock == 0) {
                item.notShowFlag = 1
              }else{
                item.notShowFlag = 0
              }
            }
          })
        })
      }


      this.tmpStr = this.specStr1 + this.specStr2
      // console.log(this.tmpStr,1)
      this.skuList.forEach(function (item,index) {
        if (that.tmpStr == item.specStr) {
          that.skuId = item.skuId
          that.maxAmount = item.stock
          if(that.value > that.maxAmount) {
            that.value = that.maxAmount
            return false
          }
        }
      })
      // console.log(this.maxAmount,2)
      // this.subIndex[n] = index
      // this.$set(this.subIndex, n, index)
      // console.log(n,index,pid,cid)
    }
  },

  components: {
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    [Sku.name]: Sku,
    [Stepper.name]: Stepper,
    [Toast.name]: Toast
  }
};
</script>

<style lang="scss" scoped>
.clearfix::after{
  display: block;
  content: '';
  clear: both;
  height: 0;

}
.van-swipe{
  height: 11.25rem !important;
  background: #fff;
}
.van-icon-close:before {
    content: "\F015" !important;
}
.van-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
}
.buy-area {
  padding: 0.36rem;
  line-height: 1.9;
  background: #fff;
  .title {
    font-size: 0.42rem;
    margin: 0px;
  }
  .des {
    margin: 0px;
    padding-top: 0.45rem;
    font-size: 0.36rem;
    color: #999;
  }
  .point {
    padding-top: 1rem;
    color: #ff8400;
    font-size: 0.54rem;
  }
}
.item_detail {
  img {
    max-width: 100%;
  }
}
.detail-title{
  height: 1.6rem;
  line-height: 1.6rem;
  padding: 0 0.36rem;
  background: #fff;
  font-size: 0.42rem;
  font-weight: bold;
  margin-top: 0.3rem;
  span {
    padding-left: 0.25rem;
    display: block;
    position: relative;
  }
  span::before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    height: 0.4rem;
    width: 2px;
    top: 0.6rem;
    background: #fd141d;
  }
}
.content {
  background: #fff;
  min-height: 11.25rem;
  /deep/ img {
    width: 100%;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
  }
  /deep/ p {
    margin: 0px;
    padding: 0px;
  }
}
.van-button--danger{
  background: #fd141d;
}
.alertBox {
  height: auto;
  position: fixed;
  bottom: 0;
  z-index: 11;
  background: #fff;
  left: 0;
  right: 0;
  font-size: 0.42rem;
}
.alertBox .mainbox {
  max-height: 260px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.alertBox .btmBtn {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #fd141d;
  font-size: 16px;
}
.alertBox .stand-title {
  height: 1.6rem;
  line-height: 1.6rem;
  padding: 0 0.36rem;
  border-bottom: 1px #f6f6f9 solid;
  
}
.alertBox .icon-pos {
  position: absolute;
  right: 0.36rem;
  top: 0.6rem;
}
.alertBox .stand-cont {
  padding:  0.56rem 0.36rem;
}
.alertBox .stand-cont .item {
  float: left;
  min-width: 2.4rem;
  height: 0.9rem;
  border-radius: 0.45rem;
  padding: 0 0.45rem;
  border: 1px solid #f6f6f9;
  background: #f6f6f9;
  text-align: center;
  line-height: 0.9rem;
  margin-right: 0.6rem;
  margin-bottom: 0.3rem;
}
.alertBox .stand-cont .item.active {
  background: #fff8f8;
  border-color: #fd141d;
  color: #fd141d;
}
.alertBox .stand-cont .item.disabled {
  background: #f6f6f9;
  border-color: #f6f6f9;
  color: #b4b4b9;
}
.alertBox .count {
  padding: 0.6rem 0.36rem;
}
.alertBox span {
  display: block;
  float: left;
  height: 30px;
  line-height: 30px;
}
.van-stepper {
  float: right;
}
.van-button {
  height: 50px;
  line-height: 50px;
}
</style>

 

转载于:https://www.cnblogs.com/suanmei/p/10569737.html

diaochi3040
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router路由传参的几种方式-案例
JackieDYH的博客
08-25 3960
说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { this.$router..
2014淘宝双十一活动入口|天天特价
qq_21971877的专栏
10-14 1920
不知不觉2014双十一即将临近，淘宝网买家和淘宝网卖家，都在各自筹划着。买家早早的计划好了，最近需要购买的物品先不要买，等着双十一大促，天天特价、淘宝特价等活动频道，发现值得买商品，既购物愉快，又省钱省心！对于大多数的卖家来说最忙的时候到了，准备筹划着各自店铺的活动推广。作为淘宝购物迷的我，闲来抽空搜集了一下去年的双十一销售数据。 从往年的双十一销售数据来看，去年淘宝双十一活动搞的是做成功的，当
根据delivery_detail_id创建交货号
coutan3142的博客
09-04 290
根据delivery_detail_id创建交货号[@more@]SET SERVEROUTPUT ON SIZE 100000DECLAREp_api_version_number NUMBER;p_commit VARCHA...
写Detail的接口
cmcesummer的博客
04-03 434
ui-sref="field.productAttrDetail({id: li.id})">编辑n> ui-sref="field.productAttrDetail">新增 然后跳转到Detail页面 在写内容的地方双向绑定一波：（还会添加一些表单验证的东西） ng-model="vm.data.values" 在最下边那个提交或者保存按钮上 写一波点击事件 ng-click=
动态路由参数和嵌套
qq_52722039的博客
05-04 526
动态路由 获取导航的参数 通过问号 ？ 传值 使用this.$route.query ​ 可以传多个 使用& 必须要写参数名称！！！ /detail？id= 2.通过冒号 ： 传值 使用 this.$route.params 可以写多个 使用 / 必须和路由那边一样， ​ 比如 /detail/：id 必须以/detail开头 后面写什么都可以， ​ 如果想传多个，路由记录必须和传的参数个数一样 ​ path: '/detail/:id', Detail(Deta
sample-fastAPI
04-21
query = "SELECT * FROM items WHERE id = ?" result = await database.execute(query, (item_id,)) item = await result.fetchone() return item @app.get("/items/{item_id}") async def read_item(item_id: ...
vue如何通过id从列表页跳转到对应的详情页
12-11
在Vue.js应用中，通过`vue-router`实现页面间的跳转，利用路径参数或查询参数传递ID，从而在详情页面获取相应数据。同时，可以使用导航守卫和动态数据来实现标题的动态更新。最后，与后台服务器进行通信时，通常...
主报表传递list到子报表detail方法（JavaBeans set datasource）
03-17
<display:table name="detailReport.order.lineItems" pagesize="10"> <display:column property="productId" title="产品ID" /> <display:column property="quantity" title="数量" /> <!-- 其他列 --> </...
SapUI5RoutingTut：SapUI5RoutingTut
02-18
this.getView().byId("detailPanel").bindObject("/items/" + sId); } ``` 此外，SapUI5还支持嵌套路由，这允许你在一个主视图中嵌套多个子视图，并通过路由进行切换。这对于构建复杂的应用结构非常有用。 在"**...
淘宝API接口（ item_detail - 淘宝商品详情查询）
m0_37997458的博客
09-10 5706
目录欢迎使用淘宝API接口( item_review - 淘宝商品评论查询 )请求参数响应示例异常示例其他API列表 欢迎使用淘宝API接口( item_review - 淘宝商品评论查询 ) 你好！ 这是你使用我们的淘宝API接口获取商品详细接口说明。 开通账户联系Q 2489204602 。 请求参数 api - API接口名称 key - API接口账号 num_iid - 淘宝/天猫商品ID area_id - 区域编号 响应示例 下面展示同响应示 json. { "result":{
用jquery等比例控制图片宽高的具体实现
12-10
核心代码： $(function() { $(".dvcontent img").each(function() { var maxwidth = 520; if ($(this).width() > maxwidth) { var oldwidth = $(this).width(); var oldheight = $(this).height(); var newheight = maxwidth/oldwidth*oldheight; $(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"});
html记住用户名密码
09-19
用户登录功能、同时记住用户名密码，通过复选框勾选和不勾选实现记住、清除cookie中用户名密码等。
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
热门推荐
荔枝吖阿
12-17 2万+
  1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并派发父组件事件（movieList.vue)页面 &lt;li v-for="(item,index) in movies"...
vue 路由跳转携带参数
小白成长记
06-29 2万+
vue 路由跳转携带参数的方式：一、 方式跳转，1. 携带query参数，2. 携带params参数，3.将参数转换为props属性；二、编程方式跳转路由
Detail(详情页)
qq_44971069的博客
12-09 1689
detail.vue <template> <div id="detail"> <detail-nav-bar @titleClick="selectIndex" :current-index="currentIndex"/> <scroll class="content" ref="scroll" @scroll="contentScroll" :probe-type="3
小程序data-id传参，通过 url: ‘../details/details?url=‘+url,页面之间进行传参
qq_44170622的博客
07-03 2416
我们在微信小程序开发的过程中，往往有时候我们需要进行页面之间的传参 比如我们通过新闻列表，在新闻列表点击详情进入详情页面 点击新闻列表，然后跳转到下一个页面，我们不肯能写N个页面，我们只需要拿到当前页面的url <view bindtap="gotoDetails" data-url='{{item.url}}'> <view style="height:75rpx" class="title">{{item.title}} </view> <vi
商城项目服务端实践SSM（八）-------前台_商品接口（商品详情，商品列表，商品搜索）
该取什么呢的博客
08-03 796
商品表 商品表 create table 'mmall_product'( 'id' int(11) NOT NULL AUTO_INCREMENT COMMENT '商品id', 'category_id' int(11) NOT NULL COMMENT '分类id,对应mmal_category分类表的主键', 'name' varchar(100) NOT NULL COMMENT...
各大音乐网站接口
知其所以然
09-26 2万+
以后可能用的上！ 360离线接口：         离线下载 酷狗音乐接口： VIP接口：http://trackercdn.kugou.com/i/?cmd=4&hash={$Hash}&key={$md5($hash . "kgcloud")}&pid=1&forceDown=0&vip=1 安卓接口：http://trackercdn.kugou.com/i/v
请帮我将referer_url添加到Request的Referer中，并在Request中使用referer: def parse(self, response): rs = json.loads(response.text) data = rs.get('items') for res_item in data: movie_item = newmovieItem() movie_item['movie_id'] = res_item.get('id') uri = res_item.get('uri') re_url = str(uri).replace("douban://douban.com/movie/", "https://movie.douban.com/subject/") referer_url = re_url + '/' detail_url = str(uri).replace("douban://douban.com/movie/", "https://www.douban.com/doubanapp/dispatch?uri=/movie/") print(detail_url) movie_item['url'] = detail_url yield Request(url=detail_url, callback=self.parse_detail, cb_kwargs={'item': movie_item}, dont_filter=True )
最新发布
05-29
movie_item['movie_id'] = res_item.get('id') uri = res_item.get('uri') re_url = str(uri).replace("douban://douban.com/movie/", "https://movie.douban.com/subject/") referer_url = re_url + '/' ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值