基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（5）商品简介和详情、商品评论

效果图

wxml代码

<import src="/wxParse/wxParse.wxml" /> <!--顶部切换菜单--> <view class='swiper-tab'> <view class='swiper-tab-list {{currentTab==0 ? "xuanzhong" : ""}}' data-current='0' bindtap='swichNav'> 商品 </view> <view class='swiper-tab-list {{currentTab==1 ? "xuanzhong" : ""}}' data-current='1' bindtap='swichNav'> 详情 </view> <view class='swiper-tab-list {{currentTab==2 ? "xuanzhong" : ""}}' data-current='2' bindtap='swichNav'> 评论 </view> </view> <swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight -50}}px' bindchange='huadong'> <swiper-item> <scroll-view scroll-y style='height:{{winHeight-80}}px'> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:250px;'> <block wx:for="{{images}}" wx:key="key" wx:key="item.id"> <swiper-item> <image src="{{item}}" class="slide-image2" /> </swiper-item> </block> </swiper> <view class='biaoti'> <view class='biaoti01'>{{cp_mingcheng}}</view> <view class='biaoti02'>¥ {{jiage}}</view> <view class='biaoti03'>{{cp_jianjie}}</view> </view> <view class='huise'></view> <view class='huiyuan'> <view class='huiyuan-dengji bg_hui'> 普通会员 </view> <view class='huiyuan-jiage '> ¥ {{jiage}}</view> </view> <view class='huise'></view> <view class='huiyuan' wx:if="{{str_huiyuan_jiage>0}}"> <view class='huiyuan-dengji bg_hong'> {{str_huiyuan_leixing}}会员 </view> <view class='huiyuan-jiage'> ¥ {{str_huiyuan_jiage}}</view> </view> <view class='huise'></view> <view class='xiaoshou'> <view>库存：{{cp_kucun}}件 | 已销售：{{cp_yixiaoshou}}件</view> <view></view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y style='height:{{winHeight-80}}px'> <view>{{sp_neirong}}</view> <template is="wxParse" data="{{wxParseData:article.nodes}}" style="width:100%;" /> </scroll-view> </swiper-item> <swiper-item style="background-color: #f2f2f2;"> <form bindsubmit='pinglun' > <view class='pinglun' wx:if="{{false}}"> <block wx:for="{{stars}}" wx:key="*this"> <image class="star-image" style="left: {{item*50}}px" src="{{key >= item ? selectedSrc : normalSrc}}" data-key="{{item}}" bindtap="select00" wx:key="*this"></image> </block> <view class='pinglun-biaoti'>评价（请打分）</view> <view class='pinglun-neirong'> <textarea placeholder='请输入评论，500字以内' name="neirong" auto-height></textarea> </view> <button class='pinglun-tijiao' form-type='submit'>提交评论</button> </view> </form> <block wx:for="{{pl}}" wx:key="key"> <view class='pl'> <view class='pl-yonghu'> <view class='pl-nicheng'>{{item.user_name}}</view> <view class='pl-shijian'>{{item.add_date}}</view> </view> <view class='pl-xx'> <!--image src='/images/selected.png' class='pl-img'></image--> <image wx:for="iiiii++" wx:for-item="i" wx:for-index="iiiii" wx:if="{{iiiii<item.xx}}" src='/images/selected.png' class='pl-img'></image> <!--设置wx:for-item="i" wx:for-index="iiiii" 为了防止和父类循环冲突--> ({{item.xx}}星) </view> <view class='pl-neirong'>{{item.pinlun_neirong}}</view> </view> </block> </swiper-item> </swiper> <!--底部菜单--> <view class='dibu'> <view class='navs'> <view class='nav-item' style='width:12%;' bindtap='toShouye' > <image src="/img/sp01.png" class="nav-img" /> <text>首页</text> </view> <view class='nav-item' style='width:13%;' bindtap='shoucang' > <image src="/img/sp02.png" class="nav-img" /> <text>收藏</text> </view> <view class='nav-item' style='width:15%;' bindtap='toGowuche' > <image src="/img/sp03.png" class="nav-img"/> <text>购物车</text> </view> <view class='nav-item' style='width:33%;'> <button class='bt01' bindtap='jiaGwc'>加入购物车</button> </view> <view class='nav-item' bindtap='goumai' style='width:27%;'> <button class='bt02'>立即购买</button> </view> </view> </view>

wxss代码

@import "/wxParse/wxParse.wxss"; .swiper-tab { width: 100%; border-bottom: 1px solid gray; text-align: center; line-height: 31px; display: flex; } .swiper-tab-list { display: inline-block; width: 33%; color: gray; } .xuanzhong { color: tomato; border-bottom: 3px solid tomato; } .swiper-box { width: 100%; height: 100%; display: block; overflow: scroll; } .slide-image2 { height: 100%; width: 100%; display: inline-block; overflow: hidden; } .biaoti { padding: 10px; } .biaoti01 { font-size: 16px; } .biaoti02 { color: red; font-size: 12px; } .biaoti03 { color: gray; font-size: 13px; } .huise { background-color: #eee; min-height: 5px; } .huiyuan { padding: 5px; display: flex; } .huiyuan-dengji { width: 30%; color: white; border-radius: 5px; display: flex; justify-content: center; padding: 5px; } .bg_hong{ background-color: orangered;} .bg_hui{ background-color: rgb(189, 189, 189);} .huiyuan-jiage { width: 70%; display: flex; justify-content: flex-end; margin-right: 10px; } .xiaoshou { padding: 10px; } /*底部菜单*/ .dibu { position: fixed; bottom: 0px; height: 44px; width: 100%; line-height: 44px; color: gray; border-top: 1px solid #ddd; background-color: white; font-size: 16px; text-align: center; } .navs { display: flex; } .nav-item { display: flex; align-items: center; flex-direction: column; padding: 0px; } .nav-item text { font-size: 12px; margin-top: -15px; text-align: center; } .nav-img { width: 22px; height: 22px; align-self: center; margin-top: 3px; } .bt01 { width: 100%; background-color: darkorange; color: white; font-size: 15px; border-radius: 0; height: 44px; line-height: 44px; } .bt02 { width: 100%; background-color: tomato; color: white; font-size: 15px; border-radius: 0; height: 44px; line-height: 44px; padding: 0; margin: 0; } /*评论*/ .pinglun{ display: flex; flex-direction: column; box-sizing: border-box; font-size: 14px; } .pinglun-biaoti{ line-height: 30px; padding: 5px; background-color: #f9f9f9; } .pinglun-neirong{ background-color: white; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; padding: 5px; margin-top: 50px; height: 50px; } .pinglun-tijiao{ background-color: orange; color: white; width: 90%; margin-top: 10px; } /*五星打分*/ .star-image{ position: absolute; top: 39px; width: 50px; height: 50px; src: "/images/normal.png" } /*评论内容*/ .pl{ border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; display: flex; flex-direction: column; padding: 10px; margin-top: 10px; background-color: white; } .pl-yonghu{ display: flex; border-bottom: 1px dotted gainsboro; padding-bottom: 5px; } .pl-nicheng{ flex-grow: 1; font-size: 14px; } .pl-shijian{ font-size: 12px; color: gray; } .pl-xx{} .pl-img{ width: 15px; height: 15px; } .pl-neirong{ color: gray; font-size: 12px; }

js代码

const WxParse = require('../../wxParse/wxParse.js') //获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { str_huiyuan_leixing:"", winHeight: 0, currentTab: 0, indicatorDots: true, vertical: false, autoplay: true, interval: 3000, duration: 1200, images: [], cp_tupian: "", cp_tupian1: "", cp_tupian2: "", cp_tupian3: "", cp_tupian4: "", cp_mingcheng: "", jiage: "", jiage1: "", jiage2: "", jiage3: "", cp_jianjie: "", cp_kucun: "", xiangou_shuliang: "", cp_yixiaoshou: "", cp_neirong: "", sp_neirong: "", stars: [0, 1, 2, 3, 4], normalSrc: '/images/normal.png', selectedSrc: '/images/selected.png', pl: [], user_id: "", key2: 0 }, swichNav: function(e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, huadong: function(e) { var that = this; that.setData({ currentTab: e.detail.current }) }, select00: function(e) { var that = this; var key = e.currentTarget.dataset.key + 1 console.log("得分：" + key) that.setData({ key: key - 1, key2: key }) }, pinglun: function(e) { //console.log("发生提交") //需要增加 用户是否登录提示 ？？？？？？？？？？？？？？？？？？？？？ var that = this if (this.data.user_id.length > 0) { console.log("登陆") console.log("分数：" + this.data.key2 + "| 用户id：" + this.data.user_id + "|产品id：" + this.data.cpid + "|内容：" + e.detail.value.neirong) wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_AddPinLun.asp', //asp版接口 //url: app.myapp.asp + '/wx_AddPinLun.asp', //asp版本接口 url: app.myapp.php + '/wx_AddPinLun.php', //php版本接口 //url: app.myapp.jsp + '/wx_AddPinLun.jsp', //jsp版本接口 data: { cpid: this.data.cpid, user_id: this.data.user_id, xx: this.data.key2, pinlun_neirong: e.detail.value.neirong }, success: function(res) { console.log("评论结果：" + res.data) console.log("评论结果："+res.data.zt) if (res.data.zt =="yes"){ console.log("评论ok") wx.showToast({ title: '评论成功', }) } } }) } else { console.log("没有登陆") console.log("分数：" + this.data.key2 + "| 用户id：" + this.data.user_id + "|产品id：" + this.data.cpid + "|内容：" + e.detail.value.neirong) //V2：新增登录提示和跳转 wx.showModal({ title: '登录', content: '点击确认去登录', success(res) { if (res.confirm) { console.log("点击了确认") //点击确认后执行 wx.switchTab({ url: '/pages/huiyuan/index', }) } else { } } }) } }, jiaGwc:function(){ var that = this if (this.data.user_id.length > 0) { console.log("登陆") console.log("用户id：" + this.data.user_id + "|产品id：" + this.data.cpid + that.data.cp_mingcheng + that.data.jiage) //加入购物车 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_gwc_add.asp', //asp版接口 //url: app.myapp.asp + '/wx_gwc_add.asp', //asp版本接口 url: app.myapp.php + '/wx_gwc_add.php', //php版本接口 //url: app.myapp.jsp + '/wx_gwc_add.jsp', //jsp版本接口 data: { cs_uid: this.data.user_id, cs_cpid: this.data.cpid, cs_cp_mingcheng: that.data.cp_mingcheng, //cs_jiage: that.data.jiage //普通价格 cs_jiage: that.data.str_huiyuan_jiage //登录的会员对应的分类价格 2020-05-20更新 }, success: function (res) { console.log(res.data) if (res.data.zt == "yes") { wx.showToast({ title: '加入购物车成功', }) } if (res.data.zt == "no") { wx.showToast({ title: '已经在购物车', }) } } }) } else { console.log("没有登陆") //V2：新增登录提示和跳转 wx.showModal({ title: '登录', content: '点击确认去登录', success(res) { if (res.confirm) { console.log("点击了确认") //点击确认后执行 wx.switchTab({ url: '/pages/huiyuan/index', }) } else { } } }) } }, goumai: function () { var that = this if (this.data.user_id.length > 0) { console.log("登陆") console.log("用户id：" + this.data.user_id + "|产品id：" + this.data.cpid + that.data.cp_mingcheng + that.data.jiage) //加入购物车 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_gwc_add.asp', //asp版接口 //url: app.myapp.asp + '/wx_gwc_add.asp', //asp版本接口 url: app.myapp.php + '/wx_gwc_add.php', //php版本接口 //url: app.myapp.jsp + '/wx_gwc_add.jsp', //jsp版本接口 data: { cs_uid: this.data.user_id, cs_cpid: this.data.cpid, cs_cp_mingcheng: that.data.cp_mingcheng, //cs_jiage: that.data.jiage //普通价格 cs_jiage: that.data.str_huiyuan_jiage //登录的会员对应的分类价格 2020-05-20更新 }, success: function (res) { console.log(res.data) wx.reLaunch({ url: '/pages/huiyuan/gouwuche/che_list', }) } }) } else { console.log("没有登陆") //V2：新增登录提示和跳转 wx.showModal({ title: '登录', content: '点击确认去登录', success(res) { if (res.confirm) { console.log("点击了确认") //点击确认后执行 wx.switchTab({ url: '/pages/huiyuan/index', }) } else { } } }) } }, shoucang:function(){ var that = this if (this.data.user_id.length > 0) { console.log("登陆") console.log("用户id：" + this.data.user_id + "|产品id：" + this.data.cpid ) //录入收藏数据 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_shoucang_add.asp', //asp版接口 //url: app.myapp.asp + '/wx_shoucang_add.asp', //asp版本接口 url: app.myapp.php + '/wx_shoucang_add.php', //php版本接口 //url: app.myapp.jsp + '/wx_shoucang_add.jsp', //jsp版本接口 data:{ cs_uid: this.data.user_id, cs_cpid: this.data.cpid }, success:function(res){ console.log(res.data) if(res.data.zt=="yes"){ wx.showToast({ title: '收藏成功', }) } if(res.data.zt=="no"){ wx.showToast({ title: '产品已经收藏', }) } } }) } else { console.log("没有登陆") //V2：新增登录提示和跳转 wx.showModal({ title: '登录', content: '点击确认去登录', success(res) { if (res.confirm) { console.log("点击了确认") //点击确认后执行 wx.switchTab({ url: '/pages/huiyuan/index', }) } else { } } }) } }, toShouye:function(){ wx.switchTab({ url: '/pages/index/index', }) }, toGowuche:function(){ var that = this if (this.data.user_id.length > 0) { console.log("登陆") console.log("用户id：" + this.data.user_id + "|产品id：" + this.data.cpid) wx.reLaunch({ url: '/pages/huiyuan/gouwuche/che_list', }) } else { console.log("没有登陆") //V2：新增登录提示和跳转 wx.showModal({ title: '登录', content: '点击确认去登录', success(res) { if (res.confirm) { console.log("点击了确认") //点击确认后执行 wx.switchTab({ url: '/pages/huiyuan/index', }) } else { } } }) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; //获取参数，传递过来的产品id console.log(options.cpid + options.cpmc) that.setData({ cpid: options.cpid }) //获取系统信息，手机的屏幕高度 wx.getSystemInfo({ success: function(res) { that.setData({ winHeight: res.windowHeight }) }, }) //根据产品id获取产品的信息，参数：cp_id //asp样本地址：http://www.yaoyiwangluo.com/wx_sp_info-a.asp?cp_id=632 //asp版接口 //PHP地址：wx_sp_info-a.php wx.request({ //url: app.myapp.asp + '/wx_sp_info-a.asp', //asp版 url: app.myapp.php + '/wx_sp_info-a.php', //php版 //url: app.myapp.jsp + '/wx_sp_info-a.jsp', //jsp版 data: { cp_id: options.cpid }, success: function(res) { console.log(res.data) that.setData({ cp_tupian: res.data.cp_tupian, cp_tupian1: res.data.cp_tupian1, cp_tupian2: res.data.cp_tupian2, cp_tupian3: res.data.cp_tupian3, cp_tupian4: res.data.cp_tupian4, cp_mingcheng: res.data.cp_mingcheng, jiage: res.data.jiage, jiage1: res.data.jiage1, jiage2: res.data.jiage2, jiage3: res.data.jiage3, cp_jianjie: res.data.cp_jianjie, cp_kucun: res.data.cp_kucun, xiangou_shuliang: res.data.xiangou_shuliang, cp_yixiaoshou: res.data.cp_yixiaoshou, images: [res.data.cp_tupian, res.data.cp_tupian1, res.data.cp_tupian2, res.data.cp_tupian3] }) } }) wx.getStorage({ key: 'u_login', success: function (res) { wx.getStorage({ key: 'u_flid', success: function (res) { //that.setData({ str_u_flid: res.data }) //读取会员类型 wx.request({ url: app.myapp.php + '/wx_huiyuan_fenlei_byid.php', //php版 data:{ cs_flid:res.data }, success: function (res2) { that.setData({ str_huiyuan_leixing: res2.data }) console.log("用户类型id："+ res.data) if(res.data=="1"){ that.setData({ str_huiyuan_jiage: that.data.jiage1 }) } if(res.data=="2"){ that.setData({ str_huiyuan_jiage: that.data.jiage2 }) } if(res.data=="3"){ that.setData({ str_huiyuan_jiage: that.data.jiage3 }) } } }) }, }) }, }) //根据产品id获取产品的详细信息，参数：cp_id //asp样本地址：http://www.yaoyiwangluo.com/wx_sp_info-b.asp?cp_id=632 //asp版接口 //PHP地址：wx_sp_info-a.php wx.request({ //url: app.myapp.asp + '/wx_sp_info-b.asp', //asp版 url: app.myapp.php + '/wx_sp_info-b.php', //php版 //url: app.myapp.jsp + '/wx_sp_info-b.jsp', //jsp版 data: { cp_id: options.cpid }, success: function(res) { var article = res.data; // 这里是ajax请求数据 WxParse.wxParse('article', 'html', article, that, 5); } }) //评论信息 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_Pinlun_list.asp', //asp版接口 //url: app.myapp.asp + '/wx_Pinlun_list.asp', //asp版 url: app.myapp.php + '/wx_Pinlun_list.php', //php版 //url: app.myapp.jsp + '/wx_Pinlun_list.jsp', //jsp版 data: { cpid: options.cpid }, success: function(res) { that.setData({ pl: res.data }) } }) //获得用户id wx.getStorage({ key: 'u_id', success: function(res) { that.setData({ user_id: res.data }) }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })