<!--輪播圖--><swiperclass="swiper"indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"circular="{{circular}}"><blockwx:for="{{picture}}"><swiper-item><imagesrc="{{item.img}}"mode='scaleToFill'class="slide-image"/></swiper-item></block></swiper><view class="goods"><view class='name'>{{goods_info.goods_name}}</view><view class='price'><text class='left'>￥</text><textclass='shop_price'>{{goods_info.shop_price}}</text><text class='market_price'>{{goods_info.market_price}}</text></view></view><view class='line'></view><view class='choose_spec'><text class='left'>已選</text><view class='spec'>{{selectName}}</view><view class='more' bindtap='modal_show' data-flag="0"><imageclass='right'src='/images/detail/more.png'bindtap='choose_spec'></image></view></view><view class='line'></view><view class='comment_head'><text>評價</text><view class='comment_right'><imagesrc="/images/detail/more.png"></image></view></view><view class="line1"></view><view class='comment'><view class="top"><view class='head_img' style="background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg') no-repeat; background-size: cover;"></view><text class='nick_name'>瘋狂的李狗蛋兒</text><imageclass='star'src="/images/detail/star5.png"></image></view><view class='comment_content'>回家為維護和額我好卡IE我人文環境人文環境業務8二維大家很快噠二球的大健康大廈火炬大廈會盡快打死大家好的委屈的健康啦即可登錄三打架了可完全打卡機</view><view class='comment_img'><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image></view></view><view class="line"></view><view class='des'><view class='des_head'>商品詳情</view><view class='line1'></view><imageclass='des_img'mode='widthFix'src="https://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.jpg"></image></view><!--底部購物車 --><view class='detail_footer'><view class='detail_cart'><imagesrc="/images/common/cart1.png"></image><view class='cart_font'>購物車</view></view><view class='buy' bindtap='modal_show' data-flag="1">立即購買</view><view class='addCart' bindtap='modal_show' data-flag="2">加入購物車</view></view><!--屬性規格選擇欄--><view class='mask' style="display:{{choose_modal}}"></view><view class="choose" style="display:{{choose_modal}}"> <view class="spec_img_container"><imagesrc="{{default_spe_img}}"></image><view class="amount">￥{{amount}}</view><icon class="clear" type='clear' bindtap="modal_none"></icon></view><!--選擇開始 --> <view class="spec_view_container"><view class="modal_de_select">{{selectName}}</view><view class="modal_spec"><blockwx:for="{{spec}}"wx:for-index="group_idx"><view class="modal_spec_name">{{item.name}}：</view><view class='modal_spec_group'><blockwx:for="{{item.child}}"><view class="modal_spec_item_{{item.isSelect ? 'active' : ''}}"data-select-index="{{group_idx}}"data-attr-index="{{index}}"data-attr-id="{{item.id}}"bindtap='clickAttr'>{{item.name}}</view></block></view></block></view></view><!--選擇結束 --><view class="buy_num"><view class="font_num">購買數量：</view><view class="stepper"><!-- 減號 --><text class="{{minusStatus}}" bindtap="bindMinus">-</text><!-- 數值 --><inputtype="number"bindchange="bindManual"value="{{num}}"/><!-- 加號 --><text class="normal" bindtap="bindPlus">+</text></view></view><blockwx:if="{{flag > 0}}"><view class="modal_button">確認</view></block><blockelse><view class="modal_button_two"><buttonclass="modal_cart">加入購物車</button><buttonclass="modal_buy">立即購買</button></view></block></view>detail.wxss樣式頁面/* pages/detail/detail.wxss */.swiper{height: 750rpx;width: 750rpx;box-sizing: border-box;}.swiper .slide-image{width: 750rpx;height: 750rpx;}.goods{width: 750rpx;height: 215rpx;padding: 34rpx30rpx;box-sizing: border-box;}.goods .name{width: 702rpx;height: 70rpx;line-height: 35rpx;font-size: 28rpx;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.goods .name{width: 702rpx;height: 70rpx;}.goods .price{margin-top:20rpx;color: #C62127;font-size: 32rpx;}.goods .price.left{font-size: 24rpx;}.goods .price.shop_price{font-weight: 700;}.goods .price.market_price{font-size: 24rpx;color: #D7D7D7;margin-left:20rpx;text-decoration-line: line-through;}.line{width: 750rpx;height: 10rpx;background: #EFEFF4;}.choose_spec{width: 750rpx;height: 90rpx;padding: 020rpx;line-height: 90rpx;box-sizing: border-box;}.choose_spec .left{font-size: 24rpx;color: #B6B6B6;float: left;}.choose_spec .spec{height: 90rpx;width: 550rpx;margin-left:30rpx;line-height: 90rpx;font-size: 24rpx;color: #707070;float: left;}.choose_spec .more{width: 60rpx;height: 90rpx;margin-left:650rpx;}.choose_spec .right{width: 38rpx;height: 8rpx;}.comment_head{width: 750rpx;height: 90rpx;line-height: 90rpx;font-size: 24rpx;color: #B6B6B6;padding: 020rpx;box-sizing: border-box;}.comment_head text{float: left;}.comment_head .comment_right{width: 50rpx;height: 90rpx;float: left;margin-left:604rpx;}.comment_head image{width: 38rpx;height: 8rpx;}.line1{width: 750rpx;height: 2rpx;background:#D7D7D7;}.comment{width: 750rpx;height: 428rpx;padding: 20rpx20rpx;box-sizing: border-box;}.comment .top{width: 100%;height: 100rpx;line-height: 100rpx;}.comment .top.head_img{width: 100rpx;height: 100rpx;border-radius: 50%;float: left;}.comment .top.nick_name{font-size: 21rpx;margin-left:12rpx;} .comment .top.star{width: 120rpx;height: 18rpx;margin-left:310rpx;}.comment .comment_content{margin-top:20rpx;height: 64rpx;line-height: 32rpx;font-size: 24rpx;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.comment .comment_img{height: 165rpx;width: 165rpx;overflow: hidden;margin-top:20rpx;}.comment .comment_img{height: 165rpx;width: 100%;}.comment .comment_img.comment_item_img{width: 165rpx;height: 165rpx;box-sizing: border-box;/* border:2rpx #C62127 solid; */padding: 10rpx10rpx;}.des{width: 750rpx;margin-bottom: 100rpx;}.des .des_head{width: 750rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;color: #707070;text-align: center;}.des .des_img{width: 750rpx;}.detail_footer{width: 750rpx;height: 100rpx;position: fixed;bottom: 0;border-top: 4rpx#D7D7D7 solid;box-sizing: border-box;}.detail_footer .detail_cart{width: 250rpx;height: 100rpx;background: #fff;float: left;}.detail_footer .detail_cart image{width: 46rpx;height: 46rpx;margin-left: 100rpx;margin-top:10rpx;}.detail_footer .detail_cart .cart_font{font-size: 24rpx;text-align:center;}.detail_footer .buy{width: 250rpx;height: 100rpx;background:#FF9500;margin-left:250rpx;text-align: center;line-height: 100rpx;color: #fff;}.detail_footer .addCart{position: fixed;bottom: 0;right: 0;width: 250rpx;height: 99rpx;background: #C62127;text-align: center;line-height: 99rpx;color: #fff;}/*蒙版 */.mask{width: 750rpx;height: 100%;background: #C0C0C0;z-index: 10;position: fixed;top: 0;opacity: 0.8;}/*選擇規格層面*/.choose{display: none;flex-direction: row;align-items: center;background-color: #fff;position: fixed;bottom: 0;right: 0;/* border: 1px solid #f44336; */z-index: 100;width: 750rpx;box-sizing: border-box;}/*知道從來點擊來時候 */.choose .modal_button{flex-direction: row;background-color: #C62127;position: inherit;bottom: 0;z-index: 100;width: 750rpx;height: 106rpx;line-height:106rpx;color: #fff;text-align:center;margin:0auto;}/*不知道從哪點進來時候*/.choose .modal_button_two{flex-direction: row;align-items: center;float: left;background-color: #fff;position: inherit;bottom: 0;right: 0;z-index: 10;width: 100%;height: 50px;}.choose .modal_button_twobutton{width: 50%;float: left;color: #fff;border-radius: 0px;}.choose .modal_button_two.modal_cart{background: #FFB03F;}.choose .modal_button_two.modal_buy{background: #f44336;}/* */.choose .spec_img_container{height:100px;border-bottom: 2px solid #F5F5F5;position: relative;}.choose .spec_img_containerimage{width: 200rpx;height: 200rpx;position: absolute;top:-40rpx;left: 20rpx;border: 2px#F5F5F5 solid;border-radius: 5px; }.choose .spec_img_container.amount{width: 400rpx;color: red;position: absolute;top: 80rpx;left:240rpx;}.choose .spec_img_container.clear{position:absolute;top:20rpx;right:20rpx;}.choose .spec_view_container{width: 100%;}.choose .spec_view_container.modal_de_select{font-size: 28rpx;color: #808080;margin-left: 20rpx;margin-top:10rpx;}.choose .spec_view_container.modal_spec{margin-left:20rpx;margin-top:10rpx;font-size:28rpx;}.choose .spec_view_container.modal_spec_name{margin-left:5rpx;margin-top:10rpx;font-size:28rpx;color:#8B0000;}/* .choose .spec_view_container .modal_spec_name::after{content: "";clear: both;display: block;overflow: hidden;} *//* .choose .spec_view_container .radio-group{padding:18rpx;} */.choose .spec_view_container.modal_spec_item_{width: 750rpx;display: inline-block;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;min-width: 80rpx;max-width: 400rpx;height: 50rpx;line-height: 50rpx;border: 2rpx#707070 solid;margin-left:20rpx;margin-top:20rpx;border-radius: 10rpx;text-align: center;}.choose .spec_view_container.modal_spec_item_active{width: 750rpx;display: inline-block;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;min-width: 80rpx;max-width: 400rpx;height: 50rpx;line-height: 50rpx;/* border: 2rpx red solid; */margin-left:20rpx;margin-top:20rpx;border-radius: 10rpx;text-align: center;background: #C62127;color: #fff;}.choose .buy_num {margin-top:40rpx;margin-bottom: 120rpx;font-size: 28rpx;}.choose .buy_num.font_num{margin-left: 20rpx;}/*主容器*/.choose .buy_num.stepper { width: 200rpx; height: 62rpx; /*給主容器設一個邊框*/ border: 2rpxsolid #ccc; border-radius: 3px; margin-left:40rpx;margin-top:20rpx;}/*加號和減號*/.choose .buy_num.stepper text { width: 58rpx; line-height: 62rpx; text-align: center; float: left;}/*數值*/.choose .buy_num.stepper input { width: 80rpx; height: 62rpx; float: left; margin: 0auto; text-align: center; font-size: 32rpx; /*給中間的input設置左右邊框即可*/ border-left: 2rpx solid#ccc; border-right: 2rpx solid#ccc;}/*普通樣式*/.choose .buy_num.stepper .normal{ color: black;}/*禁用樣式*/.choose .buy_num.stepper .disabled{ color: #ccc;}detail.js頁面const app =getApp();var selectIndex;//選擇的大規格keyvar attrIndex;//選擇的小規格的keyvar selectIndexArray = [];//選擇屬性名字的數組var selectAttrid = [];//選擇的屬性idPage({/*** 頁面的初始數據*/data: {picture: [{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3438576193,3301397209&fm=27&gp=0.jpg'},{ img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1525546566,2404337493&fm=27&gp=0.jpg' },{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028702483,4182396631&fm=27&gp=0.jpg' },],//swiper相關indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,circular: true,//選擇的規格num: 1,//初始數量amount: 0,//初始金額minusStatus: 'disabled', // 使用data數據對象設置樣式名choose_modal: "block", // 規格數量框flag: 0,//點選規格時來源 0：規格點 1：立即購買 2：加入購物車//規格數據spec: [{ "id": 1, "name": "/u989c/u8272", "child": [{ "id": 11, "name":"/u7ea2/u8272", "isSelect":true }, { "id":111, "name":"/u767d/u8272", "isSelect":false }] }, { "id":2, "name": "/u5c3a/u7801", "child": [{ "id": 21, "name":"/u5c0f/u53f7", "isSelect":true }, { "id":22, "name":"/u5927/u53f7", "isSelect":false }] }],selectName: "",//已選的屬性名字selectAttrid:[],//選擇的屬性id//商品信息goods_info:{},},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;wx.request({url: app.globalData.host +'/index.php/app/goods/goodsDetails/goods_id/34',header: {'Content-type': 'application/json'},success:function(res){console.log(res.data.data.goods_info);that.setData({goods_info:res.data.data.goods_info,});that.init_attr();}})},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {},/* 點擊減號 */bindMinus: function () {var num = this.data.num;// 如果大于1時，才可以減if (num > 1) {num--;}// 只有大于一件的時候，才能normal狀態，否則disable狀態var minusStatus = num <= 1 ? 'disabled' : 'normal';// 將數值與狀態寫回this.setData({num: num,minusStatus: minusStatus});this.change_spec();this.change_price();},bindPlus: function () {var num = this.data.num;// 不作過多考慮自增1num++;// 只有大于一件的時候，才能normal狀態，否則disable狀態var minusStatus = num < 1 ? 'disabled' : 'normal';// 將數值與狀態寫回this.setData({num: num,minusStatus: minusStatus});this.change_spec();this.change_price();},/* 輸入框事件 */bindManual: function (e) {var num = e.detail.value;if (isNaN(num)) {num = 1;}// 將數值與狀態寫回this.setData({num: parseInt(num)});this.change_spec();this.change_price();},//彈出modal_show: function (e) {var flag = e.currentTarget.dataset.flag;this.setData({flag:flag,choose_modal: "block",});},//消失modal_none: function () {this.setData({choose_modal: "none",});},clickAttr: function (e) {// console.log(e);return;var selectIndex = e.currentTarget.dataset.selectIndex;var attrIndex = e.currentTarget.dataset.attrIndex;var spec = this.data.spec;var count = spec[selectIndex].child.length;// console.log(count); return;for (var i =0; i < count; i++) {spec[selectIndex].child[i].isSelect = false;}spec[selectIndex].child[attrIndex].isSelect = true;var name = spec[selectIndex].child[attrIndex].name;//點擊屬性的名稱var attrid = spec[selectIndex].child[attrIndex].id;// //點擊過，修改屬性var selectName = "";//點擊過，修改屬性selectIndexArray[selectIndex].value = name;selectAttrid[selectIndex] = attrid;var selectIndexArraySize = selectIndexArray.length;//將數組的所有屬性名拼接起來for (var i =0; i < selectIndexArraySize; i++) {selectName += ' "' + selectIndexArray[i].value +'" ';}console.log(selectName);this.setData({spec: spec,//變換選擇框selectName: selectName,selectAttrid: selectAttrid});},//初始化規格選擇init_attr:function(){//初始化規格選擇var name = "";var spec = this.data.spec;var size = spec.length;for (var i =0; i < size; i++) {selectIndexArray.push({ key: i, value: spec[i].child[0].name });selectAttrid.push(spec[i].child[0].id)name += ' "' + selectIndexArray[i].value +'" ';}var selectName = this.data.selectName;selectName = name;this.setData({selectName: selectName,selectAttrid: selectAttrid});}})