<!--pages/goods1/goods1.wxml-->
<text>这是一个测试</text>
<!--商品幻灯片-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner"
duration="{{duration}}" circular="{{duration}}">
<block wx:for="{{goods_img}}" wx:key="goods_info">
<swiper-item>
<image src="{{imghref}}{{item.img}}" class="slide-image" mode="aspectFill" data-src='{{imghref}}{{item.img}}'
bindtap="previewImage" />
</swiper-item>
</block>
</swiper>
<!--商品幻灯片 end-->
<view class="info-price clear">
<view class='price'>￥{{goods_info.goods_price}} </view>
<view class='fenxiang'>
<button class='fxbtn' open-type="share">
<view style='height:20px;margin-top:8px;'>
<image src='/img/mryhtx.jpg' mode="aspectFill"></image>
</view>
<view>分享</view>
</button>
</view>
</view>
<view class="info-title">
<text>{{goods_info.goods_title}}</text>
</view>
<view style="border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;">
<view class="clearfix flex grey gridXt">
<text class="sub">
<block wx:if='{{goods_info.goods_yunfei==0.00}}'>运费：包邮</block>
<block wx:else>运费：{{goods_info.goods_yunfei}}</block>
</text>
<text class="sub">库存：{{goods_info.goods_kucun}}</text>
<text class="sub">销量：{{goods_info.goods_xiaoliang}}</text>
</view>
</view>
<block wx:if="{{pjDataList!=''}}">
<!--评价-->
<view class='pj_box'>
<view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
<view style='float:left;'>商品评价</view>
<view style='float:right;margin-left:2px;margin-top:-1px;'>
<image src="/img/mryhtx.jpg" class="ico_img_jt"></image>
</view>
<view style='float:right;font-size:12px;color:#A2A2A2;'>
<navigator url="pjList?id={{goods_id}}">查看全部</navigator>
</view>
<view class='clear'></view>
</view>
<block wx:for="{{pjDataList}}" wx:for-item="item" wx:key="pj">
<view class="list_item">
<view class='pj_u_info clear'>
<view class='header_img'>
<image src="{{item.headpic}}" mode="aspectFit"></image>
</view>
<view class='name'>{{item.author}}</view>
<view class='time'>{{item.add_time}}</view>
</view>
<view class='pj_cont'>
{{item.content}}
</view>
</view>
</block>
</view>
</block>
<!--商品详情-->
<view class='details_box'>
<view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
<view>商品详情</view>
</view>
<view style='padding:10px 0px;'>
<view class="wxParse">
{{goods_info.content}}
</view>
</view>
</view>
<!--底部浮动 start-->
<view class="foot-nav mt15">
<view class="flex con gridXt tc">
<view class="fast-links mr15 flex f12">
<view class="sub gridYr" bindtap='shoucang'>
<text class="iconfont {{is_shoucang==0?'icon-shoucang1':'icon-shoucang2'}}">收藏</text>
</view>
<view class="sub kefu">
<button open-type="contact">
<text class="iconfont icon-lianxikefu">客服</text>
</button>
</view>
<view class="sub gridYr">
<text class="iconfont icon-gouwuche">购物车</text>
</view>
</view>
<view class="add-cart sub f16">
<button class="add-cart-btn" bindtap='buy'>立即购买</button>
</view>
</view>
</view>
// pages/goods1/goods1.js
// index/details.js
Page({
/**
* 页面的初始数据
*/
data: {
is_shoucang: 0,
goods_info: {
goods_id: 1,
goods_title: "商品标题1",
goods_price: '100',
goods_yunfei: 0,
goods_kucun: 100,
goods_xiaoliang: 1,
content: '商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情'
},
goods_img: [{
'img': '26&gp=0.jpg'
},
{
'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.sooshong.com%2Fpicture%2Fuserpic2%2F2013-8-8%2F574973201388164942.jpg&refer=http%3A%2F%2Fpic.sooshong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=37e1728bfdcf7cd60b653084960e1cfe'
},
{
'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F20%2F37%2FQpKhSYBpcK.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=5c96e332bfee553001bcc4b7807bd90c'
},
{
'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F4763a03d-ff3e-485b-a4ba-1278ad50223a%40r_750w_750h_ss1.jpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=578694ae6a3194f8285c64277d5dc34c'
},
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
pjDataList: [{
headpic: '/img/mryhtx.jpg',
author: '张三',
add_time: '2018-06-01',
content: '好评好评，真实太好了!'
},
{
headpic: '/img/mryhtx.jpg',
author: '张三',
add_time: '2018-06-01',
content: '好评好评，真实太好了!'
}
], //评价数据
},
previewImage: function (e) {
var current = e.target.dataset.src;
var href = this.data.imghref;
var goodsimg = this.data.goods_img;
var imglist = [];
for (var i = 0; i < goodsimg.length; i++) {
imglist[i] = href + goodsimg[i].img
}
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: imglist // 需要预览的图片http链接列表
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
.clear {
clear: both;
overflow: hidden;
}
.banner {
height: 300px;
}
.slide-image {
width: 100%;
height: 100%;
}
/*分享按钮*/
.fenxiang button::after {
border: none;
}
.fxbtn {
background: none;
border: 0px;
margin: 0px;
padding: 0px;
border-radius: 0px;
font-size: 12px;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.flex>.sub {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
.info-title {
background: #fff;
padding: 10px 15px;
font-size: 15px;
}
.info-price {
border-bottom: 1px solid #F6F6F6;
background: #fff;
padding: 0px 15px;
}
.price {
float: left;
height: 50px;
line-height: 50px;
color: #FF6666;
font-size: 25px;
}
.fenxiang {
text-align: center;
font-size: 12px;
color: #999;
width: 50px;
line-height: 20px;
overflow: hidden;
float: right;
}
.fenxiang image {
width: 20px;
height: 20px;
}
.price em {
font-size: 12px;
margin-left: 20px;
}
.flex {
position: relative;
width: auto;
margin: 0 -15px;
padding: 3px 15px 0;
}
.store-info {
background: #fff;
}
.store-info .store,
.store-info .rz-item {
padding: 10px 15px;
}
.store-info .rz-item view {
margin-right: 10px;
}
.list_item {
position: relative;
padding: 15px 10px;
background: #fff;
border-bottom: 1px solid #f5f5f5;
}
.details_box {
margin-top: 10px;
padding: 0 15px;
font-size: 13px;
background: #fff;
}
.pj_box {
margin-top: 10px;
padding: 0 15px;
font-size: 13px;
background: #fff;
}
.ico_img_jt {
vertical-align: middle;
width: 16px;
height: 16px;
}
.pj_u_info .header_img {
float: left;
}
.pj_u_info .header_img image {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
}
.pj_u_info .name {
float: left;
margin-left: 10px;
font-size: 15px;
color: #333;
}
.pj_u_info .time {
float: right;
font-size: 12px;
color: #999;
}
.pj_cont {
font-size: 13px;
}
.pj_img {
margin: 10px 10px 0px 10px;
width: 120px;
height: 100px;
}
.foot-nav {
height: 46px;
}
.foot-nav .con {
position: fixed;
height: 46px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: 999;
}
.fast-links {
width: 160px;
line-height: 18px;
text-align: center;
}
.fast-links .iconfont {
padding: 5px 0;
}
.fast-links .iconfont::before {
display: block;
margin-top: 5px;
font-size: 18px;
}
.notempty {
position: relative;
}
.notempty::after {
content: "";
display: block;
width: 9px;
height: 9px;
border: 1px solid #fff;
border-radius: 50%;
background: #e64340;
position: absolute;
top: 5px;
right: 50%;
margin-right: -16px;
}
.add-cart .add-cart-btn {
background: linear-gradient(to right, #FF7A34, #EE32FF);
color: #fff;
border-radius: 50px;
padding: 0px;
width: 150px;
height: 35px;
line-height: 35px;
margin-top: 5px;
margin-right: 15px;
}
.kefu button {
border: none;
background: none;
display: block;
padding: 0px;
margin: 0px;
line-height: 1.5em;
font-size: inherit;
}
.kefu button::after {
border: none;
}
.kefu .button-hover {
color: #333;
background: none;
}
.kefu button .iconfont {
padding: 0px;
}
.icon-shoucang2 {
color: red;
}
Google发布了对其GitHub上的Chrome浏览器进行幽灵攻击的概念验证代码。专家们决...
深or浅拷贝 深浅拷贝 前言 一、深浅拷贝哪家强 二、写时拷贝 总结 前言 之前我们...
前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改。但是小程序页面...
【51CTO.com快译】去年，微软悄然发布了新的内置Windows 10命令行应用程序和免费...
什么是Flyway 转载： https://blog.waterstrong.me/flyway-in-practice/ Flyway ...
git fetch和git pull都可以将远端仓库更新至本地那么他们之间有何区别想要弄清楚...
GitLab 安装踩坑 502错误码和访问卡顿解决办法 Gitlab对内存的要求高，我的服务...
全面了解html.css溢出 XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml !DOCTYPEht...
一、作用域 作用域是什么 几乎所有的编程语言都有一个基本功能，就是能够存储变...
互联网业务往往使用MySQL数据库作为后台存储，存储引擎使用InnoDB。我们针对互联...
