E企盈营销工具技术服务商 热线:4006-838-530

微信小程序商城系列之商品详情页

E企盈直播平台营销卖货系统

wxml:!–商品幻灯片–swiper indicator-dots=”{{indicatorDots}}” autoplay=”{{autoplay}}” interval=”{{interval}}” class=”banner” duration=”{{duration}}” circular=”{{duration}}”  block wx:for=”{{goods_img}}” wx:key=”goods_info”    swiper-item      image src=”{{imghref}}{{item.img}}” class=”slide-image” mode=”aspectFill” data-src='{{imghref}}{{item.img}}’ bindtap=”previewImage”/    /swiper-item  /block/swiper!–商品幻灯片 end–view class=”info-price clear”  view class=’price’¥{{goods_info.goods_price}} /view  view class=’fenxiang’      button class=’fxbtn’ open-type=”share”        view style=’height:20px;margin-top:8px;’image src=’/img/fenxiang.png’ mode=”aspectFill” /image/view        view分享/view      /button  /view/viewview class=”info-title”    text{{goods_info.goods_title}}/text/viewview style=”border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;”    view class=”clearfix flex grey gridXt”      text class=”sub”block wx:if='{{goods_info.goods_yunfei==0.00}}’运费:包邮/blockblock wx:else运费:{{goods_info.goods_yunfei}}/block/text      text class=”sub”库存:{{goods_info.goods_kucun}}/text      text class=”sub”销量:{{goods_info.goods_xiaoliang}}/text    /view/viewblock wx:if=”{{pjDataList!=”}}”  !–评价–  view class=’pj_box’    view style=”height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;”     view style=’float:left;’商品评价/view     view style=’float:right;margin-left:2px;margin-top:-1px;’        image src=”/img/ico_jt.png” class=”ico_img_jt”/image     /view     view style=’float:right;font-size:12px;color:#A2A2A2;’        navigator url=”pjList?id={{goods_id}}”查看全部/navigator     /view     view class=’clear’/view    /view    block wx:for=”{{pjDataList}}” wx:for-item=”item” wx:key=”pj”      view class=”list_item”        view class=’pj_u_info clear’          view class=’header_img’image src=”{{item.headpic}}” mode=”aspectFit”/image/view          view class=’name'{{item.author}}/view          view class=’time'{{item.add_time}}/view        /view        view class=’pj_cont’          {{item.content}}        /view      /view    /block/view/block!–商品详情–view class=’details_box’  view style=”height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;”     view商品详情/view  /view  view style=’padding:10px 0px;’      view class=”wxParse”         {{goods_info.content}}      /view    /view/view!–底部浮动 start–view class=”foot-nav mt15″  view class=”flex con gridXt tc”    view class=”fast-links mr15 flex f12″      view class=”sub gridYr” bindtap=’shoucang’        text class=”iconfont {{is_shoucang==0?’icon-shoucang1′:’icon-shoucang2′}}”收藏/text      /view      view class=”sub kefu”       button open-type=”contact”        text class=”iconfont icon-lianxikefu”客服/text       /button      /view      view class=”sub gridYr”        text class=”iconfont icon-gouwuche”购物车/text      /view    /view    view class=”add-cart sub f16″      button class=”add-cart-btn” bindtap=’buy’立即购买/button    /view  /view/viewwxss:.clear{clear: both;overflow: hidden;}.banner{height:300px;}.slide-image {width:100%;height:100%;}/*分享按钮*/.fenxiang button::after{border: none;}.fxbtn{background: none;border:0px;margin:0px;padding:0px;border-radius: 0px;font-size: 12px;}.flex{ display: -webkit-box;display: -webkit-flex;  display: -ms-flexbox; display: flex; width: 100%;}.flex.sub{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden;}.info-title{ background: #fff; padding:10px 15px;font-size: 15px;}.info-price{border-bottom:1px solid #F6F6F6;background: #fff;padding:0px 15px;}.price{ float:left;height:50px;line-height:50px;color:#FF6666;font-size: 25px; }.fenxiang{text-align: center; font-size: 12px; color:#999;width:50px;line-height: 20px;overflow: hidden;float:right;}.fenxiang image{width:20px;height:20px;}.price em{font-size:12px;margin-left:20px;}.flex{ position: relative; width: auto; margin: 0 -15px; padding:3px 15px 0;}.store-info{ background: #fff;}.store-info .store,.store-info .rz-item{ padding: 10px 15px;}.store-info .rz-item view{ margin-right: 10px;}.list_item{position:relative;padding:15px 10px;background:#fff; border-bottom:1px solid #f5f5f5;}.details_box{ margin-top:10px;padding:0 15px;font-size: 13px;background:#fff;}.pj_box{margin-top:10px;padding:0 15px;font-size: 13px;background:#fff;}.ico_img_jt{vertical-align: middle;width:16px; height: 16px;}.pj_u_info .header_img{float:left;}.pj_u_info .header_img image{width:20px;height:20px;border-radius: 50%;overflow: hidden;}.pj_u_info .name{float:left; margin-left:10px;font-size: 15px;color:#333;}.pj_u_info .time{ float:right;font-size: 12px;color:#999;}.pj_cont{font-size: 13px;}.pj_img{ margin:10px 10px 0px 10px;width:120px;height:100px;}.foot-nav{ height: 46px;}.foot-nav .con{ position: fixed; height: 46px; left: 0; bottom: 0; right: 0; background: #fff;z-index:999;}.fast-links{ width: 160px; line-height: 18px;text-align: center;}.fast-links .iconfont{ padding:5px 0;}.fast-links .iconfont::before{ display: block; margin-top: 5px; font-size: 18px;}.notempty{ position: relative;}.notempty::after{ content:””; display: block; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; background: #e64340; position: absolute; top:5px; right: 50%; margin-right: -16px;}.add-cart .add-cart-btn{background:linear-gradient(to right,#FF7A34, #EE32FF);color: #fff;border-radius: 50px; padding:0px;width:150px;height:35px; line-height: 35px;margin-top:5px;margin-right:15px;}.kefu button{border:none;background:none;display:block;padding:0px;margin:0px;line-height:1.5em;font-size:inherit;}.kefu button::after{border: none;}.kefu .button-hover{color:#333; background:none;}.kefu button .iconfont{ padding:0px;}.icon-shoucang2{color:red;}js:// index/details.jsPage({  /**   * 页面的初始数据   */  data: {    is_shoucang:0,    goods_info: { goods_id: 1, goods_title: “商品标题1”, goods_price: ‘100’, goods_yunfei: 0, goods_kucun: 100, goods_xiaoliang: 1, content:’商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情’},    goods_img: [      {‘img’: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’},      {‘img’: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’ },      {‘img’: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’ },      {‘img’: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’ },      ],    indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000,    pjDataList: [{ headpic: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’, author: ‘张三’, add_time: ‘2018-06-01′, content:’好评好评,真实太好了!’},      { headpic: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’, author: ‘张三’, add_time: ‘2018-06-01’, content: ‘好评好评,真实太好了!’ }    ],//评价数据  },  previewImage: function (e) {    var current = e.target.dataset.src;    var href = this.data.imghref;    var goodsimg = this.data.goods_img;    var imglist = [];    for (var i = 0; i goodsimg.length; i++) {      imglist[i] = href + goodsimg[i].img    }    wx.previewImage({      current: current, // 当前显示图片的http链接        urls: imglist// 需要预览的图片http链接列表      })  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {    },})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序商城系列之商品详情页
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏