maker一下自己搗鼓的商品詳情頁，主要是選擇商品類型的交互和樣式，點擊不同類型切換圖片和文字，商品增加減少，還有商品預覽圖片（本地圖片無法預覽！！！）。。
源碼下載：http://download.csdn.net/download/dknightl/9939872
1.效果圖
2.wxml
3.js
Page({
data: {
//商品信息，假裝請求到的信息
orinGoodMsg: { "good": { "visible": "101", "tourist_dis_price": 510, "good_identity": "00204", "good_sell": "100", "good_brand": "", "last_modify_time": "2017-08-08 20:10:05", "good_place": "101", "good_type": "2", "good_display_img": "../../image/swiper.jpg", "dealer_price": 0, "last_modify_id": "1", "good_id": "17", "good_fill": "", "good_number": 35, "good_status": "9001", "good_unit": "套", "good_format": "", "good_column": "100902", "wholesaler_dis_price": 255, "dealer_dis_price": 265, "tourist_price": 0, "good_name": "絢彩活性棉提花四件套", "wholesaler_price": 0, "good_mark": "牀單270x270cm被套200x230cm枕套48x74+6cm" }, "goodflowers": [{ "flower_name": "朝花夕拾", "flower_id": "11d75c6a560a4345b232706f7642de22", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "美麗相約", "flower_id": "3994afdb0427425d93bbba6e881601c3", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "清水佳人", "flower_id": "3ebc1032eb5d477b9e2bf508918f3d2b", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "意境幽藍", "flower_id": "425cc030c0574344a62be9674c854ee6", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "出水芙蓉", "flower_id": "4ea02d08e2464ba681e4861451a7a2f7", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "國色天香", "flower_id": "5501ed259aa6476eafff940e9cf16e5a", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "春日暢想", "flower_id": "85d540c79c244e40bb88744cdd1aa5ce", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花葉細雨", "flower_id": "877e01699f30449ebf99bfe689711159", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "琪花搖曳", "flower_id": "979e579413ea467fb363a1c85f36f092", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "絮語飄香", "flower_id": "ba7ef47a8fec4ec192d958d3c400bf7b", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "凝香雨露", "flower_id": "d24fa5772f754cfbb6650df587167c2f", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花開柔情", "flower_id": "dbd7f42a97c04c0aa1bc24b27d2546d3", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "幻彩花園", "flower_id": "eff884ebeb7c42008f38a58785818031", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }], "roleType": "2", "isAdmin": true },
good: {//商品
},
mainImg: '',//主圖
goodPrice: 99.99,//商品價格
goodOrinPrice: 999.99,
goodflowers: [
],
imgUrls: [//輪播圖
],
chooseFlowers: [//選中的花色
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
flowerImgSelect: '',//選中的花色圖片
flowerNameSelect: "",//
flowerSelect: 0,//判斷是否選中
isHidden: 0,
animationData: {},//選擇動畫
showModalStatus: false,//顯示遮罩
goodNum: 1,//商品數量
select: 0,//商品詳情、參數切換
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
var that = this;
if (wx.showLoading) {
wx.showLoading({
title: '加載中',
})
}
var data = that.data.orinGoodMsg;//寫死的商品信息
var goodBaseMsg = data.good;//商品基本信息
var goodflowersMsg = data.goodflowers;//商品花色信息
var swiperAy = [];//倫比途
var goodPrice = 999.99;//顯示價格
var goodOrinPrice = 999.99;//劃線價格
for (var i = 0; i < goodflowersMsg.length; i++) {
var jo = {
flower_image: goodflowersMsg[i].flower_image,
flower_id: goodflowersMsg[i].flower_id,
}
swiperAy.push(jo);
};
that.setData({//商品
mainImg: goodBaseMsg.good_display_img,
flowerImgSelect: goodBaseMsg.good_display_img,
good: goodBaseMsg,
goodflowers: goodflowersMsg,
imgUrls: swiperAy,
goodPrice: goodPrice,
goodOrinPrice: goodOrinPrice,
});
if (wx.hideLoading()) {
wx.hideLoading()
}
},
/**選擇花色 */
chooseFlower: function (data) {
var that = this;
var flower_id = data.currentTarget.dataset.select;
var flower_name = data.currentTarget.dataset.flowerName;
that.setData({//把選中值，放入判斷值中
flowerNameSelect: flower_name,
flowerSelect: flower_id
})
var str = flower_id + ',' + flower_name;
var chooseFlowers = that.data.chooseFlowers;
chooseFlowers = [];
chooseFlowers.push(str);
that.setData({
chooseFlowers: chooseFlowers,
flowerImgSelect: data.currentTarget.dataset.img
})
},
/**點擊選擇花色按鈕、顯示頁面 */
viewFlowerArea: function (data) {
var that = this;
var animation = wx.createAnimation({//動畫
duration: 500,//動畫持續時間
timingFunction: 'linear',//動畫的效果 動畫從頭到尾的速度是相同的
})
animation.translateY(0).step()//在Y軸偏移tx，單位px
this.animation = animation
that.setData({
showModalStatus: true,//顯示遮罩
animationData: animation.export()
})
that.setData({//把選中值，放入判斷值中
isHidden: 1,
})
},
/**隱藏選擇花色區塊 */
hideModal: function (data) {
var that = this;
that.setData({//把選中值，放入判斷值中
showModalStatus: false,//顯示遮罩
isHidden: 0,
})
},
goodAdd: function (data) {
var that = this;
var goodCount = that.data.goodNum + 1;
that.setData({//商品數量+1
goodNum: goodCount
})
},
goodReduce: function (data) {
var that = this;
var goodCount = that.data.goodNum - 1;
that.setData({//商品數量+1
goodNum: goodCount
})
},
/**商品詳情、參數切換 */
changeArea: function (data) {
var that = this;
var area = data.currentTarget.dataset.area;
that.setData({ "select": area });
},
/**
* 加入購物車
*/
addCart: function (data) {
var that = this;
var thatData = that.data;
var ja = thatData.chooseFlowers;//選中的花色id
var good_id = thatData.good.good_id;//good_id
var good_name = thatData.good.good_name;//good_name
var gn = thatData.goodNum;//數量
var good_price = thatData.goodPrice;//價格
if (ja.length > 0) {
wx.showToast({
title: '成功！',
duration: 2000,
})
} else {
wx.showToast({
title: '您還沒有選擇花色哦~',
duration: 2000,
})
}
},
/**
* 生成訂單
*/
saveOrder: function (data) {
var that = this;
var thatData = that.data;
var ja = thatData.chooseFlowers;//選中的花色
var good_id = thatData.good.good_id;//good_id
var good_name = thatData.good.good_name;//good_name
var gn = thatData.goodNum;//數量
var good_price = thatData.goodPrice;//價格v
var goodDisplayImg = thatData.mainImg;//主圖
if (ja.length > 0) {
wx.showToast({
title: '成功！',
duration: 2000,
})
} else {
wx.showToast({
title: '您還沒有選擇花色哦~',
duration: 2000,
})
}
},
/**
* 查看輪播圖片
*/
seeSwiperAll: function (e) {
this.seePreviewImg(0, e.currentTarget.dataset.img)
},
/**
* 查看花色圖片
* */
seeFlowersAll: function (e) {
this.seePreviewImg(1, e.currentTarget.dataset.img)
},
/**
* 預覽圖片
*
* 無法顯示本地圖片！！！！！！！
* 無法顯示本地圖片！！！！！！！
* 無法顯示本地圖片！！！！！！！
*
* @pd 0表示輪播圖 、 1表示花色
*/
seePreviewImg: function (pd, showImg) {
var array = [];
var that = this;
if (pd == 0) {
var imgArray = that.data.imgUrls;
for (var i = 0; i < imgArray.length; i++) {
array.push(imgArray[i].flower_image)
}
} else if (pd == 1) {
var imgArray = that.data.imgArray;
for (var i = 0; i < imgArray.length; i++) {
array.push(imgArray[i].url)
}
}
wx.previewImage({
current: showImg, // 當前顯示圖片的http鏈接
urls: array // 需要預覽的圖片http鏈接列表
})
},
})wxss
.width50{
width:50% !important;
}
.width100{
width:100%
}
.fl{
float: left;
}
.fr{
float: right;
}
.display-flex-row{
display:flex;
flex-direction:row;
}
.display-flex-column{
display:flex;
flex-direction:column;
}
.display-ib{
display:inline-block !important;
}
.display-block{
display:block !important;
}
.display-none{
display: none !important;
}
.bg_fff{
background-color: #ffffff;
}
.bg_ff0036{
background-color:#ff0036;/**紅**/
}
.bg_ff6700{
background-color:#ff6700;/**橘**/
}
.bg_09bb07{
background-color: #09bb07;/**綠**/
}
.bg_888{
background-color: #888888;/**灰**/
}
.color_ff6700{
color:#ff6700;
}
.color_888888{
color:#888888;
}
.swiper_area,.swiper_area swiper{
height: 400rpx;
}
.swiper-item{
display: block;
}
.slide-image {
width: 100%;
}
swiper {
width: 100%;
}
.goods_title {
color: #535353;
padding: 20rpx 20rpx 10rpx 20rpx;
line-height: 1.2;
font-weight: bold;
}
.good_description{
font-size: 0.7em;
padding:0 20rpx;
color: #b0b0b0;
}
.goods_infor_top {
background-color: #FFF;
margin-bottom:20rpx;
}
.good_info_bottom{
justify-content:space-between;
padding:20rpx 20rpx;
}
.good_dis_price {
color: #ff6700;
font-weight: bold;
}
.good_info_bottom .good_orin_price {
font-size: 0.7em;
margin-left: 10rpx;
text-decoration: line-through;
color: #b0b0b0;
}
.good_info_bottom .good_sale_count {
font-size: 0.7em;
}
.admin_good_price{
padding:20rpx;
}
.admin_good_price .admin_price_box{
justify-content: space-between;
}
.admin_good_price .admin_orin_price{
font-size: 0.8em
}
.goods_deliver {
padding: 10px;
border-top: 1px solid #E5E5E5;
color: #676767;
}
.goods_collect_btn {
height: 40px;
width: 70px;
position: absolute;
right: 0;
top: 10px;
border-left: 1px solid #E5E5E5;
text-align: center;
font-size: 12px;
line-height: 14px;
}
.goods_collect_img {
width: 24px;
height: 24px;
}
.choose_catalog_area{
font-size:0.9em;
justify-content:space-between;
padding:20rpx;
margin-bottom:20rpx;
height:60rpx;
line-height: 60rpx;
}
.choose_catalog_area .arrow_right{
margin-top:14rpx;
width:30rpx;
height:30rpx;
}
.commodity_screen{
background-color:rgba(0,0,0,0.5);
width: 100%;
height: 100%;
opacity:0.5;
position: fixed;
z-index: 666;
bottom:0;
}
.catalog_area{
min-height: 900rpx;
max-height: 900rpx;
padding:20rpx;
position: fixed;
z-index: 888;
bottom:0;
}
.catalog_area .info_tip{
margin-top:50rpx;
margin-left: 220rpx;
}
.catalog_area .catalog_title{
position: fixed;
top: 0;
width: 710rpx;
height: 160rpx;
border-bottom:1px solid #e5e5e5;
padding-bottom: 20rpx;
}
.catalog_area .catalog_title .thumbnails{
width: 200rpx;
height:200rpx;
position: absolute;
top:-40rpx;
border:#b0b0b0;
}
.catalog_area .catalog_title .cancel{
width: 40rpx;
height:40rpx;
position: absolute;
top:20rpx;
right:0;
}
.catalog_area .choosed_catalog{
font-size: 0.8em;
}
.catalog_area .info_choose{
width:710rpx;
}
.catalog_area .info_choose .catalog_name{
padding:10rpx 0;
font-weight: bold;
}
.catalog_area .info_choose .catalog_name_desc{
margin-top:10rpx !important;
}
.catalog_area .info_choose .borderTop{
margin-top:25rpx;
border-top:1px solid #e5e5e5;
}
.catalog_area .info_choose .catalog_items{
font-size: 0.8em;
flex-wrap:wrap;
}
.catalog_area .info_choose .catalog_items .catalog_item{
padding:15rpx;
border:1px dashed #b0b0b0;
margin-top:15rpx;
margin-right: 20rpx;
}
.catalog_area .info_choose .catalog_items .active{
border:1px solid #ff6700;
color:#ff6700 !important;
}
.catalog_area .catalog_count{
justify-content:space-between;
height:100rpx;
line-height: 100rpx;
}
.catalog_area .catalog_count .catalog_name{
font-weight: bold;
padding:12.5rpx 0 0 0;
}
.catalog_area .catalog_count .count_control{
margin-top:20rpx;
height:80rpx;
}
.catalog_area .btn_area{
width: 100%;
margin:0 -20rpx;
position: fixed;
bottom: 0;
}
.catalog_area .item_btn {
display: inline-block;
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border: 2rpx solid #b0b0b0;
}
.catalog_area .item_num {
display: inline-block;
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-top: 2rpx solid #b0b0b0;
border-bottom: 2rpx solid #b0b0b0;
font-size: 28rpx;
color: #929292;
}
.tab{
width:710rpx;
padding:0 20rpx;
height: 80rpx;
line-height: 80rpx;
}
.tab .tab-content{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.container {
margin-top:25rpx;
}
.tab .btn{
width:353rpx;
color: #888888;
text-align: center;
border-bottom:2rpx solid #f5f5f5;
}
.tab .right_btn{
border-right:2rpx solid #f5f5f5;
}
.tab .left_btn{
border-left:2rpx solid #f5f5f5;
}
.tab .active{
color: #ff6700 !important;
border-bottom:4rpx solid #ff6700 !important;
}
.goods_infor_pre {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
min-height: 40px;
}
.goods_infor_txt {
position: relative;
padding-left: 50px;
font-size: 13px;
line-height: 18px;
}
.goods_infor_brand {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../../image/brand.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
left: 0px;
top: 10px;
}
.goods_infor_raw {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
}
.goods_infor_item {
font-size: 13px;
line-height: 18px;
}
.goods_infor_item text {
display: inline-block;
width: 90px;
}
.goods_detail {
padding: 0 10px;
margin-top: 20rpx;
background-color: #FFF;
}
.goods_detail_title {
padding: 10px 0;
font-size: 14px;
}
.goods_bottom {
height: 50px;
}
.goods_bottom_btn {
width: 100%;
position: fixed;
bottom: 0;
height: 50px;
z-index: 99;
background-color: #FFF;
border-top: 1px solid #E5E5E5;
}
.goods_one {
width:50%;
height: 50px;
}
.goods_half_half {
width:50%;
height: 50px;
font-size: 12px;
line-height: 50px;
text-align: center;
color: #FFF;
}
.goods_car_num {
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 10px;
font-size: 10px;
background-image: url(../../image/car1.png);
background-size: 26px;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.goods_car_num span {
position: absolute;
right: -5px;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background-color: #FF0000;
color: #FFF;
text-align: center;
line-height: 14px;
}