diff --git a/src/components/UniSliper/UniSliper.vue b/src/components/UniSliper/UniSliper.vue index 80fcf23..6796395 100644 --- a/src/components/UniSliper/UniSliper.vue +++ b/src/components/UniSliper/UniSliper.vue @@ -1,10 +1,12 @@ <template> <div class="c-progress"> <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> - <div class="c-progress-inner" :style="setProgressStyle"></div> - <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> + <div class="c-progress-inner" + v-bind:style="{width: inner_width+'rpx'}" + ></div> + <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> --> </div> - <span v-if="showPerText">{{stand_width}}mm</span> + <span v-if="showPerText">{{content}}mm</span> </div> </template> @@ -19,57 +21,15 @@ export default { name: 'CProgress', props: { - percent: { - type: Number, - default: 60 - }, - showSlider: { - type: Boolean, - default: true - }, - showPerText: { - type: Boolean, - default: true - }, - // 进度条的宽度 - width: { - type: Number, - default: 300 - }, - bgColor: { - type: String, - default: '#ebeef5' - }, - progressColor: { - type: String, - default: '#409EFF' - }, - // 滑块的宽度 - sliderWidth: { - type: Number, - default: 20 - }, - // 颜色的类型 - type: { - type: String, - default: colorTable.default - }, - //规格长度 - standard:{ - type: Number, - default: 1.4 - }, - //初始长度 - stand_width:{ - type: Number, - default: 0 - } + //inner的长度 + inner_widthProp: Number, + //调用接口的值 + contentProp: String }, data () { return { - sliderLeft: 0, // 滑块相对父元素发x坐标 - progressWidth: 0, // 进度条当前的的宽度 - tempPercent: 0, + inner_width: this.inner_widthProp, + content: this.contentProp } }, computed: { @@ -103,71 +63,71 @@ this.sliderLeft = this.width / 100 * this.percent this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 this.tempPercent = this.percent - this.addListener() + // this.addListener() }, - methods: { - addListener () { - const slider = this.$refs.slider - const progress = this.$refs.progress - let isClickSlider = false - let distance = 0 // 滑块与点击坐标的绝对距离 - progress.onclick = (e) => { - // 阻止事件冒泡 - if (e.target == slider) { - return - } - let curX = progress.offsetLeft - this.sliderLeft = e.pageX - curX - if (this.sliderLeft <= 0) { - this.sliderLeft = 0 - } - if (this.sliderLeft >= this.width) { - this.sliderLeft = this.width - } - this._countCurPercent() - } - // slider.onmousedown = (e) => { - // isClickSlider = true - // let curX = slider.offsetLeft - // distance = e.pageX - curX // 得出绝对距离 - // } - progress.onmousemove = (e) => { - if (isClickSlider) { - // 判断是否已经超出进度条的长度 - if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { - this.sliderLeft = e.pageX - distance - this._countCurPercent() - } - } - } - progress.onmouseup = () => { - isClickSlider = false - } - }, - // 算出百分比 - _countCurPercent () { - this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) - this.progressWidth = this.sliderLeft + 20 - // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整 - if (this.tempPercent <= 0) { - this.progressWidth = 0 - this.sliderLeft = 0 - } - if (this.tempPercent >= 100) { - this.progressWidth = this.width + 20 - this.sliderLeft = this.width - } - this.stand_width = this.tempPercent*this.standard - this.stand_width = parseInt(this.stand_width/1) //取整 - this.$emit('percentChange', this.tempPercent) - } - } + // methods: { + // addListener () { + // const slider = this.$refs.slider + // const progress = this.$refs.progress + // let isClickSlider = false + // let distance = 0 // 滑块与点击坐标的绝对距离 + // progress.onclick = (e) => { + // // 阻止事件冒泡 + // if (e.target == slider) { + // return + // } + // let curX = progress.offsetLeft + // this.sliderLeft = e.pageX - curX + // if (this.sliderLeft <= 0) { + // this.sliderLeft = 0 + // } + // if (this.sliderLeft >= this.width) { + // this.sliderLeft = this.width + // } + // this._countCurPercent() + // } + // // slider.onmousedown = (e) => { + // // isClickSlider = true + // // let curX = slider.offsetLeft + // // distance = e.pageX - curX // 得出绝对距离 + // // } + // progress.onmousemove = (e) => { + // if (isClickSlider) { + // // 判断是否已经超出进度条的长度 + // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { + // this.sliderLeft = e.pageX - distance + // this._countCurPercent() + // } + // } + // } + // progress.onmouseup = () => { + // isClickSlider = false + // } + // }, + // // 算出百分比 + // _countCurPercent () { + // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) + // this.progressWidth = this.sliderLeft + 20 + // // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整 + // if (this.tempPercent <= 0) { + // this.progressWidth = 0 + // this.sliderLeft = 0 + // } + // if (this.tempPercent >= 100) { + // this.progressWidth = this.width + 20 + // this.sliderLeft = this.width + // } + // this.stand_width = this.tempPercent*this.standard + // this.stand_width = parseInt(this.stand_width/1) //取整 + // this.$emit('percentChange', this.tempPercent) + // } + // } } </script> <style scoped lang="scss"> .c-progress { - $width: 400rpx; + $width: 300px; $radius: 5px; display: flex; align-items: center; @@ -179,7 +139,7 @@ } .c-progress-outer { - width: $width; + width: 420rpx; height: 10px; background: #ebeef5; position: relative; @@ -187,7 +147,7 @@ align-items: center; .c-progress-inner { - width: 100rpx; + width: 300rpx; height: 10px; background: #FF6B4A ; } diff --git a/src/pages.json b/src/pages.json index 0c74409..ab4f503 100644 --- a/src/pages.json +++ b/src/pages.json @@ -19,12 +19,6 @@ } }, { - "path" : "pages/frameDetail/frameDetail", - "style" : { - "navigationBarTitleText" : "产品详情" - } - }, - { "path" : "pages/lensDetails/lensDetails", "style" : { "navigationBarTitleText" : "产品详情" diff --git a/src/pages/detailStandard/detailStandard_k.vue b/src/pages/detailStandard/detailStandard_k.vue index ba92d4b..4403dc1 100644 --- a/src/pages/detailStandard/detailStandard_k.vue +++ b/src/pages/detailStandard/detailStandard_k.vue @@ -1,19 +1,36 @@ <template> <view class="container"> <view class="detail"> - <view class="detail1"><image v-bind:src="detail.image"></image></view> + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> <view class="detail2"> - <view class="detail2_name">{{detail.name}}</view> + <view class="detail2_name">{{details.data.p_name}}</view> <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> - <view class="detail2_price"><span>¥{{detail.price}}</span></view> + <view class="detail2_price"> + <span>¥{{details.data.p_sale_price*count}}</span> + <view class="counter"> + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> + <text>{{count}}</text> + <view class="btn" @click="counter(true)">+</view> + </view> + </view> </view> </view> <view class="choose"> <view class="colour"> <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> - <view class="colour_exp">*黑色 BHL192345</view> + <view class="colour_exp">*{{colour}}</view> + <view> <view class="colour2"> - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> + <view + v-for="(items,index) in details.data.skuList" + :key="index" + @click="viewChoose(index)" + class="colour2_view" + v-bind:class="{'colour2_viewed': chooseNum == index}" + > + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> + </view> + </view> </view> <hr/> </view> @@ -22,23 +39,59 @@ <view class="size1_1">框架尺寸</view> <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> </view> - <view class="size2"> - <view>通用</view> - <view>定制</view> + <view class="colour"> + <view class="colour_exp">*{{colour}}</view> </view> <view class="D3_list"> - <view v-for="(item) in parameter" :key="item.key"> - <view><image class="D3_image" v-bind:src = "item.img"></image></view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="300"/> + <text>{{details.data.frame_width}}mm</text> + </view> + <view>{{parameter[0].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> <view class="D3_list_jDu"> - <!-- uni-sliper插件 --> - <!-- <c-progress class="c-progress" - :percent="item.percent" - :show-slider="false" :width="190" - :standard="item.standard_l" - :stand_width="item.slength" - progressColor="#FF6B4A" - /> --> - <view>{{item.standard}}</view> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="190"/> + <view>{{details.data.glass_width}}mm</view> + </view> + <view>{{parameter[1].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="210"/> + <view>{{details.data.glass_height}}mm</view> + </view> + <view>{{parameter[2].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> + <view class="D3_list_jDu"> + + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="160"/> + <view>{{details.data.nose_width}}mm</view> + </view> + <view>{{parameter[3].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="260"/> + <view>{{details.data.leg_long}}mm</view> + </view> + <view>{{parameter[4].standard}}</view> </view> </view> <hr/> @@ -51,7 +104,13 @@ </view> <view class="colour_exp">*0290</view> <view class="part_som"> - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> + <view + v-for="(part) in part" + :key="part.key" + v-bind:class="{'size_viewed': part.is_actived}" + > + <image v-bind:src="part.img"></image> + </view> </view> </view> </view> @@ -60,7 +119,7 @@ <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> <view class="buy3"> <view class="buy3_1">暂时不选</view> - <view class="buy3_2">立即去选</view> + <view class="buy3_2" @click="popArgs">立即去选</view> </view> </view> <view class="zhanwei"></view> @@ -72,55 +131,73 @@ import CProgress from '../../components/UniSliper/UniSliper' import store from '@/store' export default { + components: { + CProgress + }, data(){ return{ - detail:{ - image:'/static/img/detail/d1.png', - name:'商品名称商品名称商品名称商品名称商品名称', - price: 180, - number: 1, - }, - //框架颜色 - colour:[ - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} - ], - //规格 + count: 1, + colour: '1.56非球面防蓝光_亚黑色', + chooseNum : '', parameter:[ - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, ], //配饰 part:[ - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, ], } }, - components: { - detailStandard_k(){ - console.log(detailStandard_k) - return this.$store.state.detailStandard_k.detailStandardList - } + computed: { + details(){ + return this.$store.state.detailStandard_k.list + }, }, onLoad:function(){ - store.dispatch('detailStandard_k/getList') + store.dispatch('detailStandard_k/fetch', { + uid: "1", + pid: "26", + }); + // console.log(this.$store.state.detailStandard_k.list+'ssss'); }, + methods: { + counter(isadd){ + if(isadd){ + this.count++ + }else{ + this.count <= 1? this.disabled = true:this.count-- + } + }, + colourChange(index,e){ + this.colour = e ; //颜色选择 + // console.log(index,e); + + }, + viewChoose(index){ + this.chooseNum = index + }, + popArgs(){ + uni.navigateTo({ + url: '../detailsChoiceArgs/detailsChoiceArgs', + success: res => {}, + fail: () => {}, + complete: () => {} + }); + } + } + } </script> @@ -148,7 +225,7 @@ hr{ align-items: center; } .detail1{ - height: 188rpx; + height: 178rpx; width: 188rpx; image{ width: 100%; @@ -159,7 +236,7 @@ hr{ .detail2{ width: 68%; view{ - margin-bottom: 8px; + margin-bottom: 6px; font-family: PingFangSC-Regular; } .detail2_name{ @@ -167,6 +244,11 @@ hr{ color: #333333; letter-spacing: -0.26px; line-height: 18px; + overflow:hidden; + text-overflow:ellipsis; + display:-webkit-box; + -webkit-box-orient:vertical; + -webkit-line-clamp:2; } .detail2_tui{ font-size: 10px; @@ -182,6 +264,24 @@ hr{ letter-spacing: -0.26px; } } +.counter{ + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 28rpx; + color: #333333; + width: 122rpx; + float: right; + .btn{ + display: flex; + justify-content: center; + line-height: 32rpx; + height: 32rpx; + width: 32rpx; + background-color: #F2F2F2; + color: #CFCFCF; + } +} .choose{ background: #FFFFFF; padding: 16px; @@ -218,15 +318,19 @@ hr{ justify-content: space-between ; grid-row-gap: 10px; margin-bottom: 14px; - view{ + .colour2_view{ border: 1px solid #F2F2F2; image{ - width: 100%; - height: 100%; + width: 100rpx; + height: 60rpx; } } - view:hover{ + .colour2_viewed{ border: 1px solid #FF6B4A; + image{ + width: 100rpx; + height: 60rpx; + } } } } @@ -306,6 +410,9 @@ hr{ color: #999999; letter-spacing: -0.19px; } + .D3_list1{ + display: flex; + } } } .part{ @@ -323,13 +430,19 @@ hr{ height: 100%; } } - view:hover{ + .size_viewed{ border: 1px solid #FF6B4A; + height: 72rpx; + image{ + width: 100%; + height: 100%; + } } } } + .buy{ - height: 280rpx; + height: 300rpx; background: #FFFFFF ; margin-top: 10px; border-radius: 8px; diff --git a/src/pages/detailStandard/detailStandard_sun.vue b/src/pages/detailStandard/detailStandard_sun.vue index ecf54c8..748cfd2 100644 --- a/src/pages/detailStandard/detailStandard_sun.vue +++ b/src/pages/detailStandard/detailStandard_sun.vue @@ -1,69 +1,135 @@ <template> <view class="container"> <view class="detail"> - <view class="detail1"><image v-bind:src="detail.image"></image></view> + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> <view class="detail2"> - <view class="detail2_name">{{detail.name}}</view> - <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> - <view class="detail2_price"><span>¥{{detail.price}}</span></view> + <view class="detail2_name">{{details.data.p_name}}</view> + <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> + <view class="detail2_price"> + <text>¥{{details.data.p_sale_price*count}}</text> + <view class="counter"> + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> + <text>{{count}}</text> + <view class="btn" @click="counter(true)">+</view> + </view> + </view> </view> </view> <view class="choose"> <view class="colour"> - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> - <view class="colour_exp">*黑色 BHL192345</view> + <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> + <view class="colour_exp">*{{colour}}</view> + <view> <view class="colour2"> - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> + <view + v-for="(items,index) in details.data.skuList" + :key="index" + @click="viewChoose(index)" + class="colour2_view" + v-bind:class="{'colour2_viewed': chooseNum == index}" + > + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> + </view> + </view> </view> <hr/> </view> <view class="colour"> - <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> + <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view> <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> + <view> <view class="jp_colour2"> - <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view> + <view + v-for="(items,index) in jp_colour" + :key="index" + class="jp_colour2_view" + > + <image v-bind:src="items.img"></image> + </view> + </view> </view> <hr/> </view> - <view class="split"> - <view class="split1"> - <span>折射率</span> - <span class="split1_span">注:折射率越高,镜片越薄,看起来更美观。</span> - <image src="/static/img/detail/xiala2.png"></image> + <view class="colour"> + <view class="colour1"> + <text>{{details.data.attrList[0].meta_name}}</text> + <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> + <image src="/static/img/detail/xiala.png"></image> </view> - <view class="split2"> - <view class="split2_number">0-300度</view> - <view class="split2_choose"><view class="split2_tui">1.56(推荐)</view><view>1.60</view></view> + <view> + <view class="split"> + <view + v-for="(items,index) in details.data.attrList[0].attr" + :key="index" + > + <view + class="split_colour2" + @click="splitChoose(index)" + v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" + >{{items.name}}</view> + </view> </view> - <view class="split2"> - <view class="split2_number">300-1000度</view> - <view class="split2_choose"><view class="split2_tui">1.71(推荐)</view> - <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view> </view> <hr/> </view> <view class="size"> <view class="size1"> <view class="size1_1">框架尺寸</view> - <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view> + <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> </view> - <view class="size2"> - <view>通用</view> - <view>定制</view> + <view class="colour"> + <view class="colour_exp">*{{colour}}</view> </view> - <!-- uni-sliper插件 --> <view class="D3_list"> - <view v-for="(item) in parameter" :key="item.key"> - <view><image class="D3_image" v-bind:src = "item.img"></image></view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="300"/> + <text>{{details.data.frame_width}}mm</text> + </view> + <view>{{parameter[0].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="190"/> + <view>{{details.data.glass_width}}mm</view> + </view> + <view>{{parameter[1].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> <view class="D3_list_jDu"> - <c-progress class="c-progress" - :percent="item.percent" - :show-slider="false" :width="190" - :standard="item.standard_l" - :stand_width="item.slength" - progressColor="#FF6B4A" - /> - <view>{{item.standard}}</view> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="210"/> + <view>{{details.data.glass_height}}mm</view> + </view> + <view>{{parameter[2].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> + <view class="D3_list_jDu"> + + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="160"/> + <view>{{details.data.nose_width}}mm</view> + </view> + <view>{{parameter[3].standard}}</view> + </view> + </view> + <view> + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> + <view class="D3_list_jDu"> + <view class="D3_list1"> + <c-progress class="c-progress" :inner_widthProp="260"/> + <view>{{details.data.leg_long}}mm</view> + </view> + <view>{{parameter[4].standard}}</view> </view> </view> <hr/> @@ -72,11 +138,17 @@ <view class="part"> <view class="size1"> <view class="size1_1">配件</view> - <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> + <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> </view> <view class="colour_exp">*0290</view> <view class="part_som"> - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> + <view + v-for="(part) in part" + :key="part.key" + v-bind:class="{'size_viewed': part.is_actived}" + > + <image v-bind:src="part.img"></image> + </view> </view> </view> </view> @@ -85,7 +157,7 @@ <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> <view class="buy3"> <view class="buy3_1">暂时不选</view> - <view class="buy3_2">立即去选</view> + <view class="buy3_2" @click="popArgs">立即去选</view> </view> </view> <view class="zhanwei"></view> @@ -94,6 +166,7 @@ </template> <script> import CProgress from '../../components/UniSliper/UniSliper' +import store from '@/store' export default { components: { @@ -101,56 +174,91 @@ export default { }, data(){ return{ - detail:{ - image:'/static/img/detail/sun_glass.png', - name:'商品名称商品名称商品名称商品名称商品名称', - price: 180, - number: 1, - }, - //框架颜色 - colour:[ - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} + count: 1, + colour: '1.56非球面防蓝光_亚黑色', + chooseNum : '', + isSplit: '' , + parameter:[ + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, ], //镜片颜色 - jp:[ - {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'}, - {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'} - ], - //规格参数 - parameter:[ - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, + jp_colour:[ + {img:'/static/img/detail/Kuang/sun_jp.png'}, + {img:'/static/img/detail/Kuang/sun_jp.png'}, + {img:'/static/img/detail/Kuang/sun_jp.png'}, + {img:'/static/img/detail/Kuang/sun_jp.png'}, + {img:'/static/img/detail/Kuang/sun_jp.png'}, + {img:'/static/img/detail/Kuang/sun_jp.png'} ], //配饰 part:[ - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, - + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, ], + //折射率 + split:[ + {number: 1.56}, + {number: 1.60}, + {number: 1.67}, + {number: 1.71}, + {number: 1.74} + + ] + } + }, + + computed: { + details(){ + return this.$store.state.detailStandard_k.list + }, + }, + onLoad:function(){ + store.dispatch('detailStandard_k/fetch', { + uid: "1", + pid: "26", + }); + console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); + console.log("ssssssssssssssssssssssssssss") + }, + methods: { + counter(isadd){ + if(isadd){ + this.count++ + }else{ + this.count <= 1? this.disabled = true:this.count-- + } + }, + colourChange(index,e){ + this.colour = e ; //颜色选择 + // console.log(index,e); + + }, + viewChoose(index){ + this.chooseNum = index + }, + splitChoose(index){ + this.isSplit = index + }, + popArgs(){ + uni.navigateTo({ + url: '../detailsChoiceArgs/detailsChoiceArgs', + success: res => {}, + fail: () => {}, + complete: () => {} + }); } } + } </script> @@ -166,6 +274,7 @@ hr{ height: 1px; background: #F2F2F2; margin-top: 18px; + margin-bottom: 10px; } .detail{ height: 272rpx; @@ -178,7 +287,7 @@ hr{ align-items: center; } .detail1{ - height: 188rpx; + height: 178rpx; width: 188rpx; image{ width: 100%; @@ -189,7 +298,7 @@ hr{ .detail2{ width: 68%; view{ - margin-bottom: 8px; + margin-bottom: 6px; font-family: PingFangSC-Regular; } .detail2_name{ @@ -197,6 +306,11 @@ hr{ color: #333333; letter-spacing: -0.26px; line-height: 18px; + overflow:hidden; + text-overflow:ellipsis; + display:-webkit-box; + -webkit-box-orient:vertical; + -webkit-line-clamp:2; } .detail2_tui{ font-size: 10px; @@ -212,6 +326,24 @@ hr{ letter-spacing: -0.26px; } } +.counter{ + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 28rpx; + color: #333333; + width: 122rpx; + float: right; + .btn{ + display: flex; + justify-content: center; + line-height: 32rpx; + height: 32rpx; + width: 32rpx; + background-color: #F2F2F2; + color: #CFCFCF; + } +} .choose{ background: #FFFFFF; padding: 16px; @@ -233,6 +365,13 @@ hr{ width: 40rpx; height: 36rpx; } + .colour1_span2{ + font-family: PingFangSC-Regular; + font-size: 12px; + color: #666666; + margin-left: 10px; + font-weight: normal + } } .colour_exp{ font-family: PingFangSC-Regular; @@ -248,94 +387,61 @@ hr{ justify-content: space-between ; grid-row-gap: 10px; margin-bottom: 14px; - view{ + .colour2_view{ border: 1px solid #F2F2F2; image{ - width: 100%; - height: 100%; + width: 100rpx; + height: 60rpx; } } - view:hover{ + .colour2_viewed{ border: 1px solid #FF6B4A; + image{ + width: 100rpx; + height: 60rpx; + } } } } .jp_colour2{ - display: grid; - grid-template-columns: repeat(6, 12%); - grid-row-gap: 10px; - grid-column-gap: 6px; - margin-bottom: 14px; - view{ + display: grid; + grid-template-columns: repeat(5, 13%); + justify-content: start ; + grid-column-gap: 10px; + grid-row-gap: 10px; + margin-bottom: 14px; + .jp_colour2_view{ border: 1px solid #F2F2F2; - height: 80rpx; image{ - width: 100%; - height: 100%; + width: 80rpx; + height: 80rpx; } } - view:hover{ - border: 1px solid #FF6B4A; - } -} -.split1{ - span{ - font-family: PingFangSC-Medium; - font-size: 16px; - color: #333333; - letter-spacing: -0.3px; - text-align: justify; - line-height: 24px; - font-weight: bold; - margin-right:8px; - } - .split1_span{ - font-family: PingFangSC-Regular; - font-size: 10px; - color: #999999; - letter-spacing: -0.3px; - font-weight:normal; - } - image{ - float: right; - width: 40rpx; - height: 36rpx; - } } -.split2{ - margin-bottom: 12px; - .split2_number{ +.split{ + display: grid; + grid-template-columns: repeat(2, 45%); + grid-column-gap: 10px; + grid-row-gap: 10px; + margin-top: 10px ; + .split_colour2{ + display: flex; + justify-content: center; + align-items: center; + width: 300rpx; + height: 60rpx; + background: #F2F2F2; + border-radius: 2px; font-family: PingFangSC-Regular; - font-size: 10px; - color: #999999; - letter-spacing: -0.19px; - margin-bottom: 6px; + font-size: 12px; + color: #666666; + letter-spacing: 0; + text-align: center; } - .split2_choose{ - display: flex; - view{ - display: flex; - justify-content: center; - align-items: center; - font-family: PingFangSC-Regular; - font-size: 12px; - color: #666666; - background: #F2F2F2; - width: 100rpx; - height: 60rpx; - border-radius: 2px; - margin-right: 10px; - } - view:hover{ - color: #FF6B4A; - background: rgba(255,107,74,0.15); - } - .split2_tui{ - width: 186rpx; - height: 60rpx; - } + .split_colour2_actived{ + background: rgba(255,107,74,0.15); + color: #FF6B4A; } - } .size,.part{ margin-top:14px; @@ -413,6 +519,9 @@ hr{ color: #999999; letter-spacing: -0.19px; } + .D3_list1{ + display: flex; + } } } .part{ @@ -430,13 +539,19 @@ hr{ height: 100%; } } - view:hover{ + .size_viewed{ border: 1px solid #FF6B4A; + height: 72rpx; + image{ + width: 100%; + height: 100%; + } } } } + .buy{ - height: 280rpx; + height: 300rpx; background: #FFFFFF ; margin-top: 10px; border-radius: 8px; @@ -502,5 +617,4 @@ hr{ font-size: 16px; } } - </style> \ No newline at end of file diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue deleted file mode 100644 index af007b1..0000000 --- a/src/pages/frameDetail/frameDetail.vue +++ /dev/null @@ -1,617 +0,0 @@ -<template> - <view class="container"> - <view class="D1"> - <!-- 轮播图 --> - <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > - <swiper-item v-for="(item) in infos" :key="item.goods_id"> - <image :src="item.img" mode="scaleToFill"></image> - </swiper-item> - </swiper> - <view class="D1_price">¥{{price}}</view> - <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> - <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> - </view> - <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4"> - <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view> - <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view> - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> - </view> - <view class="D2" v-if="updateGoodType == 1"> - <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view> - <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view> - <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view> - </view> - <view class="D2" v-if="updateGoodType == 3"> - <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view> - <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view> - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> - </view> - - <view class="D3"> - <view class="screenBar"> - <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> - </view> - </view> - <view class="screen-item " v-if="current ===0"> - <view class="D3_list"> - <view v-for="(item) in parameter" :key="item.key"> - <image class="D3_image" v-bind:src = "item.img"></image> - <span>{{item.standard}}</span> - <span>{{item.slength}}</span> - </view> - </view> - </view > - <view class="screen-item " v-if="current ===1"> - <view class="D3_list"> - <view>主体</view> - <view>商品产地:韩国</view> - <view>包装清单:彩色隐形 * 1</view> - </view> - </view > - <view class="screen-item " v-if="current ===2"> - <view class="customerService"> - <view class="serviceItem" > - <view class="title"> - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> - <text class="titleText">卖家服务</text> - </view> - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> - </view> - <view class="serviceItem" > - <view class="title"> - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> - <text class="titleText">平台承诺</text> - </view> - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> - </view> - <view class="serviceItem"> - <view class="title"> - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> - <text class="titleText">正品保证</text> - </view> - <view class="itemContent">向您保证所售商品均为正品行货</view> - </view> - <view class="serviceItem2"> - <view class="title"> - <text class="titleText">权利申明</text> - </view> - <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> - </view> - <view class="serviceItem2"> - <view class="title"> - <text class="titleText">价格保证</text> - </view> - <view class="itemContent"> - <view class="itemContent-child"> - <text class="contentTitle">平台价:</text> - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> - </view> - <view class="itemContent-child"> - <text class="contentTitle">划线价:</text> - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> - </view> - <view class="itemContent-child"> - <text class="contentTitle">平折扣:</text> - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> - </view> - <view class="itemContent-child"> - <text class="contentTitle">异常问题:</text> - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> - </view> - - </view> - </view> - </view> - </view > - </view> - <view class="D4" v-if="current !==2"> - <view class="D4_esvalue"> - <view>{{esvalue}}</view> - <view class="D4_2"> - <view class="star" v-for="o in starCount" :key="o"> - <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> - </view> - </view> - </view> - <view class="D4_list"> - <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> - </view> - </view> - <view class="D5" v-if="current !==2"> - <view class="D5_fixed1"> - <image src="/static/img/detail/hr.png"></image> - <view>商品详细</view> - <image src="/static/img/detail/hr.png"></image> - </view> - <view class="D5_all"> - <image v-bind:src="imgAll"></image> - </view> - <view class="D5_photoes"> - <view class="D5_photoes1"> - <view v-for="(photoes) in photoes" :key="photoes.value"> - <image v-bind:src = "photoes.img"></image> - <view>{{photoes.value}}</view> - </view> - </view> - <view class="D5_logo1">帕森防蓝光镜片</view> - <view class="D5_logo2">健康护眼,我们是认真的!</view> - <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> - </view> - </view> - <view class="D6" v-if="current !==2"> - <view class="D6_v1">CHARM DETAIL</view> - <view class="D6_v2">细节展示</view> - <view ><image v-bind:src="imgDetail"></image></view> - <view>........................................................................</view> - <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> - </view> - - <!-- 底部菜单 --> - <view class="botton"> - <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> - <view class="botton_2"> - <view class="botton_input">加入购物车</view> - <view class="botton_now" @click="goPerchase">立即购买</view> - </view> - </view> - </view> -</template> - -<script> -import store from '@/store'; -export default { - data(){ - return { - name:'商品名称', - goodType:2, - price: 120, - number: 391, - screenItems: [ - {current:0,text:'商品保障'}, - {current:1,text:'规格参数'}, - {current:2,text:'售后保障'}, - ], - current: 0, - starCount:5, - infos: [ - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, - { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, - { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' }, - ], - parameter:[ - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, - {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} - ], - assess:[ - {key: 0, Iassess: '价格实惠'}, - {key: 1, Iassess: '美观大方'}, - {key: 2, Iassess: '易搭配'} - ], - esvalue:'宝贝好评率 100%', - introduction:{ - material:'钛合金', - func:'抗疲劳/防辐射', - rate: 1.6 - }, - imgAll:'/static/img/detail/d8.png' , - photoes:[ - {value:'日常办公', img:'/static/img/detail/d9.png'}, - {value:'上网', img:'/static/img/detail/d10.png'}, - {value:'追剧', img:'/static/img/detail/d11.png'}, - {value:'玩游戏', img:'/static/img/detail/d12.png'}, - ], - imgDetail:'/static/img/detail/d13.png', - imgShop:{ - img:'/static/tab-cart.png', - IsShown: false - } - } - }, - onLoad:function(option){ - this.goodType = option.goodType - // console.log(this.updateGoodType) - store.dispatch('read/fetch'); - }, - computed:{ - updateGoodType(){ - return this.goodType - }, - goodInfo() { - console.log(this.$store.state.read.goodInfo) - return this.$store.state.read.goodInfo; - }, - }, - methods:{ - goPerchase(){ - switch(this.updateGoodType){ - case '1': - uni.navigateTo({ - url: '../detailsChoiceArgs/detailsChoiceArgs', - success: res => {}, - fail: () => {}, - complete: () => {} - }); - break; - case '2': - uni.navigateTo({ - url: `../detailStandard/detailStandard_k`, - success: res => {}, - fail: () => {}, - complete: () => {} - }); - break; - case '3': - uni.navigateTo({ - url: `../purchaseLenses/purchaseLenses`, - success: res => {}, - fail: () => {}, - complete: () => {} - }); - break; - case '4': - uni.navigateTo({ - url: `../detailStandard/detailStandard_sun`, - success: res => {}, - fail: () => {}, - complete: () => {} - }); - break; - default : - break - } - }, - tabChange(e) { - if (this.current !== e) { - this.current = e; - } - } - } -} -</script> -<style lang='scss'> - .container{ - background-color:#f8f8f8 ; - } - .D1,.D2,.D3,.D4,.D6{ - background: #ffffff; - margin-bottom: 10px; - padding:8px 20px 8px 20px; - box-sizing: border-box; - .swiperImage { - width: 684rpx; - height: 512rpx; - image { - width: 100%; - height: 100%; - border-radius: 16rpx; - } - } - } - .D5{ - background: #ffffff; - padding:8px 20px 8px 20px; - box-sizing: border-box; - } - .swiperImage{ - width: 100%; - height: 560rpx; - .swiper-item{ - width: 100%; - image{ - width: 100%; - } - } - } - .D1{ - .D1_price{ - color: #EB5D3B; - font-size: 18px; - margin-top: 5px; - font-family: 'PingFangSC-Semibold'; - } - .D1_name{ - font-size: 16px; - font-family: 'PingFangSC-Semibold'; - margin-top: 5px; - display: flex; - justify-content: space-between; - .D1_name1{ - font-weight: bold; - font-size: 16px; - color: #333333; - } - .D1_number{ - color: #999999 ; - font-size: 14px; - font-family: 'PingFangSC-Regular'; - } - } - .D1_spans{ - font-size: 10px; - color:#999999; - margin-top: 5px; - span{ - height: 14px; - margin-right: 10px; - } - } - - } - .D2{ - font-size: 14px; - font-family: 'PingFangSC-Regular'; - view{ - height: 24px; - } - .D2_span1{ - color: #999999; - } - .D2_span2{ - color: #333333; - } - } - .D3{ - .screenBar{ - width: 670rpx; - margin-top: 20rpx; - margin-bottom: 24rpx; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - font-size: 14px; - color: #333333; - transition:all 0.2s; - } - .screen-item{ - font-size: 32rpx; - color: #333333; - display: flex; - transition:all 0.2s; - .D3_list{ - margin-bottom: 4px; - } - .D3_list view{ - display: flex; - align-content: center; - font-size: 14px; - color: #333333; - } - .D3_list image{ - width: 50px; - height: 25px; - margin-right: 6px; - } - .D3_list span{ - margin-left: 6px; - margin-right: 5px; - font-family: 'PingFangSC-Regular'; - } - } - .active{ - border-bottom: 4rpx solid #FF6B4A; - } - .customerService{ - margin-bottom: 90rpx; - .serviceItem{ - margin-bottom: 32rpx; - .title{ - display: flex;flex-direction: row; - align-items: center; - .titleText{ - font-size: 14px; - color: #333333; - margin-bottom: 12rpx; - } - } - .itemContent{ - font-size: 14px; - color: #999999; - margin-left: 18rpx; - } - } - .serviceItem2{ - margin-left: 18rpx; - margin-bottom: 32rpx; - .titleText{ - font-size: 14px; - color: #FF6B4A; - } - .itemContent{ - font-size: 14px; - color: #999999; - .itemContent-child{ - margin-bottom: 40rpx; - .contentTitle{ - border-bottom: 1px solid #FF6B4A; - } - } - } - } - } - } - .D4{ - .D4_esvalue{ - font-size: 14px; - color: #333333; - display: flex; - justify-content: space-between; - margin-bottom: 10px; - .D4_2{ - width: 90px; - display: flex; - align-items: center; - justify-content: space-between; - } - } - .D4_esvalue view{ - font-size: 14px; - color: #333333; - font-weight: bold; - } - .D4_list view{ - display: inline-block; - font-size: 12px; - text-align: center; - margin-right: 12px; - width: 90px; - height: 24px; - line-height: 24px; - background: #F2F2F2; - color: #666666 ; - } - } - .D5{ - .D5_fixed1{ - display: flex; - justify-content: space-between; - align-content: center; - margin-bottom: 12px; - view{ - font-size: 14px; - color: #333333; - font-weight: bold; - font-family: 'PingFangSC-Medium'; - line-height: 24px; - } - image{ - width: 240rpx; - height: 3px; - margin-top: 10px; - } - } - .D5_all { - width: 100%; - height: 380px; - margin-bottom: 30px; - font-family: 'PingFangSC-Regular'; - border: #999999 solid 1.5px; - image{ - width: 100%; - height: 380px; - }} - .D5_photoes1{ - display: grid; - grid-template-columns: 48% 48%; - grid-row-gap: 10px; - grid-column-gap: 4%; - image{ - width: 100%; - height: 70px; - } - view{ - width: 100%; - font-size: 14px; - text-align: center; - background: #949494; - font-family: 'PingFangSC-Regular'; - color: #ffffff; - view{ - height: 24px; - line-height: 24px; - } - } - } - .D5_logo1,.D5_logo2{ - text-align: center; - } - .D5_logo1{ - margin-top: 40px; - font-size: 24px; - font-weight: bold; - font-family: 'PingFangSC-Semibold'; - } - .D5_logo2{ - font-size: 12px; - } - .D5_logo3{ - width: 100%; - text-align: center; - image{ - width: 50px; - height: 24px; - } - } - } - .D6{ - width: 100%; - height: 430px; - background: #F9F6ED; - margin-bottom: 74px; - view{ - text-align: center; - } - .D6_v1{ - font-weight: bold; - } - .D6_v2{ - font-size: 14px; - margin-bottom: 30px; - } - .D6_v5{ - .D6_v5_s1{ - font-weight: bold; - } - .D6_v5_s2{ - font-size: 14px; - } - } - } - .botton{ - position: fixed; - bottom: 0; - height: 74px; - width: 100%; - background: #FFFFFF; - padding: 20px 20px 8px 20px; - font-family: 'PingFangSC-Regular'; - box-sizing: border-box; - display: flex; - justify-content: space-between; - align-content: center; - .botton_1{ - width: 20%; - height: 100%; - text-align: center; - color: #989898; - } - image{ - width: 60%; - height: 30px; - } - .botton_image{ - font-size: 12px; - text-align: center; - } - .botton_2{ - width: 74%; - height: 86%; - display: grid; - grid-template-columns: 50% 50%; - } - .botton_input{ - display: inline-flex; - align-items: center; - justify-content: space-around; - background: #FFF0EC; - font-size: 16px; - color: #FF6B4A; - border-radius: 20px 0 0 20px; - } - .botton_now{ - display: inline-flex; - align-items: center; - justify-content: space-around; - background: #FF6B4A; - font-size: 16px; - color: #FFFFFF; - border-radius:0 20px 20px 0; - } - } -</style> \ No newline at end of file diff --git a/src/store/modules/detailStandard_k.js b/src/store/modules/detailStandard_k.js index c689eb3..39422ad 100644 --- a/src/store/modules/detailStandard_k.js +++ b/src/store/modules/detailStandard_k.js @@ -2,7 +2,7 @@ import urlAlias from '../url'; import request from '../request'; const { - detailStandardList + detailStandardUrl } = urlAlias const state = { @@ -10,29 +10,28 @@ const state = { }; const mutations = { - INIT: (state, detailStandardList) => { - state.detailStandardList = detailStandardList; + INIT: (state, data) => { + state.list = data; }, }; const actions = { - getList({ commit }, param){ + fetch({ commit }, param) { request({ - detailStandardList, - success: (res) => { - - commit('INIT', res.data.data) - console,log('success') - }, - fail: (res) => { - console.log("detail status === > ", res); - }, - complete: (res) => { - console.log("detail compete status === > ", res); - }, - }) + url: detailStandardUrl, + data: param, + success: (res) => { + commit('INIT', res.data); + }, + fail: (res) => { + console.log(" detail fail status === > ", res); + }, + complete: (res) => { + console.log(" detail complete status === > ", res); + }, + }) } -} + } export default { namespaced: true, diff --git a/src/store/modules/myOrder.js b/src/store/modules/myOrder.js index ed076ae..e312472 100644 --- a/src/store/modules/myOrder.js +++ b/src/store/modules/myOrder.js @@ -92,7 +92,7 @@ const actions = { ...res, data, } - console.log('data.data', resData.data.data); + console.log('data.data',res); commit("INIT", resData.data.data); }, }) diff --git a/src/store/modules/test.js b/src/store/modules/test.js index 9f66495..08f0592 100644 --- a/src/store/modules/test.js +++ b/src/store/modules/test.js @@ -10,8 +10,8 @@ const state = { }; const mutations = { - INIT: (state, list) => { - state.list = list; + INIT: (state, data) => { + state.list = data; }, }; diff --git a/src/store/url.js b/src/store/url.js index b4d15cb..38e9f9b 100644 --- a/src/store/url.js +++ b/src/store/url.js @@ -24,8 +24,8 @@ const urlAlias = { // 我的 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 - // 镜框选购页 - detailStandardList: '/app/prod/read', //获取商品的详细信息 + // 选购页 + detailStandardUrl: '/app/prod/read', //获取商品的详细信息 }