微信小程序：收藏、客服、分享、加入购物车、图片放大预览

微信小程序包含功能

·轮播

·图片放大预览

·收藏

·客服

·加入购物车

在goods_detail下的index.wxml写页面代码

<!--pages/goods_detail/index.wxml-->
<!-- <text>pages/goods_detail/index.wxml</text> -->
<!-- 详情轮播图 -->
<view class="detail_swiper"><swiper autoplay circular indicator-dots interval="3000"><swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bind:tap="handlePrevewImage" data-url="{{item.pic_mid}}"><image mode="widthFix" src="{{item.pics_mid}}"></image></swiper-item></swiper>
</view>
<!-- 详情轮播图 --><!-- 价格 -->
<view class="goods_price">￥{{goodsObj.goods_price}}</view>
<!-- 价格 --><!-- 介绍和收藏 -->
<view class="goods_name_row"><!-- 左 --><view class="goods_name">{{goodsObj.goods_name}}</view><!-- 右 --><view class="goods_collect" bind:tap="handleCollect"><text class="iconfont {{isCollect?'icon-shoucang2':'icon-shoucang'}} "></text><view class="collect_text">收藏</view></view>
</view>
<!-- 介绍和收藏 --><!-- 详情 -->
<view class="goods_info"><view class="goods_info_title">图文详情</view><view class="goods_info_content"><rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text></view>
</view>
<!-- 详情 --><!-- 详情页底部 -->
<view class="btm_tool"><view class="tool_item"><view class="iconfont icon-kefu"></view><view>客服</view><button open-type="contact"></button></view><view class="tool_item"><view class="iconfont icon-fenxiang"></view><view>分享</view><button open-type="share"></button></view><navigator open-type="switchTab" url="/pages/cart/index" class="tool_item"><view class="iconfont icon-gouwuche"></view><view>购物车</view></navigator><view class="tool_item btn_cart" bind:tap="handleCartAdd">加入购物车</view><view class="tool_item btn_buy">立即购买</view></view>
<!-- 详情页底部 -->

在goods_detail下的index.wxss写样式

/* pages/goods_detail/index.wxss */
.detail_swiper swiper{height: 65vw;text-align: center;
}
.detail_swiper swiper image{width: 60%;
}
.goods_price{padding: 15rpx;font-size: 32rpx;font-weight: 600;color: var(--themeColor);
}
.goods_name_row{border-top: 5rpx solid #dedede;border-bottom: 5rpx solid #dedede;padding: 10rpx 0;display: flex;
}
.goods_name{flex: 5;color: #000;font-size: 30rpx;padding: 0 15rpx;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
.goods_collect{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1rpx solid #000;
}
.icon-shoucang{color: var(--themeColor);
}
.goods_info_title{font-size: 32rpx;color: var(--themeColor);font-weight: 600;padding: 20rpx;border-bottom: 1rpx solid #dedede;
}.btm_tool{border-top: 2rpx solid #dedede;position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx;background-color: #fff;display: flex;
}
.tool_item{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;
}
.tool_item button{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;
}
.btn_cart{flex: 1.5;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: orange;color: #fff;font-size: 30rpx;font-weight: 600;
}
.btn_buy{flex: 1.5;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;color: #fff;font-size: 30rpx;font-weight: 600;
}

在goods_detail下的index.js写逻辑代码

// pages/goods_detail/index.js
// 引入封装好的请求数据的js文件
import { request } from '../../request/index.js';
// 支持es7的async语法
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({/*** 页面的初始数据*/data: {goodsObj:[],isCollect:false},//商品对象goodsInfo:{},/*** 生命周期函数--监听页面加载*/onShow: function () {//获取上一页传过来的数据let pages = getCurrentPages();let currentPage = pages[pages.length-1];let options = currentPage.options;const {goods_id} = options;this.getGoodsDetail(goods_id);},//获取商品详情数据async getGoodsDetail(goods_id){const goodsObj = await request({ url:"/goods/detail",data:{goods_id}});console.log(goodsObj);this.goodsInfo=goodsObj;//1 获取缓存中商品收藏的按钮let collect = wx.getStorageSync("collect") || [];//2 判断当前商品是否被收藏let isCollect = collect.some(v => v.goods_id===this.goodsInfo.goods_id);this.setData({goodsObj:{goods_name:goodsObj.goods_name,goods_price:goodsObj.goods_price,goods_introduce:goodsObj.goods_introduce.replace(/\.webp/g,'.jpg'),//正则表达式pics:goodsObj.pics},isCollect})},//点击轮播图放大预览handlePrevewImage(e){console.log("你好");//先构造要预览的图片数组const urls = this.goodsInfo.pics.map(v => v.pics_mid);//接收传递过来的URL图片const current = e.currentTarget.dataset.url;wx.previewImage({current:current,urls:urls});},//点击加入购物车handleCartAdd(){console.log("gouwuc");//1 获取缓存中的购物车数组let cart = wx.getStorageSync("cart") || [];//2 判断商品对象是否存在数组中let index = cart.findIndex(v => v.goods_id===this.goodsInfo.goods_id);//遍历console.log(index);if(index===-1){//3 不存在 第一次添加this.goodsInfo.num=1;this.goodsInfo.checked=true;cart.push(this.goodsInfo);}else{//4 已经存在 执行num++cart[index].num++;}//5 把购物车重新添加回缓存中wx.setStorageSync("cart", cart);//6 弹窗提是wx.showToast({title: '加入购物车成功',icon: 'success',mask: true});},handleCollect(){let isCollect = false;//1 获取缓存中商品收藏的数组let collect = wx.getStorageSync("collect") || [];//2判断该商品是否被收藏过let index = collect.findIndex(v=>v.goods_id===this.goodsInfo.goods_id);//当index不等于-1时表示已经收藏过if(index!=-1){collect.splice(index,1);wx.showToast({title: '取消成功',icon: 'success',mask: true,});}else{collect.push(this.goodsInfo);isCollect=true;wx.showToast({title: '收藏成功',icon: 'success',mask: true,});}//4 把数组存入缓存中国wx.setStorageSync("collect", collect);this.setData({isCollect})}
})

微信小程序：收藏、客服、分享、加入购物车、图片放大预览相关推荐

微信小程序在线客服系统都有哪些功能？
微信小程序的用户已经破6亿,不少企业都看准了小程序这块大蛋糕.但是想要把握住小程序红利,除了做好运营推广外,用户服务也是重中之重.微信小程序自带的客服系统却很难满足用户服务的需求,于是很多小程序使用者 ...
关于微信小程序第三方客服接入调查
微信小程序----第三方客服接入调查简介:第三方客服相比微信小程序原生客服,通常来说,会有更强的只能辅助系统,更好的服务营销能力,适用于对服务质量.用户留存转化率以及访客价值挖掘有更高期待的企业. ...
微信小程序绑定客服，接收不到消息？
微信小程序绑定客服,无法接收用户消息客服文档添加客服 <button class="serviceBtn" open-type="contact"&g ...
许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还在为因为性格腼 ...
微信小程序接入客服功能
微信小程序接入客服功能 1.提供客服入口 // 通过组件方式 <contact-button type="default-light" size="20" ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序实现客服功能、word文件下载到本地
微信小程序项目开发中,遇到联系客服和word文档打印(下载)功能,记录一下,以便查阅. 一.客服功能官方文档 1.在小程序中加入客服消息按钮: 使用button按钮,设置open-type='con ...
微信小程序联系客服对接网易七鱼
第一步:注册网易七鱼账号(自己可以随便注册个玩玩,新账号有7天的免费试用期). 第二步:绑定微信小程序点击绑定微信小程序,选择一键授权绑定(小程序管理员扫一扫二维码),就是这么简单,别怀疑,就是这样 ...
微信小程序调用客服接口
实现思路由于小程序接口开发比较完善,所以我们直接调用微信小程序客服接口就可以.但必须阅读下面的接口文档 (1)客服功能使用指南 https://developers.weixin.qq.com/mi ...
微信小程序多客服系统相关实现方式
为什么自己的小程序,不管咨询什么商品,都是同一个客服的会话框?而蘑菇街,拼多多等小程序,每个店铺却都有自己专门的客服呢? 下面教你一个 5 分钟就能实现的方法! 使用[客服聊天助手]小程序插件,直接 ...

微信小程序：收藏、客服、分享、加入购物车、图片放大预览

微信小程序：收藏、客服、分享、加入购物车、图片放大预览

微信小程序包含功能

在goods_detail下的index.wxml写页面代码

在goods_detail下的index.wxss写样式

在goods_detail下的index.js写逻辑代码

微信小程序：收藏、客服、分享、加入购物车、图片放大预览相关推荐

最新文章

热门文章