微信小程序（九）商品详情界面

goos_detail.js

// pages/goos_detail/goos_detail.js
Page({/*** 页面的初始数据*/data: {indicatorDots: true,//把true改为false就可以隐藏起来autoplay: true,interval: 5000,duration: 1000,imgUrls: ["https://tse4-mm.cn.bing.net/th/id/OIP-C.3wIDYRQyag4hRd0ZEnWDnAHaHa?w=215&h=215&c=7&r=0&o=5&dpr=1.25&pid=1.7","https://tse4-mm.cn.bing.net/th/id/OIP-C.rjMm5yv8KP5YB8HelOx0mQHaHa?w=194&h=194&c=7&r=0&o=5&dpr=1.25&pid=1.7","https://tse1-mm.cn.bing.net/th/id/OIP-C._BbBRyCwa9-v0Dnaayd-8QHaHa?w=191&h=192&c=7&r=0&o=5&dpr=1.25&pid=1.7"],good: {id: 2,nowPrice: 18,oldPrice: 9.9,name: '饮料',coupon: ["5元", "10元"],promotion: ["小杯","中杯","大杯",],count: 20,size: ["小杯","中杯","大杯","特大杯"],},goods:[ {id: 2,nowPrice: 9.9,oldPrice: 18,name: '饮料',coupon: ["5元", "10元"],promotion: ["小杯","中杯","大杯",],count: 20,size: ["小杯","中杯","大杯","特大杯"],}],quantity: 0},onLoad:function (e) {var id = e.id;this.initData(id);var orders = wx.getStorageSync("orders");this.setData({quantity: orders.length});},addGood: function (e) { //添加商品到购物车wx.setStorageSync("goods",this.data.goods); //将商品保存到本地数据var id = e.target.id;var orders = wx.getStorageSync("orders");var flag = true;var newOrders = [];if (orders) { //先判断购物车里是否有该商品，如果有，就在数量上加1console.log("8");for (var i = 0; i < orders.length; i++) {console.log("9");var order = orders[i];console.log(order);if (id == order.id) {console.log("10");order.quantity = order.quantity + 1;console.log(order.quantit);flag = false;}newOrders.push(order);}}if (flag) { //如果购物车里没有该商品，就添加到购物车里var goods = wx.getStorageSync("goods");for (var i = 0; i <goods.length; i++) {var good = goods[i];if (id == good.id) {good.quantity = 1;newOrders.push(good);console.log(newOrders+"------------------------");break;}}}wx.setStorageSync("orders", newOrders); //将商品保存到本地数据wx.showToast({ //提示保存成功title: '成功',icon: 'success',duration: 2000});var page = this;page.setData({quantity: newOrders.length}); //购物年数量显示},buy: function (e) { //直接购买var id = e.target.id;wx.navigateTo({url: '../pay/pay?id=' + id,})}})

goos_detail.wxml

<!--pages/goos_detail/goos_detail.wxml-->
<!--轮播-->
<view class="haibao"><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"indicator-color="#f2f2f2" indicator-active-color="#C81623" style="height:350px;"><block wx:for="{{imgUrls}}" wx:key="imgUrls"><swiper-item><!-- {{item}} <image :src="{{item}}" class="silde-image"  mode="widthFix" /> --><image mode="widthFix" src="{{item}}" mode="widthFix"/></swiper-item></block></swiper>
</view>
<!--中部分-->
<view class="btn"><view class="nowPrice">¥{{good.nowPrice}}</view><view class="oldPrice"><view class="old">¥{{good.oldPrice}}</view><view classe="seckill"> 秒杀</view></view>
</view>
<view class="title"> {{good.name}}</view>
<view class="hr"></view>
<block wx:if="{{good.coupon.length > 0}}"><view class="promotion"><view>领券</view><block wx:for="{{good.coupon}}"><view class="item">{{item}}</view></block></view><view class="hr"></view>
</block>
<block wx:if="{{good.promotion.length > 0}}"><view class="promotion"><view>促销</view><block wx:for="{{good.promotion}}"><view class="item">{{item}}</view></block></view><view class="hr"></view>
</block>
<view class="desc">已选<block wx:if="{{good.color.length > 0}}">{{good.color[0]}}</block><block wx:if="{{good.size.length > 0}}">{{good.size[0]}}</block>,1个
</view>
<view class="line"></view>
<block wx:if="{{good.color.length > 0 }}">
</block>
<block wx:if="{{good.size.length > 0}}"><view class="condition"><text class="conditionName">尺寸</text><view class="tips"><block wx:for="{{good.size}}"><view wx:if="{{index ==0}}" class="tip select"> {{item}} </view><view wx:else class="tip">{{item}} </view></block></view></view>
</block>
<view class="condition"><text class="conditionName">数量</text><view class="tips"><view class="priceInfo"><view class="minus">-</view><view class="count">{{good.count}}</view><view class="add">+</view></view></view>
</view>
<view class="hr"></view>
<view class="desc">地址{{good.address}}</view>
<view class="line"></view>
<view class="desc"><text class="xh"> [现货]</text> <text class="xhdesc">{{good.desc}}</text></view>
<view class="line"></view>
<view class="promise"><block wx:for="{{good.promise}}"><icon type="success" size="15" color="red" />{{item}}</block>
</view>
<view class="hr"></view>
<view style="height: 50px;"></view><!--最下方--><view class="buyBtns"><view class="shoppingcart"><view class="num">{{quantity}}</view><image src="../images/bar/cart-0.png" style="width:45px;height:39px; "></image></view><view class="intocart" bindtap="addGood" id="{{good.id}}">加入购物车</view><view class="buy" id="{{good.id}}" bindtap="buy">立即购买</view>
</view>

效果图

微信小程序（九）商品详情界面相关推荐

微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
Python爬虫系列之爬取某社区团微信小程序店铺商品数据
Python爬虫系列之爬取某社区团微信小程序店铺商品数据如有问题QQ请> 点击这里联系我们 < 微信请扫描下方二维码代码仅供学习交流,请勿用于非法用途数据库仅用于去重使用,数据主要存 ...
微信小程序 - 分享商品海报
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀 ...
微信小程序直播商品接口上传图片 300006 goods img upload fail
微信小程序直播商品接口上传图片 300006 goods img upload fail 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序如何刷新当前界面
微信小程序如何刷新当前界面在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但 ...
微信小程序直播商品与直播房间管理时提示：api unauthorized hints: [mhcddo3Me-lLeTBA!]/r/napi 功能未授权
最近写微信小程序直播商品与直播房间后台管理时,调用接口一直提示:api unauthorized hints: [mhcddo3Me-lLeTBA!]/r/napi 功能未授权. 后来一查,原来是微信 ...
微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见参考该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
使用 apifm-wxapi 开发微信小程序之商品砍价模块
前言本教程是基于 "apifm-wxapi" 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: <创建 HelloWorld 项目> <使用 &q ...

微信小程序（九）商品详情界面

微信小程序（九）商品详情界面相关推荐

最新文章

热门文章