实现商品详情页

json里边设置一下页面标题"navigationBarTitleText": "商品详情"

界面组成

上方由一个轮播图展示，
中间为商品信息，后台会返回图文详情富文本，前台只需赋值
下方固定一个工具栏

客服

分享

购物车

添加购物车

立即购买

界面编写

分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的
加入购物车:如果已经加入则提示已经加入…

<!--pages/goods_detail/goods_detail.wxml-->
<view><view class="index_swiper"><swiper indicator-dots autoplay circular><swiper-item wx:for="{{detailList.pics}}" wx:key="*this"><navigator bindtap="preview" data-src="{{item.pics_mid}}"><image src="{{item.pics_mid}}" mode="widthFix" /></navigator></swiper-item></swiper><view class="context"><view class="price">￥{{detailList.goods_price}}</view><view class="title"><view class="title_name">{{detailList.goods_name}}</view><view class="_xian"></view><view class="like" bindtap="shoucang" ><view class="iconfont icon-shoucang" style="color: {{color}};"></view>收藏</view></view></view><view class="line"></view><view><rich-text nodes="<h1 style='color:red;margin-left:7px;'>图文详情</h1>"></rich-text><view class="line"></view><rich-text nodes="{{detailList.goods_introduce}}"></rich-text></view><view class="btm_tool"><view class="tool_item"><view class="iconfont icon-kefu"></view><view>客服</view>
</view><view class="tool_item"><view class="iconfont icon-fenxiang"></view><view>分享</view></view><navigator url="/pages/cart/cart" open-type="switchTab" class="tool_item"><view class="iconfont icon-gouwuche"></view><view>购物车</view></navigator><view class="tool_item btn_cart" bindtap="addcart">加入购物车</view><view class="tool_item btn_buy" bindtap="over">立即购买</view>
</view></view><!--分享--><button open-type="share" style="position: fixed;bottom: 0;width: 2vw; height:5vh;left: 120rpx;background-color: transparent;border:none"></button><!--客服--><button open-type="contact" size="mini" style="position: fixed;; bottom: 0; background-color: transparent;border:none "></button>
</view>

样式编写

swiper{height: 65vw;text-align: center;
}
image{width: 60%;
}
.context{font-size: 30rpx;
}
.context .price{font-size: 40rpx;color: var(--themeColor);
}
.context .title{display: flex;
}
.context .title .title_name{line-height: 50rpx;flex: 2;
}
.context .title ._xian{margin-right: 20rpx;height: 80rpx;width: 10rpx;background-color: #666666;
}
.context .title .like{text-align: center;
}
.line{margin-top: 14rpx;width: 100%;height: 10rpx;background-color: #666666;
}.goods_info .goods_info_title {color: #af64ed;padding: 20rpx;font-size: 32rpx;}.btm_tool {position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx;background-color: white;display: flex;}.btm_tool .tool_item {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;}.btm_tool .btn_cart {flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: darkkhaki;color: #ffffff;font-size: 30rpx;font-weight: 600;}.btm_tool .btn_buy {flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;color: #ffffff;font-size: 30rpx;font-weight: 600;}

JS方法编写

data属性:

color：收藏的图标颜色

detailList:商品信息数据

id:商品id

over:购买

方法:

shoucang:用于收藏商品,收藏过的会提示

getdetail:获取商品详情信息并且赋值给List，还会向本地添加浏览记录

addcart：添加至购物车

wx.previewImage :图片预览

import {request} from '../../utils/request'
Page({/*** 页面的初始数据*/data: {detailList:{},color:'black',id:{}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({id:options})},async getdetail(options){let ret=await request('goods/detail',options);this.setData({detailList:ret.data.message})let newarr=[];newarr=this.data.detailList;newarr.checked=false;   //定义是否被选中,为购物车铺路console.log(newarr);this.setData({detailList:newarr})let userinfo=wx.getStorageSync("userinfo");if(userinfo!=''){let shoucang=wx.getStorageSync('shoucang') || [];if(shoucang!='[]'){let index=shoucang.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})console.log(index);if(index!=-1){this.setData({color:'orange'})}}//历史记录let hostry=wx.getStorageSync('hostry') || [];console.log(hostry);if(hostry.length==0){var hoarr=[];hoarr.push(this.data.detailList);wx.setStorageSync('hostry',hoarr);}else{let index=hostry.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})if(index!=-1){hostry.splice(index,1);//消除重复}hostry.push(this.data.detailList);wx.setStorageSync('hostry',hostry);}}console.log(this.data.detailList.goods_price);},shoucang(e){let userinfo=wx.getStorageSync("userinfo");if(userinfo==''){wx.showToast({title: '请先登录...',icon: 'error',duration: 1000//持续的时间})}else{let shoucang=wx.getStorageSync('shoucang') || [];let index=shoucang.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})console.log(index);if(index==-1){if(shoucang.length!=0){shoucang.push(this.data.detailList);wx.setStorageSync('shoucang', shoucang);}else{var scarr=[];scarr.push(this.data.detailList);wx.setStorageSync('shoucang',scarr);}wx.showToast({title: '收藏成功',icon: 'success',duration: 1000//持续的时间})this.setData({color:'orange'})}else{shoucang.splice(index,1);//取消收藏进行删除wx.setStorageSync('shoucang', shoucang);wx.showToast({title: '取消收藏成功',icon: 'success',duration: 1000//持续的时间})this.setData({color:'black'})}}},addcart(){let userinfo=wx.getStorageSync("userinfo");if(userinfo==''){wx.showToast({title: '请先登录...',icon: 'error',duration: 1000//持续的时间})}else{let cart=wx.getStorageSync('cart') || [];let index=cart.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})if(index==-1){if(cart.length!=0){cart.push(this.data.detailList);wx.setStorageSync('cart', cart);}else{var scarr=[];scarr.push(this.data.detailList);wx.setStorageSync('cart',scarr);}wx.showToast({title: '添加成功',icon: 'success',duration: 1000//持续的时间})wx.switchTab({url: '/pages/cart/cart',})}else{wx.showToast({title: '不可重复添加',icon: 'error',duration: 1000//持续的时间})}}},/*图片预览 */preview(e){let src=e.currentTarget.dataset.src;let bigsrc=this.data.detailList.pics.map((item)=>{return item.pics_big_url;})wx.previewImage({current:src,    //原图片路径urls:bigsrc,  //图片放大路径})},//购买over(e){var sz=[];var orderCode=0;// 6位随机数(加在时间戳后面)for (var i = 0; i < 6; i++){ orderCode += Math.floor(Math.random() * 10);}// 时间戳(用来生成订单号)orderCode = 'D' + new Date().getTime() + orderCode;// 打印console.log(orderCode)// D1601545805958923658console.log(this.data.detailList,'对应数量:'+1,'总价钱:'+this.data.detailList.goods_price,'总数量:'+1);let good={goods:this.data.detailList,shu:1,sum:this.data.detailList.goods_price,num:1,orderid:orderCode}sz.push(good);wx.setStorageSync('payList', sz);wx.showToast({title: '正在生成订单',icon:"loading",duration: 800//持续的时间})wx.navigateTo({url: '/pages/pay/pay',})},/*** 生命周期函数--监听页面显示*/onShow: function () {this.getdetail(this.data.id);},
})

效果图

刚进来时…

点击图片预览:

点击分享

成功实现~

微信小程序商城项目实战(第四篇:商品详情页)相关推荐

微信小程序商城项目实战(第十一篇:商品收藏+历史浏览管理)
商品收藏+历史浏览管理商品收藏+历史浏览页面分析代码实现效果图展示商品收藏: 历史浏览: 商品收藏+历史浏览页面共用一个页面分析顶部改为"商品收藏" 上方为导航栏: ...
微信小程序商城项目实战(第七篇:生成订单支付页)
订单支付分析代码实现效果图展示分析顶部改为"支付" 上方为地址,跳转至地址管理,可修改下方为订单信息最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页 ...
微信小程序商城项目实战(第十篇:订单管理)
订单管理订单页面分析代码实现效果图展示订单详情页分析详解效果图付完款的未付款的订单页面分析顶部改为"我的订单" 上方为导航栏:全部.待付款.待发货.退款/ ...
微信小程序商城项目实战(第五篇:购物车)
实现购物车 json里边设置一下页面标题"navigationBarTitleText": "购物车" 界面组成上方由一个按钮跳转到收货地址管理, 中间为购物 ...
微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js 效果图意见反馈做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能 request.js 全局样式组件(搜索框) 首页代码编写效果图项目搭建后端接口:https://www.showdoc.c ...
微信小程序商城项目实战(第二篇:分类页)
实现分类页修改json文件并且引入搜索框 {"usingComponents": {"search-input":"../../components ...
《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买
编辑推荐在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位,据相关统计,微信月活跃用户已达10亿之多,且占据着中国用户30%以上的应用时间, ...
推荐一个微信小程序商城项目
推荐一款实用的微信小程序商城项目,这个项目不仅有商城基本的功能,比如:商品管理.订单管理.用户管理,还有分销功能,具备广告.优惠券等功能. 技术选型后端采用 Spring 技术栈,使用到的框架主要包 ...
一款开源的微信小程序商城项目，接外包直接拿去改改，就能用（附源码）。。。...
大家好,今天,推荐一个小程序商城项目. 上次是谁要小程序商城项目啊,猿哥帮你找到了. 这是我目前见过的最好的小程序商城项目.功能完整,代码结构清晰.值得推荐. 后端部分虽然是PHP的,但是建议有研究精 ...

微信小程序商城项目实战(第四篇:商品详情页)

实现商品详情页

界面组成

界面编写

样式编写

JS方法编写

效果图

微信小程序商城项目实战(第四篇:商品详情页)相关推荐

最新文章

热门文章