首页 > 小程序教程 > 微信小程序商品信息购买评分页面样式设计制作开发教程

微信小程序商品信息购买评分页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序商品信息购买评分页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="detail-container">
  <scroll-view scroll-y="{{true}}" class="section">
    <swiper indicator-dots="{{true}}"
    autoplay="{{true}}" interval="{{4000}}" duration="{{300}}" class="imgView">
      <block wx:for="{{lunboImg}}" >
        <swiper-item class="lunbo">
          <image src="{{item}}" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <view class="productInfo">
      <view class="prodeuctLeft">
        <view class="ProductName">{{ProductName}}</view>
        <view class="price">
          <text class="nowPrice">¥{{newPrice}}</text>
          <text class="oldPrice">市场价:<span>¥{{oldPrice}}</span></text>
        </view>
      </view>
      <view class="share">
          <view>
            <image src="/images/detailImages/share.png"></image>
            <text>分享</text>
          </view>
      </view>
    </view>
    <view class="pingfen">
      <text>客户评分:</text>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
    </view>
    <view class="shangpin">
      <text class="tip">商品参数</text>
      <ul>
        <li class="shangpin{{index}}" wx:for="{{goodDetail}}" wx:for-item="item">{{item}}</li>
      </ul>
    </view>
    <view class="shadow"></view>
    <view class="imgBox">
      <image wx:for="{{imgBox}}" src="{{item.ImageUrl}}"></image>
    </view>
  </scroll-view>
  <view class="footer">
    <text class="white"></text>
    <text class="addToCar" bindtap="addToCar">加入购物车</text>
    <text class="nowBuy">立即购买</text>
  </view>
  <modal class="noGood" title="加入购物车成功" confirm-text="确定" cancel-text="去结算" hidden="{{modalHidden}}" bindconfirm="hiddenModal"></modal>
</view>
 
二、wxss样式文件代码如下:
.detail-container .section .imgView {
  width: 100%;
  height: 750rpx; }
  .detail-container .section .imgView .lunbo image {
    width: 100%;
    height: 750rpx; }

.detail-container .section .productInfo {
  width: 100%;
  padding: 30rpx 30rpx 6rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #999;
  display: flex; }
  .detail-container .section .productInfo .prodeuctLeft {
    flex: 3; }
    .detail-container .section .productInfo .prodeuctLeft .ProductName {
      width: 100%;
      height: 80rpx;
      font-size: 11px;
      color: #444; }
    .detail-container .section .productInfo .prodeuctLeft .price {
      display: flex;
      width: 100%; }
      .detail-container .section .productInfo .prodeuctLeft .price .nowPrice {
        flex: 2;
        font-size: 18px;
        color: #FC8A66; }
      .detail-container .section .productInfo .prodeuctLeft .price .oldPrice {
        flex: 3;
        font-size: 11px;
        color: #999; }
  .detail-container .section .productInfo .share {
    flex: 1;
    padding: 30rpx; }
    .detail-container .section .productInfo .share view {
      margin-left: 40rpx;
      border-left: 1px solid #999;
      display: flex;
      flex-direction: column;
      padding-left: 20rpx; }
      .detail-container .section .productInfo .share view image {
        width: 36rpx;
        height: 40rpx; }
      .detail-container .section .productInfo .share view text {
        font-size: 10px;
        color: #444; }

.detail-container .section .pingfen {
  padding: 16rpx 0 8rpx 30rpx;
  border-bottom: 1px solid #999;
  height: 38rpx; }
  .detail-container .section .pingfen text {
    font-size: 10px;
    color: #999; }
  .detail-container .section .pingfen image {
    width: 32rpx;
    height: 32rpx;
    margin-left: 6rpx; }

.detail-container .section .shangpin {
  width: 100%; }
  .detail-container .section .shangpin .tip {
    width: 100%;
    padding: 16rpx 0 30rpx 30rpx;
    font-size: 12px;
    color: #000; }
  .detail-container .section .shangpin ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
    .detail-container .section .shangpin ul li {
      width: 375rpx;
      padding: 10rpx 0 10rpx 60rpx;
      font-size: 10px;
      color: #707070;
      box-sizing: border-box; }
    .detail-container .section .shangpin ul .shangpin6 {
      width: 700rpx; }

.detail-container .section .shadow {
  height: 32rpx; }

.detail-container .section .imgBox image {
  height: 500rpx; }

.detail-container .footer {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-color: #F1F1F1;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row; }
  .detail-container .footer .white {
    flex: 2; }
  .detail-container .footer .addToCar {
    flex: 1;
    background-color: #f47920; }
  .detail-container .footer .nowBuy {
    flex: 1;
    background-color: #FF2501; }
三、js页面代码如下:
Page({
  data: {
    goodInfo:[],
    modalHidden:true,
    lunboImg:[],
    imgBox:[],
    ProductName:[],
    newPrice:"",
    oldPrice:"",
    goodDetail:[],
    shoppingCartInfo:{
      goodId:"",
      goodImg:"",
      goodName:"",
      goodPrice:"",
      goodSum:1
    }
  },
  onLoad: function (options) {
    var goodId=options.goodId;
    var that=this;
    wx.request({
      url: 'http://localhost:81/mock/detail.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        for(var i=0;i<res.data.length;i++){
          if(goodId==res.data[i].ProductId){
            var arrImg=[];
            var arrDetail=[];
            for(var j=5;j<10;j++){
              arrImg.push(res.data[j].ProductImageList[j].ImageUrl)
            }
            for(var k=0;k<res.data[i].ProductParamList.length;k++){
              arrDetail.push(res.data[i].ProductParamList[k].ParamName+":"+res.data[i].ProductParamList[k].ParamValue);
            }
            that.setData({
              goodInfo:res.data[i],
              imgBox:res.data[i].ProductImageList,
              lunboImg:arrImg,
              ProductName:res.data[i].ProductName,
              goodDetail:arrDetail,
              'shoppingCartInfo.goodId':goodId,
              'shoppingCartInfo.goodImg':res.data[i].ProductImageList[0].ImageUrl
            });
          }
        }
      },
      fail: function (error) {
        console.log(error);
      }
    });
    wx.request({
      url: 'http://localhost:81/mock/sort'+goodId.substring(1,2)+'.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        for(var i=0;i<res.data.length;i++){
          if(goodId==res.data[i].ProductId){
            that.setData({
              newPrice:res.data[i].ProductSalePrice,
              oldPrice:res.data[i].ProductMarketPrice,
              'shoppingCartInfo.goodName':res.data[i].ProductName,
              'shoppingCartInfo.goodPrice':res.data[i].ProductSalePrice
            })
          }
        }
      },
      fail: function (error) {
        console.log(error);
      }
    });
  },
  addToCar:function(){
    this.setData({
      modalHidden:false
    })
    if(wx.getStorageSync('shoppingCartInfo')){
      var arrInfo= wx.getStorageSync('shoppingCartInfo');
      var flag=true;
      for(var i=0;i<arrInfo.length;i++){
        if(this.data.shoppingCartInfo.goodId==arrInfo[i].goodId){
          arrInfo[i].goodSum++;
          flag=false;
        }
      }
      if(flag){
        arrInfo.push(this.data.shoppingCartInfo);
      }
    }else{
      var arrInfo=[];
      arrInfo.push(this.data.shoppingCartInfo);
    }
    wx.setStorageSync('shoppingCartInfo',arrInfo);
    console.log(wx.getStorageSync('shoppingCartInfo'));
  },
  hiddenModal:function(){
    this.setData({
      modalHidden:true
    })
  }
})

模板简介:该模板名称为【微信小程序商品信息购买评分页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 22,139次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-04
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 微信模板 微信文章 表格式简历模板 单页式简历模板 微信素材 html5 自适应 微信图片 微信公众平台
您可能会喜欢的其他模板