首页 > 小程序教程 > 微信小程序酒厂厂家详情详细签约页面设计制作开发教程

微信小程序酒厂厂家详情详细签约页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒厂厂家详情详细签约页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/signedFactory/factoryDetail.wxml-->
<view class="container">
   <view class="factory-info margin-top-20">
        <view class="factory-info-hd font-size-18 font-color-c24e4e">
             {{info.factory_name}}
        </view>
        <view class="factory-info-bd">
           <image src="{{item}}" wx:for="{{info.factory_img}}"></image>
        </view>
        <view class="factory-info-ft font-color-333">
          {{info.factory_Int}}
        </view>
   </view>
   <view class="factory-foods margin-top-20">
      <view class="factory-info-hd font-size-18 font-color-c24e4e" style="padding-left:10rpx;">厂家产品</view>
     <navigator url="goodDetail" class="goodsList line-before-bottom" hover-class="weui-cell_active" wx:for="{{goodsList}}" wx:for-item="goodlist" data-id="{{goodlist.id}}">
        <image class="listimg" src="{{goodlist.img }}"></image>
        <view class="listinfo">
        <text class="font-color-hei title">{{goodlist.name}}</text>
        <text class="font-color-999 font-size-12" style="margin-bottom:18rpx;">酒精度:{{goodlist.purity}}</text>
        <text class="font-color-999 font-size-12">净含量:{{goodlist.weight}}</text>
        <view class="listinfo-ft"> <text class="font-color-999 font-size-12">包装规格:{{goodlist.norm}}</text><text class="font-color-c24e4e ">¥<text style="font-size:40rpx;">{{goodlist.price}}</text></text></view>
        </view>
     </navigator>
   </view>  
   <view class="policy margin-top-20 font-color-333">
      <view class="factory-info-hd font-size-18 font-color-c24e4e" >奖励政策</view>
      <view class="policy-text">以公司产品价格表的定价为基础。销售人员对需方让利,产品销售价格低于公司定价的,需由主管销售厂长同意,报公司经理审核同意后方可签定合同。</view>
      <view class="policy-text1">
            <view class="text">普通经纪人:</view>
            <view  class="textinfo">以公司产品价格表的定价为基础。销售人员对需方让利。</view>
      </view>
      <view class="policy-text1">
            <view class="text">高级经纪人:</view>
            <view  class="textinfo">以公司产品价格表的定价为基础。销售人员对需方让利。</view></view>
   </view>  
   <view style="width:100%; height:110rpx;"></view>
   <view class="button-box font-color-white" bindtap="openWin">
       签约该厂家
   </view>
</view>


 
二、wxss样式文件代码如下:
/* pages/signedFactory/factoryDetail.wxss */
.factory-info{
    padding: 30rpx;
    background-color: #ffffff;
}
.factory-info-hd{
    display: flex;
}
.factory-info-bd{
    display: flex;
    flex-direction: row;
     justify-content: space-between;
     margin: 32rpx 0 30rpx;

}
.factory-info-bd image{
    display: flex;
    height: 154rpx;
    width: 210rpx; 
}
.factory-info-ft{
    text-indent: 2em;
    text-align:justify;
}
.factory-foods{
    background-color: #ffffff;
    padding: 30rpx 20rpx 0;
}
.policy{
    background-color: #ffffff;
    padding: 30rpx;
}
.listinfo{
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1;
}

.listinfo .title{
    margin: 20rpx 0px;
}
.goodsList{
    padding: 20rpx 0;
    display: flex;
    flex-direction: row;
}
.listinfo-ft{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.goodsList .listimg{
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
}
.policy-text{
    text-indent: 2em;
    margin-top: 30rpx;
}
.policy-text1{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    margin-top: 20rpx;
}
.policy-text1 .text{
    width: 180rpx;
    height: auto;

}
.policy-text1 .textinfo{
    display: flex;
    flex: 1;
}
.button-box{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    width: 100%;
    height: 110rpx;
    align-items: center;
    justify-content: center;
    background-color: #c24e4e;
}


三、js页面代码如下:
// pages/signedFactory/factoryDetail.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      info:{
              factory_name:'仁怀市茅台镇永泰酒业有限公司',
              factory_Int:'贵州省仁怀市茅台镇永泰酒业股份有限公司位于美丽的赤水河畔,与驰名中外的茅台集团共享得天独厚的土壤、气候、水质和微生物群等优越的自然条件。厂区占地面积60余亩,厂房面积5000多平方米,拥有多口酿造使用多年的老窖池,目前年生产能力约为1千多吨原酒。在茅台镇众多的酒厂中,永泰酒业公司是为数不多的资深厂家之一。',
              factory_img:[
                 '/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg'
              ]
            },
       goodsList:[{
          id:1,
          name:'永泰老酒1915 六瓶/件',
          img:'/assets/testimages/timg1.jpg',
          purity:'53%vol',
          weight:'500ml/瓶',
          norm:'6瓶/ 件',
          price:2699
        },{
          id:2,
          name:'永泰老酒1915 六瓶/件',
          img:'/assets/testimages/timg1.jpg',
          purity:'53%vol',
          weight:'500ml/瓶',
          norm:'6瓶/ 件',
          price:2699
        }]      
    })
  },
  openWin(){
      wx.navigateTo({
        url: 'signedApply'
      })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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