Commit 8845b23f by 赵雅纹

商品详情页

parent c35e2b5b
......@@ -22,7 +22,8 @@
"pages/wantToBuyDetail/wantToBuyDetail",
"component/buyImageSwiper/buyImageSwiper",
"pages/myShare/myShare",
"pages/user-center/user-center"
"pages/user-center/user-center",
"pages/productDetail/productDetail"
],
"subPackages": [
{
......
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--component/skuPopup/skuPopup.wxml-->
<view class="popup-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
<view class="popup-content{{show ? ' active' : ''}}">
<image class="popup-close" mode="widthFix" src="/images/close.png" bindtap="hidePopup"></image>
<view class="top-info clearfix">
<image mode="widthFix" src="{{curSku.sku_pic_url && curSku.sku_pic_url != 'undefined' ? (imageDomain + curSku.sku_pic_url) : indexImg}}"></image>
<view class="top-text">
<view class="price-text" wx:if="{{exchangePrice <= 0}}">¥{{price / 100}}</view>
<view class="price-text" wx:else>{{price}}</view>
<view class="stock-text">库存:{{skuStock}}</view>
<view class="sku-text">规格:<block wx:for="{{skuText}}" wx:key="{{index}}">{{item}} </block></view>
</view>
</view>
<!-- isAllowArrive 0 开启/放开 1 关闭/禁用 -->
<scroll-view class="mid-info" scroll-y="true">
<view class="sku-info" >
<view class="spec-name">默认</view>
<view class="spec-values">
<view class="spec-value active">默认选项</view>
<view class="spec-value">默认选项</view>
<view class="spec-value">默认选项</view>
<!-- <view wx:if="{{isAllowArrive}}" class="spec-value{{specValue.skuStock == 0 ? ' disabled' : ''}}{{curSpec[i] == specValue.skuName ? ' active' : ''}}" wx:for="{{specInfo.specValue}}" wx:for-index="j" wx:key="{{j}}" wx:for-item="specValue" data-stock="{{specValue.skuStock}}" data-name="{{specValue.skuName}}" data-index="{{i}}" data-type="{{goodType}}" data-disable="{{specValue.skuStock == 0 ? true : false}}" bindtap="selectSku">{{specValue.skuName}}</view> -->
<!-- <view wx:if="{{!isAllowArrive}}" class="spec-value{{specValue.skuStock == 0 ? ' disabled' : ''}}{{curSpec[i] == specValue.skuName ? ' active' : ''}}" wx:for="{{specInfo.specValue}}" wx:for-index="j" wx:key="{{j}}" wx:for-item="specValue" data-stock="{{specValue.skuStock}}" data-name="{{specValue.skuName}}" data-index="{{i}}" data-type="{{goodType}}" data-disable="{{specValue.skuStock == 0 && goodType == 2 ? true : false}}" bindtap="selectSku">{{specValue.skuName}}</view> -->
</view>
</view>
<!-- <view class="sku-number">
<view class="spec-name">数量</view>
<view class="num-panel clearfix">
<button bindtap="minusNum">-</button>
<input value="{{proNum}}" type="number" bindblur="inputNum"></input>
<button bindtap="addNum">+</button>
</view>
</view> -->
<view class="sku-number">
<view class="spec-name">数量</view>
<view class="num-panel">
<button bindtap="minusNum">-</button>
<input value="{{proNum}}" type="number" bindblur="inputNum"></input>
<button bindtap="addNum">+</button>
</view>
</view>
</scroll-view>
<!-- 按钮状态 -->
<button class="confirm-button {{isOutStock? 'out-stock': ''}}" bindtap="confirm">{{btnText}}</button>
</view>
.popup-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.popup-container.active {
opacity: 1;
transform: translateY(0); }
.popup-content.active {
transform: translateY(0); }
.out-stock {
background: #FFB400!important;
}
.popup-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%); }
.popup-content .popup-close {
position: absolute;
right: 20rpx;
top: 30rpx;
width: 60rpx;
height: 60rpx; }
.top-info {
background: #ffffff;
border-bottom: 1px solid rgba(151,151,151,0.2);
overflow: hidden; }
.top-info image {
width: 210rpx;
height: 210rpx;
float: left;
margin: 36rpx 0 30rpx 30rpx;
}
.top-info .top-text {
overflow: hidden;
display: inline-block;
margin-top: 68rpx;
margin-left: 35rpx; }
.price-text {
color: #a60002;
font-size: 36rpx;
margin-bottom: 6rpx;
}
.stock-text {
line-height: 40rpx;
font-size: 30rpx;
color: #333333;
margin-top: 17rpx;
}
.sku-text{
font-size: 26rpx;
color: #808080;
margin-top: 6rpx;
}
.mid-info {
max-height: 600rpx;
padding: 20rpx 0; }
.mid-info .sku-info {
padding: 0 30rpx 20rpx;
background: #ffffff;
border-bottom: 1px solid rgba(151,151,151,0.2);
}
.mid-info .sku-number{
width: 690rpx;
padding: 30rpx 30rpx 20rpx;
border-bottom: none;
display: inline-block;
}
.mid-info .sku-info .spec-name {
padding: 10rpx 0 20rpx 0;
margin-bottom: 8rpx;
}
.sku-number .spec-name{
display: inline-block;
vertical-align: middle;
}
.mid-info .sku-info .spec-value {
color: #808080;
font-size: 26rpx;
line-height: 66rpx;
padding: 0 39rpx;
display: inline-block;
border-radius: 10rpx;
background-color: rgba(238, 238, 238, 1);
margin: 25rpx 23rpx 25rpx 0;
}
.mid-info .sku-info .spec-value.disabled {
color: #999999;
background: #eaeaea;
border-color: #eaeaea; }
.mid-info .sku-info .spec-value.active {
border: 1px solid rgba(203, 60, 60, 1);
background: #ffffff;
color: rgba(203, 60, 60, 1);
}
.confirm-button {
font-size: 30rpx;
background: #CB3C3C;
border-radius: 0;
color: #ffffff;
line-height: 96rpx; }
.button-hover {
opacity: 0.5; }
.confirm-button::after {
border-radius: 0; }
.num-panel {
float: right;
vertical-align: top;
}
.num-panel button {
padding: 0;
line-height: 44rpx;
width: 44rpx;
font-size: 32rpx;
border-radius: 50%;
color: #808080;
display: inline-block;
}
.num-panel button::after{
border:none;
}
.num-panel input {
line-height: 44rpx;
text-align: center;
font-size: 32rpx;
width: 60rpx;
color: #a60002;
margin: 0 10rpx;
height: 44rpx;
box-sizing: border-box;
display: inline-block;
}
.clearfix::after {
content: '';
display: block;
clear: both; }
// pages/productDetail/productDetail.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
showHtml: false,
reachBottom: false, // 标识是否触底
showSkuPopup: false,
btnText: '立即购买',
imageData: [{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
}, {
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
},
{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
},
{
desc: "string",
imageUrl: "/group3/M00/00/0B/Cv6CBF0RvcuAXoDUAA5M5vbNswU382.png",
link: { linkId: "10", brandId: "2711", name: "会员服务", url: "5", type: 2, status: 0 },
number: 1,
redirectId: "10",
type: 0
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
addCart: function (event) {
this.setData({
showSkuPopup: true,
showSkuPopupType: 'cart'
})
// 商品加入购物车
// xm_bi.Event.stat("skuAddToCart", { "amount":"666","skuId":'abcd1234'});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 页面touchstart事件
pageTouchStart: function (e) {
if (this.data.showHtml) {
return
}
this.setData({
reachBottom: false,
startTouchY: null
})
},
// 页面touchend事件
pageMoveEnd: function (e) {
if (this.data.showHtml) {
return
}
if (this.data.startTouchY - e.changedTouches[0].pageY >= 50) {
this.setData({
showHtml: true,
scrollTips: ''
})
}
},
// 页面touchmove事件
pageMove: function (e) {
if (this.data.showHtml) {
return
}
wx.createSelectorQuery().selectViewport().scrollOffset((pageRes) => {
wx.createSelectorQuery().select('.product-container').fields({
size: true
}, (res) => {
if (res.height >= app.globalData.systemInfo.windowHeight + pageRes.scrollTop) {
this.setData({
reachBottom: true
})
} else {
if (this.data.reachBottom) {
this.setData({
reachBottom: false
})
}
}
if (this.data.startTouchY == null) {
this.setData({
startTouchY: e.changedTouches[0].pageY
})
}
}).exec()
}).exec()
},
})
\ No newline at end of file
{
"navigationBarTitleText": "商品详情页",
"usingComponents": {
"buy-image-swiper": "/component/buyImageSwiper/buyImageSwiper",
"sku-popup": "/component/skuPopup/skuPopup"
}
}
\ No newline at end of file
<!--pages/productDetail/productDetail.wxml-->
<view class="page-product-detail product-container"
bindtouchstart="pageTouchStart"
bindtouchmove="pageMove"
bindtouchend="pageMoveEnd"
bindtap="handleCloseSharePopup">
<view>
<buy-image-swiper image-data="{{imageData}}"/>
</view>
<view class="product-detail-wrap">
<view class="product-price">
<view class="price-wrap">
<view class="price-icon">会员专享价</view>
<text class="price">¥618</text>
<text class="cost-price">¥888</text>
</view>
<view class="share-wrap">
<image class="share-img" src="/assets/imgs/share.png"></image>
<text class="share-text">分享</text>
</view>
</view>
<view class="product-name">
名称
</view>
<view class="product-desc">
描述
</view>
<view class="member-price">
<view class="member-price-info">
<image class="member-price-icon"></image>
<text class="before-reduce-price">¥558,</text>
<text class="reduce-price">本次立减¥60</text>
</view>
<view class="open">
<text class="open-text">立即开通</text>
<image class="big-arrow" src="/assets/imgs/big-arrow-right.png"></image>
</view>
</view>
<view class="choose-wrap">
请选择规格
<!-- <image class="arrow-right"></image> -->
</view>
<view class="choose-wrap">
支持快递配送</view>
<view class="surplus">
剩余:
<text class="surplus-number">300</text>
</view>
</view>
<view class="gray-line"></view>
<view class="scroll-tips">
继续拖动,查看图文详情
</view>
<view class="product-footer">
<view class="footer-icons clearfix">
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='home'
>
<navigator
class='get-formId--btn footer-icon'
data-url="/pages/page/page"
formType="submit"
open-type="switchTab"
>
<image src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-index.png" mode="widthFix" />
<view>首页</view>
</navigator>
</form>
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='home'
>
<navigator class="get-formId--btn footer-icon" >
<image src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-kefu.png" mode="widthFix"></image>
<view class="tab-text">客服</view>
</navigator>
</form>
<form
class='get-formId'
bindsubmit="nav"
report-submit
name='nav'
>
<navigator class='get-formId--btn footer-icon' open-type="switchTab" url="/pages/cart/cart">
<image class="contact-share-img" src="https://hwimagecdn.ihotwind.cn/hotwind-mini/images/hotnewicon/bottom-shop-cart.png" />
<view class="add-car-text">购物车</view>
</navigator>
</form>
</view>
<block >
<view class="footer-buttons clearfix" >
<block >
<form
class='get-formId get-formId--form'
bindsubmit="addCart"
report-submit
name='nav'
>
<button class="cart-button get-formId--btn" formType="submit">加入购物车</button>
</form>
<form
class='get-formId get-formId--form'
bindsubmit="goBuy"
report-submit
name='nav'
>
<button class="buy-button get-formId--btn" formType="submit">立即购买</button>
</form>
</block>
</view>
</block>
</view>
</view>
<sku-popup
product-name="{{product.name}}"
spec-names="{{product.sku_names}}"
spec-values="{{product.skus}}"
good-type="{{product.goodType}}"
is-allow-arrive="{{product.isAllowArrive}}"
is-notice-status="{{isNoticeStatus}}"
index-img="{{product.index_url[0]}}"
image-domain="{{product.image_domain}}"
sku-infos="{{product.skuStocks}}"
quantity-average="{{product.quantity_average}}"
show="{{showSkuPopup}}"
exchange-price="{{product.exchange_credits}}"
integral-role="{{product.integral_role}}"
bind:skuselect="confirmClick"
btn-text="{{btnText}}"
/>
\ No newline at end of file
/* pages/productDetail/productDetail.wxss */
.product-detail-wrap{
padding: 0 16rpx 0 24rpx;
}
.price-icon{
display: inline-block;
width: 88rpx;
height: 30rpx;
border-radius: 3rpx;
background-color: rgba(203, 60, 60, 0.08);
font-size: 13rpx;
color: #cb3c3c;
line-height: 30rpx;
text-align: center;
vertical-align: middle;
}
.price{
font-size: 36rpx;
color: #333333;
vertical-align: middle;
}
.cost-price{
text-decoration:line-through;
font-size: 24rpx;
color: #aaaaaa;
margin-left: 10rpx;
vertical-align: middle;
}
.share-wrap{
float: right;
}
.share-img{
width: 30rpx;
height: 30rpx;
vertical-align: middle;
}
.share-text{
font-size: 26rpx;
color: #999999;
vertical-align: middle;
margin-left: 8rpx;
}
.price-wrap{
display: inline-block;
}
.product-name{
color: #333333;
font-size: 40rpx;
margin-top: 16rpx;
}
.product-desc{
color: #808080;
font-size: 28rpx;
margin-top: 11rpx;
}
.member-price{
background-color: rgba(192, 154, 116, 0.07);
padding:24rpx 24rpx;
height: 55rpx;
margin-top: 24rpx;
}
.open{
width: 184rpx;
height: 55rpx;
line-height: 55rpx;
text-align: center;
border-radius: 34rpx;
border: 1px solid rgba(192, 154, 116, 1);
display: inline-block;
position: absolute;
right: 24rpx;
}
.open-text{
font-size: 24rpx;
color: rgba(192, 154, 116, 1);
}
.big-arrow{
width: 23rpx;
height: 16rpx;
margin-left: 10rpx;
}
.member-price{
position: relative;
}
.member-price-info{
display: inline-block;
}
.member-price-icon{
width: 88rpx;
height: 30rpx;
}
.before-reduce-price{
font-size: 40rpx;
color: #cb3c3c;
font-weight: bold;
}
.reduce-price{
font-size: 24rpx;
color: #cb3c3c;
}
.choose-wrap{
height: 80rpx;
line-height: 80rpx;
color: #808080;
font-size: 28rpx;
border: 1px solid rgba(128, 128, 128, 0.3);
padding: 0 24rpx;
margin-top: 20rpx;
}
.surplus{
font-size: 24rpx;
color: #808080;
float: right;
margin: 20rpx 0 16rpx;
}
.surplus-number{
font-weight: bold;
color: #cb3c3c;
}
.gray-line{
background-color: #f9f9f9;
height: 22rpx;
clear: both;
}
.scroll-tips{
width: 750rpx;
text-align: center;
padding: 15rpx 0 30rpx;
margin-bottom: 100rpx;
color: #666666;
font-size: 24rpx;
}
.product-footer {
position: fixed;
height: 100rpx;
left: 0;
bottom: 0;
width: 750rpx;
z-index: 2;
display: flex;
flex-direction: row; }
.product-footer .footer-icons {
width: 300rpx;
flex-grow: 0;
}
.product-footer .footer-icons .footer-icon {
width: 33.333%;
box-sizing: border-box;
float: left;
height: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.product-footer .footer-icons .footer-icon image {
width: 39rpx;
height: 39rpx;
flex-shrink: 0; }
.product-footer .footer-icons .footer-icon view {
font-size: 20rpx;
line-height: 22rpx;
color: #333333;
margin-top: 8rpx; }
.product-footer .footer-buttons {
flex: 1;
display: flex;
height: 100rpx; }
.product-footer .footer-buttons button {
flex: 1;
font-size: 25rpx;
line-height: 100rpx;
border-radius: 0;
color: #ffffff; }
.product-footer .footer-buttons button[disabled] {
background: #cccccc; }
.product-footer .footer-buttons button.cart-button {
background: rgba(203,60,60,0.71);
width: 240rpx;
}
.product-footer .footer-buttons button.buy-button {
background: #cb3c3c;
width: 214rpx;
}
.product-footer .footer-buttons button::after {
border: 0; }
.product-footer .footer-buttons button.button-hover {
opacity: 0.5; }
.get-formId--btn{
background-color: #ffffff;
border: none;
border-radius: 0;
}
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 16,
"current": 17,
"list": [
{
"id": -1,
......@@ -143,6 +143,13 @@
"id": -1,
"name": "我的",
"pathName": "pages/user-center/user-center",
"query": "",
"scene": null
},
{
"id": -1,
"name": "商品详情页",
"pathName": "pages/productDetail/productDetail",
"scene": null
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment