Commit 8fdae7108a162cfe9c369d11fd33390014c74713
1 parent
c4c4f1251c
Exists in
master
完成镜框和太阳镜的选购页功能
Showing
9 changed files
with
543 additions
and
980 deletions
Show diff stats
src/components/UniSliper/UniSliper.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="c-progress"> |
| 3 | 3 | <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> |
| 4 | - <div class="c-progress-inner" :style="setProgressStyle"></div> | |
| 5 | - <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> | |
| 4 | + <div class="c-progress-inner" | |
| 5 | + v-bind:style="{width: inner_width+'rpx'}" | |
| 6 | + ></div> | |
| 7 | + <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> --> | |
| 6 | 8 | </div> |
| 7 | - <span v-if="showPerText">{{stand_width}}mm</span> | |
| 9 | + <span v-if="showPerText">{{content}}mm</span> | |
| 8 | 10 | </div> |
| 9 | 11 | </template> |
| 10 | 12 | |
| ... | ... | @@ -19,57 +21,15 @@ |
| 19 | 21 | export default { |
| 20 | 22 | name: 'CProgress', |
| 21 | 23 | props: { |
| 22 | - percent: { | |
| 23 | - type: Number, | |
| 24 | - default: 60 | |
| 25 | - }, | |
| 26 | - showSlider: { | |
| 27 | - type: Boolean, | |
| 28 | - default: true | |
| 29 | - }, | |
| 30 | - showPerText: { | |
| 31 | - type: Boolean, | |
| 32 | - default: true | |
| 33 | - }, | |
| 34 | - // 进度条的宽度 | |
| 35 | - width: { | |
| 36 | - type: Number, | |
| 37 | - default: 300 | |
| 38 | - }, | |
| 39 | - bgColor: { | |
| 40 | - type: String, | |
| 41 | - default: '#ebeef5' | |
| 42 | - }, | |
| 43 | - progressColor: { | |
| 44 | - type: String, | |
| 45 | - default: '#409EFF' | |
| 46 | - }, | |
| 47 | - // 滑块的宽度 | |
| 48 | - sliderWidth: { | |
| 49 | - type: Number, | |
| 50 | - default: 20 | |
| 51 | - }, | |
| 52 | - // 颜色的类型 | |
| 53 | - type: { | |
| 54 | - type: String, | |
| 55 | - default: colorTable.default | |
| 56 | - }, | |
| 57 | - //规格长度 | |
| 58 | - standard:{ | |
| 59 | - type: Number, | |
| 60 | - default: 1.4 | |
| 61 | - }, | |
| 62 | - //初始长度 | |
| 63 | - stand_width:{ | |
| 64 | - type: Number, | |
| 65 | - default: 0 | |
| 66 | - } | |
| 24 | + //inner的长度 | |
| 25 | + inner_widthProp: Number, | |
| 26 | + //调用接口的值 | |
| 27 | + contentProp: String | |
| 67 | 28 | }, |
| 68 | 29 | data () { |
| 69 | 30 | return { |
| 70 | - sliderLeft: 0, // 滑块相对父元素发x坐标 | |
| 71 | - progressWidth: 0, // 进度条当前的的宽度 | |
| 72 | - tempPercent: 0, | |
| 31 | + inner_width: this.inner_widthProp, | |
| 32 | + content: this.contentProp | |
| 73 | 33 | } |
| 74 | 34 | }, |
| 75 | 35 | computed: { |
| ... | ... | @@ -103,71 +63,71 @@ |
| 103 | 63 | this.sliderLeft = this.width / 100 * this.percent |
| 104 | 64 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 |
| 105 | 65 | this.tempPercent = this.percent |
| 106 | - this.addListener() | |
| 66 | + // this.addListener() | |
| 107 | 67 | }, |
| 108 | - methods: { | |
| 109 | - addListener () { | |
| 110 | - const slider = this.$refs.slider | |
| 111 | - const progress = this.$refs.progress | |
| 112 | - let isClickSlider = false | |
| 113 | - let distance = 0 // 滑块与点击坐标的绝对距离 | |
| 114 | - progress.onclick = (e) => { | |
| 115 | - // 阻止事件冒泡 | |
| 116 | - if (e.target == slider) { | |
| 117 | - return | |
| 118 | - } | |
| 119 | - let curX = progress.offsetLeft | |
| 120 | - this.sliderLeft = e.pageX - curX | |
| 121 | - if (this.sliderLeft <= 0) { | |
| 122 | - this.sliderLeft = 0 | |
| 123 | - } | |
| 124 | - if (this.sliderLeft >= this.width) { | |
| 125 | - this.sliderLeft = this.width | |
| 126 | - } | |
| 127 | - this._countCurPercent() | |
| 128 | - } | |
| 129 | - // slider.onmousedown = (e) => { | |
| 130 | - // isClickSlider = true | |
| 131 | - // let curX = slider.offsetLeft | |
| 132 | - // distance = e.pageX - curX // 得出绝对距离 | |
| 133 | - // } | |
| 134 | - progress.onmousemove = (e) => { | |
| 135 | - if (isClickSlider) { | |
| 136 | - // 判断是否已经超出进度条的长度 | |
| 137 | - if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | |
| 138 | - this.sliderLeft = e.pageX - distance | |
| 139 | - this._countCurPercent() | |
| 140 | - } | |
| 141 | - } | |
| 142 | - } | |
| 143 | - progress.onmouseup = () => { | |
| 144 | - isClickSlider = false | |
| 145 | - } | |
| 146 | - }, | |
| 147 | - // 算出百分比 | |
| 148 | - _countCurPercent () { | |
| 149 | - this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | |
| 150 | - this.progressWidth = this.sliderLeft + 20 | |
| 151 | - // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 | |
| 152 | - if (this.tempPercent <= 0) { | |
| 153 | - this.progressWidth = 0 | |
| 154 | - this.sliderLeft = 0 | |
| 155 | - } | |
| 156 | - if (this.tempPercent >= 100) { | |
| 157 | - this.progressWidth = this.width + 20 | |
| 158 | - this.sliderLeft = this.width | |
| 159 | - } | |
| 160 | - this.stand_width = this.tempPercent*this.standard | |
| 161 | - this.stand_width = parseInt(this.stand_width/1) //取整 | |
| 162 | - this.$emit('percentChange', this.tempPercent) | |
| 163 | - } | |
| 164 | - } | |
| 68 | + // methods: { | |
| 69 | + // addListener () { | |
| 70 | + // const slider = this.$refs.slider | |
| 71 | + // const progress = this.$refs.progress | |
| 72 | + // let isClickSlider = false | |
| 73 | + // let distance = 0 // 滑块与点击坐标的绝对距离 | |
| 74 | + // progress.onclick = (e) => { | |
| 75 | + // // 阻止事件冒泡 | |
| 76 | + // if (e.target == slider) { | |
| 77 | + // return | |
| 78 | + // } | |
| 79 | + // let curX = progress.offsetLeft | |
| 80 | + // this.sliderLeft = e.pageX - curX | |
| 81 | + // if (this.sliderLeft <= 0) { | |
| 82 | + // this.sliderLeft = 0 | |
| 83 | + // } | |
| 84 | + // if (this.sliderLeft >= this.width) { | |
| 85 | + // this.sliderLeft = this.width | |
| 86 | + // } | |
| 87 | + // this._countCurPercent() | |
| 88 | + // } | |
| 89 | + // // slider.onmousedown = (e) => { | |
| 90 | + // // isClickSlider = true | |
| 91 | + // // let curX = slider.offsetLeft | |
| 92 | + // // distance = e.pageX - curX // 得出绝对距离 | |
| 93 | + // // } | |
| 94 | + // progress.onmousemove = (e) => { | |
| 95 | + // if (isClickSlider) { | |
| 96 | + // // 判断是否已经超出进度条的长度 | |
| 97 | + // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | |
| 98 | + // this.sliderLeft = e.pageX - distance | |
| 99 | + // this._countCurPercent() | |
| 100 | + // } | |
| 101 | + // } | |
| 102 | + // } | |
| 103 | + // progress.onmouseup = () => { | |
| 104 | + // isClickSlider = false | |
| 105 | + // } | |
| 106 | + // }, | |
| 107 | + // // 算出百分比 | |
| 108 | + // _countCurPercent () { | |
| 109 | + // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | |
| 110 | + // this.progressWidth = this.sliderLeft + 20 | |
| 111 | + // // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 | |
| 112 | + // if (this.tempPercent <= 0) { | |
| 113 | + // this.progressWidth = 0 | |
| 114 | + // this.sliderLeft = 0 | |
| 115 | + // } | |
| 116 | + // if (this.tempPercent >= 100) { | |
| 117 | + // this.progressWidth = this.width + 20 | |
| 118 | + // this.sliderLeft = this.width | |
| 119 | + // } | |
| 120 | + // this.stand_width = this.tempPercent*this.standard | |
| 121 | + // this.stand_width = parseInt(this.stand_width/1) //取整 | |
| 122 | + // this.$emit('percentChange', this.tempPercent) | |
| 123 | + // } | |
| 124 | + // } | |
| 165 | 125 | } |
| 166 | 126 | </script> |
| 167 | 127 | |
| 168 | 128 | <style scoped lang="scss"> |
| 169 | 129 | .c-progress { |
| 170 | - $width: 400rpx; | |
| 130 | + $width: 300px; | |
| 171 | 131 | $radius: 5px; |
| 172 | 132 | display: flex; |
| 173 | 133 | align-items: center; |
| ... | ... | @@ -179,7 +139,7 @@ |
| 179 | 139 | } |
| 180 | 140 | |
| 181 | 141 | .c-progress-outer { |
| 182 | - width: $width; | |
| 142 | + width: 420rpx; | |
| 183 | 143 | height: 10px; |
| 184 | 144 | background: #ebeef5; |
| 185 | 145 | position: relative; |
| ... | ... | @@ -187,7 +147,7 @@ |
| 187 | 147 | align-items: center; |
| 188 | 148 | |
| 189 | 149 | .c-progress-inner { |
| 190 | - width: 100rpx; | |
| 150 | + width: 300rpx; | |
| 191 | 151 | height: 10px; |
| 192 | 152 | background: #FF6B4A ; |
| 193 | 153 | } | ... | ... |
src/pages.json
src/pages/detailStandard/detailStandard_k.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="container"> |
| 3 | 3 | <view class="detail"> |
| 4 | - <view class="detail1"><image v-bind:src="detail.image"></image></view> | |
| 4 | + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | |
| 5 | 5 | <view class="detail2"> |
| 6 | - <view class="detail2_name">{{detail.name}}</view> | |
| 6 | + <view class="detail2_name">{{details.data.p_name}}</view> | |
| 7 | 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> |
| 8 | - <view class="detail2_price"><span>￥{{detail.price}}</span></view> | |
| 8 | + <view class="detail2_price"> | |
| 9 | + <span>￥{{details.data.p_sale_price*count}}</span> | |
| 10 | + <view class="counter"> | |
| 11 | + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | |
| 12 | + <text>{{count}}</text> | |
| 13 | + <view class="btn" @click="counter(true)">+</view> | |
| 14 | + </view> | |
| 15 | + </view> | |
| 9 | 16 | </view> |
| 10 | 17 | </view> |
| 11 | 18 | <view class="choose"> |
| 12 | 19 | <view class="colour"> |
| 13 | 20 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> |
| 14 | - <view class="colour_exp">*黑色 BHL192345</view> | |
| 21 | + <view class="colour_exp">*{{colour}}</view> | |
| 22 | + <view> | |
| 15 | 23 | <view class="colour2"> |
| 16 | - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
| 24 | + <view | |
| 25 | + v-for="(items,index) in details.data.skuList" | |
| 26 | + :key="index" | |
| 27 | + @click="viewChoose(index)" | |
| 28 | + class="colour2_view" | |
| 29 | + v-bind:class="{'colour2_viewed': chooseNum == index}" | |
| 30 | + > | |
| 31 | + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | |
| 32 | + </view> | |
| 33 | + </view> | |
| 17 | 34 | </view> |
| 18 | 35 | <hr/> |
| 19 | 36 | </view> |
| ... | ... | @@ -22,23 +39,59 @@ |
| 22 | 39 | <view class="size1_1">框架尺寸</view> |
| 23 | 40 | <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> |
| 24 | 41 | </view> |
| 25 | - <view class="size2"> | |
| 26 | - <view>通用</view> | |
| 27 | - <view>定制</view> | |
| 42 | + <view class="colour"> | |
| 43 | + <view class="colour_exp">*{{colour}}</view> | |
| 28 | 44 | </view> |
| 29 | 45 | <view class="D3_list"> |
| 30 | - <view v-for="(item) in parameter" :key="item.key"> | |
| 31 | - <view><image class="D3_image" v-bind:src = "item.img"></image></view> | |
| 46 | + <view> | |
| 47 | + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | |
| 48 | + <view class="D3_list_jDu"> | |
| 49 | + <view class="D3_list1"> | |
| 50 | + <c-progress class="c-progress" :inner_widthProp="300"/> | |
| 51 | + <text>{{details.data.frame_width}}mm</text> | |
| 52 | + </view> | |
| 53 | + <view>{{parameter[0].standard}}</view> | |
| 54 | + </view> | |
| 55 | + </view> | |
| 56 | + <view> | |
| 57 | + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | |
| 32 | 58 | <view class="D3_list_jDu"> |
| 33 | - <!-- uni-sliper插件 --> | |
| 34 | - <!-- <c-progress class="c-progress" | |
| 35 | - :percent="item.percent" | |
| 36 | - :show-slider="false" :width="190" | |
| 37 | - :standard="item.standard_l" | |
| 38 | - :stand_width="item.slength" | |
| 39 | - progressColor="#FF6B4A" | |
| 40 | - /> --> | |
| 41 | - <view>{{item.standard}}</view> | |
| 59 | + <view class="D3_list1"> | |
| 60 | + <c-progress class="c-progress" :inner_widthProp="190"/> | |
| 61 | + <view>{{details.data.glass_width}}mm</view> | |
| 62 | + </view> | |
| 63 | + <view>{{parameter[1].standard}}</view> | |
| 64 | + </view> | |
| 65 | + </view> | |
| 66 | + <view> | |
| 67 | + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | |
| 68 | + <view class="D3_list_jDu"> | |
| 69 | + <view class="D3_list1"> | |
| 70 | + <c-progress class="c-progress" :inner_widthProp="210"/> | |
| 71 | + <view>{{details.data.glass_height}}mm</view> | |
| 72 | + </view> | |
| 73 | + <view>{{parameter[2].standard}}</view> | |
| 74 | + </view> | |
| 75 | + </view> | |
| 76 | + <view> | |
| 77 | + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | |
| 78 | + <view class="D3_list_jDu"> | |
| 79 | + | |
| 80 | + <view class="D3_list1"> | |
| 81 | + <c-progress class="c-progress" :inner_widthProp="160"/> | |
| 82 | + <view>{{details.data.nose_width}}mm</view> | |
| 83 | + </view> | |
| 84 | + <view>{{parameter[3].standard}}</view> | |
| 85 | + </view> | |
| 86 | + </view> | |
| 87 | + <view> | |
| 88 | + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | |
| 89 | + <view class="D3_list_jDu"> | |
| 90 | + <view class="D3_list1"> | |
| 91 | + <c-progress class="c-progress" :inner_widthProp="260"/> | |
| 92 | + <view>{{details.data.leg_long}}mm</view> | |
| 93 | + </view> | |
| 94 | + <view>{{parameter[4].standard}}</view> | |
| 42 | 95 | </view> |
| 43 | 96 | </view> |
| 44 | 97 | <hr/> |
| ... | ... | @@ -51,7 +104,13 @@ |
| 51 | 104 | </view> |
| 52 | 105 | <view class="colour_exp">*0290</view> |
| 53 | 106 | <view class="part_som"> |
| 54 | - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | |
| 107 | + <view | |
| 108 | + v-for="(part) in part" | |
| 109 | + :key="part.key" | |
| 110 | + v-bind:class="{'size_viewed': part.is_actived}" | |
| 111 | + > | |
| 112 | + <image v-bind:src="part.img"></image> | |
| 113 | + </view> | |
| 55 | 114 | </view> |
| 56 | 115 | </view> |
| 57 | 116 | </view> |
| ... | ... | @@ -60,7 +119,7 @@ |
| 60 | 119 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 61 | 120 | <view class="buy3"> |
| 62 | 121 | <view class="buy3_1">暂时不选</view> |
| 63 | - <view class="buy3_2">立即去选</view> | |
| 122 | + <view class="buy3_2" @click="popArgs">立即去选</view> | |
| 64 | 123 | </view> |
| 65 | 124 | </view> |
| 66 | 125 | <view class="zhanwei"></view> |
| ... | ... | @@ -72,55 +131,73 @@ import CProgress from '../../components/UniSliper/UniSliper' |
| 72 | 131 | import store from '@/store' |
| 73 | 132 | |
| 74 | 133 | export default { |
| 134 | + components: { | |
| 135 | + CProgress | |
| 136 | + }, | |
| 75 | 137 | data(){ |
| 76 | 138 | return{ |
| 77 | - detail:{ | |
| 78 | - image:'/static/img/detail/d1.png', | |
| 79 | - name:'商品名称商品名称商品名称商品名称商品名称', | |
| 80 | - price: 180, | |
| 81 | - number: 1, | |
| 82 | - }, | |
| 83 | - //框架颜色 | |
| 84 | - colour:[ | |
| 85 | - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | |
| 86 | - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | |
| 87 | - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | |
| 88 | - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | |
| 89 | - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | |
| 90 | - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | |
| 91 | - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | |
| 92 | - ], | |
| 93 | - //规格 | |
| 139 | + count: 1, | |
| 140 | + colour: '1.56非球面防蓝光_亚黑色', | |
| 141 | + chooseNum : '', | |
| 94 | 142 | parameter:[ |
| 95 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | |
| 96 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | |
| 97 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | |
| 98 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | |
| 99 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | |
| 143 | + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | |
| 144 | + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | |
| 145 | + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | |
| 146 | + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | |
| 147 | + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | |
| 100 | 148 | ], |
| 101 | 149 | //配饰 |
| 102 | 150 | part:[ |
| 103 | - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | |
| 104 | - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | |
| 105 | - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | |
| 106 | - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | |
| 107 | - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | |
| 108 | - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | |
| 109 | - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | |
| 110 | - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | |
| 151 | + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | |
| 152 | + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 153 | + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
| 154 | + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 155 | + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 156 | + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
| 157 | + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
| 158 | + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
| 111 | 159 | ], |
| 112 | 160 | } |
| 113 | 161 | }, |
| 114 | 162 | |
| 115 | - components: { | |
| 116 | - detailStandard_k(){ | |
| 117 | - console.log(detailStandard_k) | |
| 118 | - return this.$store.state.detailStandard_k.detailStandardList | |
| 119 | - } | |
| 163 | + computed: { | |
| 164 | + details(){ | |
| 165 | + return this.$store.state.detailStandard_k.list | |
| 166 | + }, | |
| 120 | 167 | }, |
| 121 | 168 | onLoad:function(){ |
| 122 | - store.dispatch('detailStandard_k/getList') | |
| 169 | + store.dispatch('detailStandard_k/fetch', { | |
| 170 | + uid: "1", | |
| 171 | + pid: "26", | |
| 172 | + }); | |
| 173 | + // console.log(this.$store.state.detailStandard_k.list+'ssss'); | |
| 123 | 174 | }, |
| 175 | + methods: { | |
| 176 | + counter(isadd){ | |
| 177 | + if(isadd){ | |
| 178 | + this.count++ | |
| 179 | + }else{ | |
| 180 | + this.count <= 1? this.disabled = true:this.count-- | |
| 181 | + } | |
| 182 | + }, | |
| 183 | + colourChange(index,e){ | |
| 184 | + this.colour = e ; //颜色选择 | |
| 185 | + // console.log(index,e); | |
| 186 | + | |
| 187 | + }, | |
| 188 | + viewChoose(index){ | |
| 189 | + this.chooseNum = index | |
| 190 | + }, | |
| 191 | + popArgs(){ | |
| 192 | + uni.navigateTo({ | |
| 193 | + url: '../detailsChoiceArgs/detailsChoiceArgs', | |
| 194 | + success: res => {}, | |
| 195 | + fail: () => {}, | |
| 196 | + complete: () => {} | |
| 197 | + }); | |
| 198 | + } | |
| 199 | + } | |
| 200 | + | |
| 124 | 201 | } |
| 125 | 202 | </script> |
| 126 | 203 | |
| ... | ... | @@ -148,7 +225,7 @@ hr{ |
| 148 | 225 | align-items: center; |
| 149 | 226 | } |
| 150 | 227 | .detail1{ |
| 151 | - height: 188rpx; | |
| 228 | + height: 178rpx; | |
| 152 | 229 | width: 188rpx; |
| 153 | 230 | image{ |
| 154 | 231 | width: 100%; |
| ... | ... | @@ -159,7 +236,7 @@ hr{ |
| 159 | 236 | .detail2{ |
| 160 | 237 | width: 68%; |
| 161 | 238 | view{ |
| 162 | - margin-bottom: 8px; | |
| 239 | + margin-bottom: 6px; | |
| 163 | 240 | font-family: PingFangSC-Regular; |
| 164 | 241 | } |
| 165 | 242 | .detail2_name{ |
| ... | ... | @@ -167,6 +244,11 @@ hr{ |
| 167 | 244 | color: #333333; |
| 168 | 245 | letter-spacing: -0.26px; |
| 169 | 246 | line-height: 18px; |
| 247 | + overflow:hidden; | |
| 248 | + text-overflow:ellipsis; | |
| 249 | + display:-webkit-box; | |
| 250 | + -webkit-box-orient:vertical; | |
| 251 | + -webkit-line-clamp:2; | |
| 170 | 252 | } |
| 171 | 253 | .detail2_tui{ |
| 172 | 254 | font-size: 10px; |
| ... | ... | @@ -182,6 +264,24 @@ hr{ |
| 182 | 264 | letter-spacing: -0.26px; |
| 183 | 265 | } |
| 184 | 266 | } |
| 267 | +.counter{ | |
| 268 | + display: flex; | |
| 269 | + flex-direction: row; | |
| 270 | + justify-content: space-between; | |
| 271 | + font-size: 28rpx; | |
| 272 | + color: #333333; | |
| 273 | + width: 122rpx; | |
| 274 | + float: right; | |
| 275 | + .btn{ | |
| 276 | + display: flex; | |
| 277 | + justify-content: center; | |
| 278 | + line-height: 32rpx; | |
| 279 | + height: 32rpx; | |
| 280 | + width: 32rpx; | |
| 281 | + background-color: #F2F2F2; | |
| 282 | + color: #CFCFCF; | |
| 283 | + } | |
| 284 | +} | |
| 185 | 285 | .choose{ |
| 186 | 286 | background: #FFFFFF; |
| 187 | 287 | padding: 16px; |
| ... | ... | @@ -218,15 +318,19 @@ hr{ |
| 218 | 318 | justify-content: space-between ; |
| 219 | 319 | grid-row-gap: 10px; |
| 220 | 320 | margin-bottom: 14px; |
| 221 | - view{ | |
| 321 | + .colour2_view{ | |
| 222 | 322 | border: 1px solid #F2F2F2; |
| 223 | 323 | image{ |
| 224 | - width: 100%; | |
| 225 | - height: 100%; | |
| 324 | + width: 100rpx; | |
| 325 | + height: 60rpx; | |
| 226 | 326 | } |
| 227 | 327 | } |
| 228 | - view:hover{ | |
| 328 | + .colour2_viewed{ | |
| 229 | 329 | border: 1px solid #FF6B4A; |
| 330 | + image{ | |
| 331 | + width: 100rpx; | |
| 332 | + height: 60rpx; | |
| 333 | + } | |
| 230 | 334 | } |
| 231 | 335 | } |
| 232 | 336 | } |
| ... | ... | @@ -306,6 +410,9 @@ hr{ |
| 306 | 410 | color: #999999; |
| 307 | 411 | letter-spacing: -0.19px; |
| 308 | 412 | } |
| 413 | + .D3_list1{ | |
| 414 | + display: flex; | |
| 415 | + } | |
| 309 | 416 | } |
| 310 | 417 | } |
| 311 | 418 | .part{ |
| ... | ... | @@ -323,13 +430,19 @@ hr{ |
| 323 | 430 | height: 100%; |
| 324 | 431 | } |
| 325 | 432 | } |
| 326 | - view:hover{ | |
| 433 | + .size_viewed{ | |
| 327 | 434 | border: 1px solid #FF6B4A; |
| 435 | + height: 72rpx; | |
| 436 | + image{ | |
| 437 | + width: 100%; | |
| 438 | + height: 100%; | |
| 439 | + } | |
| 328 | 440 | } |
| 329 | 441 | } |
| 330 | 442 | } |
| 443 | + | |
| 331 | 444 | .buy{ |
| 332 | - height: 280rpx; | |
| 445 | + height: 300rpx; | |
| 333 | 446 | background: #FFFFFF ; |
| 334 | 447 | margin-top: 10px; |
| 335 | 448 | border-radius: 8px; | ... | ... |
src/pages/detailStandard/detailStandard_sun.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="container"> |
| 3 | 3 | <view class="detail"> |
| 4 | - <view class="detail1"><image v-bind:src="detail.image"></image></view> | |
| 4 | + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | |
| 5 | 5 | <view class="detail2"> |
| 6 | - <view class="detail2_name">{{detail.name}}</view> | |
| 7 | - <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | |
| 8 | - <view class="detail2_price"><span>￥{{detail.price}}</span></view> | |
| 6 | + <view class="detail2_name">{{details.data.p_name}}</view> | |
| 7 | + <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> | |
| 8 | + <view class="detail2_price"> | |
| 9 | + <text>￥{{details.data.p_sale_price*count}}</text> | |
| 10 | + <view class="counter"> | |
| 11 | + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | |
| 12 | + <text>{{count}}</text> | |
| 13 | + <view class="btn" @click="counter(true)">+</view> | |
| 14 | + </view> | |
| 15 | + </view> | |
| 9 | 16 | </view> |
| 10 | 17 | </view> |
| 11 | 18 | <view class="choose"> |
| 12 | 19 | <view class="colour"> |
| 13 | - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | |
| 14 | - <view class="colour_exp">*黑色 BHL192345</view> | |
| 20 | + <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> | |
| 21 | + <view class="colour_exp">*{{colour}}</view> | |
| 22 | + <view> | |
| 15 | 23 | <view class="colour2"> |
| 16 | - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
| 24 | + <view | |
| 25 | + v-for="(items,index) in details.data.skuList" | |
| 26 | + :key="index" | |
| 27 | + @click="viewChoose(index)" | |
| 28 | + class="colour2_view" | |
| 29 | + v-bind:class="{'colour2_viewed': chooseNum == index}" | |
| 30 | + > | |
| 31 | + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | |
| 32 | + </view> | |
| 33 | + </view> | |
| 17 | 34 | </view> |
| 18 | 35 | <hr/> |
| 19 | 36 | </view> |
| 20 | 37 | <view class="colour"> |
| 21 | - <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | |
| 38 | + <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view> | |
| 22 | 39 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
| 40 | + <view> | |
| 23 | 41 | <view class="jp_colour2"> |
| 24 | - <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view> | |
| 42 | + <view | |
| 43 | + v-for="(items,index) in jp_colour" | |
| 44 | + :key="index" | |
| 45 | + class="jp_colour2_view" | |
| 46 | + > | |
| 47 | + <image v-bind:src="items.img"></image> | |
| 48 | + </view> | |
| 49 | + </view> | |
| 25 | 50 | </view> |
| 26 | 51 | <hr/> |
| 27 | 52 | </view> |
| 28 | - <view class="split"> | |
| 29 | - <view class="split1"> | |
| 30 | - <span>折射率</span> | |
| 31 | - <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span> | |
| 32 | - <image src="/static/img/detail/xiala2.png"></image> | |
| 53 | + <view class="colour"> | |
| 54 | + <view class="colour1"> | |
| 55 | + <text>{{details.data.attrList[0].meta_name}}</text> | |
| 56 | + <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> | |
| 57 | + <image src="/static/img/detail/xiala.png"></image> | |
| 33 | 58 | </view> |
| 34 | - <view class="split2"> | |
| 35 | - <view class="split2_number">0-300度</view> | |
| 36 | - <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view> | |
| 59 | + <view> | |
| 60 | + <view class="split"> | |
| 61 | + <view | |
| 62 | + v-for="(items,index) in details.data.attrList[0].attr" | |
| 63 | + :key="index" | |
| 64 | + > | |
| 65 | + <view | |
| 66 | + class="split_colour2" | |
| 67 | + @click="splitChoose(index)" | |
| 68 | + v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" | |
| 69 | + >{{items.name}}</view> | |
| 70 | + </view> | |
| 37 | 71 | </view> |
| 38 | - <view class="split2"> | |
| 39 | - <view class="split2_number">300-1000度</view> | |
| 40 | - <view class="split2_choose"><view class="split2_tui">1.71（推荐）</view> | |
| 41 | - <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view> | |
| 42 | 72 | </view> |
| 43 | 73 | <hr/> |
| 44 | 74 | </view> |
| 45 | 75 | <view class="size"> |
| 46 | 76 | <view class="size1"> |
| 47 | 77 | <view class="size1_1">框架尺寸</view> |
| 48 | - <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> | |
| 78 | + <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> | |
| 49 | 79 | </view> |
| 50 | - <view class="size2"> | |
| 51 | - <view>通用</view> | |
| 52 | - <view>定制</view> | |
| 80 | + <view class="colour"> | |
| 81 | + <view class="colour_exp">*{{colour}}</view> | |
| 53 | 82 | </view> |
| 54 | - <!-- uni-sliper插件 --> | |
| 55 | 83 | <view class="D3_list"> |
| 56 | - <view v-for="(item) in parameter" :key="item.key"> | |
| 57 | - <view><image class="D3_image" v-bind:src = "item.img"></image></view> | |
| 84 | + <view> | |
| 85 | + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | |
| 86 | + <view class="D3_list_jDu"> | |
| 87 | + <view class="D3_list1"> | |
| 88 | + <c-progress class="c-progress" :inner_widthProp="300"/> | |
| 89 | + <text>{{details.data.frame_width}}mm</text> | |
| 90 | + </view> | |
| 91 | + <view>{{parameter[0].standard}}</view> | |
| 92 | + </view> | |
| 93 | + </view> | |
| 94 | + <view> | |
| 95 | + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | |
| 96 | + <view class="D3_list_jDu"> | |
| 97 | + <view class="D3_list1"> | |
| 98 | + <c-progress class="c-progress" :inner_widthProp="190"/> | |
| 99 | + <view>{{details.data.glass_width}}mm</view> | |
| 100 | + </view> | |
| 101 | + <view>{{parameter[1].standard}}</view> | |
| 102 | + </view> | |
| 103 | + </view> | |
| 104 | + <view> | |
| 105 | + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | |
| 58 | 106 | <view class="D3_list_jDu"> |
| 59 | - <c-progress class="c-progress" | |
| 60 | - :percent="item.percent" | |
| 61 | - :show-slider="false" :width="190" | |
| 62 | - :standard="item.standard_l" | |
| 63 | - :stand_width="item.slength" | |
| 64 | - progressColor="#FF6B4A" | |
| 65 | - /> | |
| 66 | - <view>{{item.standard}}</view> | |
| 107 | + <view class="D3_list1"> | |
| 108 | + <c-progress class="c-progress" :inner_widthProp="210"/> | |
| 109 | + <view>{{details.data.glass_height}}mm</view> | |
| 110 | + </view> | |
| 111 | + <view>{{parameter[2].standard}}</view> | |
| 112 | + </view> | |
| 113 | + </view> | |
| 114 | + <view> | |
| 115 | + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | |
| 116 | + <view class="D3_list_jDu"> | |
| 117 | + | |
| 118 | + <view class="D3_list1"> | |
| 119 | + <c-progress class="c-progress" :inner_widthProp="160"/> | |
| 120 | + <view>{{details.data.nose_width}}mm</view> | |
| 121 | + </view> | |
| 122 | + <view>{{parameter[3].standard}}</view> | |
| 123 | + </view> | |
| 124 | + </view> | |
| 125 | + <view> | |
| 126 | + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | |
| 127 | + <view class="D3_list_jDu"> | |
| 128 | + <view class="D3_list1"> | |
| 129 | + <c-progress class="c-progress" :inner_widthProp="260"/> | |
| 130 | + <view>{{details.data.leg_long}}mm</view> | |
| 131 | + </view> | |
| 132 | + <view>{{parameter[4].standard}}</view> | |
| 67 | 133 | </view> |
| 68 | 134 | </view> |
| 69 | 135 | <hr/> |
| ... | ... | @@ -72,11 +138,17 @@ |
| 72 | 138 | <view class="part"> |
| 73 | 139 | <view class="size1"> |
| 74 | 140 | <view class="size1_1">配件</view> |
| 75 | - <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | |
| 141 | + <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | |
| 76 | 142 | </view> |
| 77 | 143 | <view class="colour_exp">*0290</view> |
| 78 | 144 | <view class="part_som"> |
| 79 | - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | |
| 145 | + <view | |
| 146 | + v-for="(part) in part" | |
| 147 | + :key="part.key" | |
| 148 | + v-bind:class="{'size_viewed': part.is_actived}" | |
| 149 | + > | |
| 150 | + <image v-bind:src="part.img"></image> | |
| 151 | + </view> | |
| 80 | 152 | </view> |
| 81 | 153 | </view> |
| 82 | 154 | </view> |
| ... | ... | @@ -85,7 +157,7 @@ |
| 85 | 157 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 86 | 158 | <view class="buy3"> |
| 87 | 159 | <view class="buy3_1">暂时不选</view> |
| 88 | - <view class="buy3_2">立即去选</view> | |
| 160 | + <view class="buy3_2" @click="popArgs">立即去选</view> | |
| 89 | 161 | </view> |
| 90 | 162 | </view> |
| 91 | 163 | <view class="zhanwei"></view> |
| ... | ... | @@ -94,6 +166,7 @@ |
| 94 | 166 | </template> |
| 95 | 167 | <script> |
| 96 | 168 | import CProgress from '../../components/UniSliper/UniSliper' |
| 169 | +import store from '@/store' | |
| 97 | 170 | |
| 98 | 171 | export default { |
| 99 | 172 | components: { |
| ... | ... | @@ -101,56 +174,91 @@ export default { |
| 101 | 174 | }, |
| 102 | 175 | data(){ |
| 103 | 176 | return{ |
| 104 | - detail:{ | |
| 105 | - image:'/static/img/detail/sun_glass.png', | |
| 106 | - name:'商品名称商品名称商品名称商品名称商品名称', | |
| 107 | - price: 180, | |
| 108 | - number: 1, | |
| 109 | - }, | |
| 110 | - //框架颜色 | |
| 111 | - colour:[ | |
| 112 | - {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | |
| 113 | - {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | |
| 114 | - {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | |
| 115 | - {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | |
| 116 | - {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | |
| 117 | - {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | |
| 118 | - {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | |
| 177 | + count: 1, | |
| 178 | + colour: '1.56非球面防蓝光_亚黑色', | |
| 179 | + chooseNum : '', | |
| 180 | + isSplit: '' , | |
| 181 | + parameter:[ | |
| 182 | + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | |
| 183 | + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | |
| 184 | + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | |
| 185 | + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | |
| 186 | + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | |
| 119 | 187 | ], |
| 120 | 188 | //镜片颜色 |
| 121 | - jp:[ | |
| 122 | - {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 123 | - {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 124 | - {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 125 | - {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 126 | - {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 127 | - {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 128 | - {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 129 | - {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | |
| 130 | - {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'} | |
| 131 | - ], | |
| 132 | - //规格参数 | |
| 133 | - parameter:[ | |
| 134 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | |
| 135 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | |
| 136 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | |
| 137 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | |
| 138 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | |
| 189 | + jp_colour:[ | |
| 190 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
| 191 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
| 192 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
| 193 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
| 194 | + {img:'/static/img/detail/Kuang/sun_jp.png'}, | |
| 195 | + {img:'/static/img/detail/Kuang/sun_jp.png'} | |
| 139 | 196 | ], |
| 140 | 197 | //配饰 |
| 141 | 198 | part:[ |
| 142 | - {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | |
| 143 | - {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | |
| 144 | - {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | |
| 145 | - {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | |
| 146 | - {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | |
| 147 | - {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | |
| 148 | - {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | |
| 149 | - {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | |
| 150 | - | |
| 199 | + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | |
| 200 | + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 201 | + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
| 202 | + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 203 | + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | |
| 204 | + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
| 205 | + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | |
| 206 | + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | |
| 151 | 207 | ], |
| 208 | + //折射率 | |
| 209 | + split:[ | |
| 210 | + {number: 1.56}, | |
| 211 | + {number: 1.60}, | |
| 212 | + {number: 1.67}, | |
| 213 | + {number: 1.71}, | |
| 214 | + {number: 1.74} | |
| 215 | + | |
| 216 | + ] | |
| 217 | + } | |
| 218 | + }, | |
| 219 | + | |
| 220 | + computed: { | |
| 221 | + details(){ | |
| 222 | + return this.$store.state.detailStandard_k.list | |
| 223 | + }, | |
| 224 | + }, | |
| 225 | + onLoad:function(){ | |
| 226 | + store.dispatch('detailStandard_k/fetch', { | |
| 227 | + uid: "1", | |
| 228 | + pid: "26", | |
| 229 | + }); | |
| 230 | + console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); | |
| 231 | + console.log("ssssssssssssssssssssssssssss") | |
| 232 | + }, | |
| 233 | + methods: { | |
| 234 | + counter(isadd){ | |
| 235 | + if(isadd){ | |
| 236 | + this.count++ | |
| 237 | + }else{ | |
| 238 | + this.count <= 1? this.disabled = true:this.count-- | |
| 239 | + } | |
| 240 | + }, | |
| 241 | + colourChange(index,e){ | |
| 242 | + this.colour = e ; //颜色选择 | |
| 243 | + // console.log(index,e); | |
| 244 | + | |
| 245 | + }, | |
| 246 | + viewChoose(index){ | |
| 247 | + this.chooseNum = index | |
| 248 | + }, | |
| 249 | + splitChoose(index){ | |
| 250 | + this.isSplit = index | |
| 251 | + }, | |
| 252 | + popArgs(){ | |
| 253 | + uni.navigateTo({ | |
| 254 | + url: '../detailsChoiceArgs/detailsChoiceArgs', | |
| 255 | + success: res => {}, | |
| 256 | + fail: () => {}, | |
| 257 | + complete: () => {} | |
| 258 | + }); | |
| 152 | 259 | } |
| 153 | 260 | } |
| 261 | + | |
| 154 | 262 | } |
| 155 | 263 | </script> |
| 156 | 264 | |
| ... | ... | @@ -166,6 +274,7 @@ hr{ |
| 166 | 274 | height: 1px; |
| 167 | 275 | background: #F2F2F2; |
| 168 | 276 | margin-top: 18px; |
| 277 | + margin-bottom: 10px; | |
| 169 | 278 | } |
| 170 | 279 | .detail{ |
| 171 | 280 | height: 272rpx; |
| ... | ... | @@ -178,7 +287,7 @@ hr{ |
| 178 | 287 | align-items: center; |
| 179 | 288 | } |
| 180 | 289 | .detail1{ |
| 181 | - height: 188rpx; | |
| 290 | + height: 178rpx; | |
| 182 | 291 | width: 188rpx; |
| 183 | 292 | image{ |
| 184 | 293 | width: 100%; |
| ... | ... | @@ -189,7 +298,7 @@ hr{ |
| 189 | 298 | .detail2{ |
| 190 | 299 | width: 68%; |
| 191 | 300 | view{ |
| 192 | - margin-bottom: 8px; | |
| 301 | + margin-bottom: 6px; | |
| 193 | 302 | font-family: PingFangSC-Regular; |
| 194 | 303 | } |
| 195 | 304 | .detail2_name{ |
| ... | ... | @@ -197,6 +306,11 @@ hr{ |
| 197 | 306 | color: #333333; |
| 198 | 307 | letter-spacing: -0.26px; |
| 199 | 308 | line-height: 18px; |
| 309 | + overflow:hidden; | |
| 310 | + text-overflow:ellipsis; | |
| 311 | + display:-webkit-box; | |
| 312 | + -webkit-box-orient:vertical; | |
| 313 | + -webkit-line-clamp:2; | |
| 200 | 314 | } |
| 201 | 315 | .detail2_tui{ |
| 202 | 316 | font-size: 10px; |
| ... | ... | @@ -212,6 +326,24 @@ hr{ |
| 212 | 326 | letter-spacing: -0.26px; |
| 213 | 327 | } |
| 214 | 328 | } |
| 329 | +.counter{ | |
| 330 | + display: flex; | |
| 331 | + flex-direction: row; | |
| 332 | + justify-content: space-between; | |
| 333 | + font-size: 28rpx; | |
| 334 | + color: #333333; | |
| 335 | + width: 122rpx; | |
| 336 | + float: right; | |
| 337 | + .btn{ | |
| 338 | + display: flex; | |
| 339 | + justify-content: center; | |
| 340 | + line-height: 32rpx; | |
| 341 | + height: 32rpx; | |
| 342 | + width: 32rpx; | |
| 343 | + background-color: #F2F2F2; | |
| 344 | + color: #CFCFCF; | |
| 345 | + } | |
| 346 | +} | |
| 215 | 347 | .choose{ |
| 216 | 348 | background: #FFFFFF; |
| 217 | 349 | padding: 16px; |
| ... | ... | @@ -233,6 +365,13 @@ hr{ |
| 233 | 365 | width: 40rpx; |
| 234 | 366 | height: 36rpx; |
| 235 | 367 | } |
| 368 | + .colour1_span2{ | |
| 369 | + font-family: PingFangSC-Regular; | |
| 370 | + font-size: 12px; | |
| 371 | + color: #666666; | |
| 372 | + margin-left: 10px; | |
| 373 | + font-weight: normal | |
| 374 | + } | |
| 236 | 375 | } |
| 237 | 376 | .colour_exp{ |
| 238 | 377 | font-family: PingFangSC-Regular; |
| ... | ... | @@ -248,94 +387,61 @@ hr{ |
| 248 | 387 | justify-content: space-between ; |
| 249 | 388 | grid-row-gap: 10px; |
| 250 | 389 | margin-bottom: 14px; |
| 251 | - view{ | |
| 390 | + .colour2_view{ | |
| 252 | 391 | border: 1px solid #F2F2F2; |
| 253 | 392 | image{ |
| 254 | - width: 100%; | |
| 255 | - height: 100%; | |
| 393 | + width: 100rpx; | |
| 394 | + height: 60rpx; | |
| 256 | 395 | } |
| 257 | 396 | } |
| 258 | - view:hover{ | |
| 397 | + .colour2_viewed{ | |
| 259 | 398 | border: 1px solid #FF6B4A; |
| 399 | + image{ | |
| 400 | + width: 100rpx; | |
| 401 | + height: 60rpx; | |
| 402 | + } | |
| 260 | 403 | } |
| 261 | 404 | } |
| 262 | 405 | } |
| 263 | 406 | .jp_colour2{ |
| 264 | - display: grid; | |
| 265 | - grid-template-columns: repeat(6, 12%); | |
| 266 | - grid-row-gap: 10px; | |
| 267 | - grid-column-gap: 6px; | |
| 268 | - margin-bottom: 14px; | |
| 269 | - view{ | |
| 407 | + display: grid; | |
| 408 | + grid-template-columns: repeat(5, 13%); | |
| 409 | + justify-content: start ; | |
| 410 | + grid-column-gap: 10px; | |
| 411 | + grid-row-gap: 10px; | |
| 412 | + margin-bottom: 14px; | |
| 413 | + .jp_colour2_view{ | |
| 270 | 414 | border: 1px solid #F2F2F2; |
| 271 | - height: 80rpx; | |
| 272 | 415 | image{ |
| 273 | - width: 100%; | |
| 274 | - height: 100%; | |
| 416 | + width: 80rpx; | |
| 417 | + height: 80rpx; | |
| 275 | 418 | } |
| 276 | 419 | } |
| 277 | - view:hover{ | |
| 278 | - border: 1px solid #FF6B4A; | |
| 279 | - } | |
| 280 | -} | |
| 281 | -.split1{ | |
| 282 | - span{ | |
| 283 | - font-family: PingFangSC-Medium; | |
| 284 | - font-size: 16px; | |
| 285 | - color: #333333; | |
| 286 | - letter-spacing: -0.3px; | |
| 287 | - text-align: justify; | |
| 288 | - line-height: 24px; | |
| 289 | - font-weight: bold; | |
| 290 | - margin-right:8px; | |
| 291 | - } | |
| 292 | - .split1_span{ | |
| 293 | - font-family: PingFangSC-Regular; | |
| 294 | - font-size: 10px; | |
| 295 | - color: #999999; | |
| 296 | - letter-spacing: -0.3px; | |
| 297 | - font-weight:normal; | |
| 298 | - } | |
| 299 | - image{ | |
| 300 | - float: right; | |
| 301 | - width: 40rpx; | |
| 302 | - height: 36rpx; | |
| 303 | - } | |
| 304 | 420 | } |
| 305 | -.split2{ | |
| 306 | - margin-bottom: 12px; | |
| 307 | - .split2_number{ | |
| 421 | +.split{ | |
| 422 | + display: grid; | |
| 423 | + grid-template-columns: repeat(2, 45%); | |
| 424 | + grid-column-gap: 10px; | |
| 425 | + grid-row-gap: 10px; | |
| 426 | + margin-top: 10px ; | |
| 427 | + .split_colour2{ | |
| 428 | + display: flex; | |
| 429 | + justify-content: center; | |
| 430 | + align-items: center; | |
| 431 | + width: 300rpx; | |
| 432 | + height: 60rpx; | |
| 433 | + background: #F2F2F2; | |
| 434 | + border-radius: 2px; | |
| 308 | 435 | font-family: PingFangSC-Regular; |
| 309 | - font-size: 10px; | |
| 310 | - color: #999999; | |
| 311 | - letter-spacing: -0.19px; | |
| 312 | - margin-bottom: 6px; | |
| 436 | + font-size: 12px; | |
| 437 | + color: #666666; | |
| 438 | + letter-spacing: 0; | |
| 439 | + text-align: center; | |
| 313 | 440 | } |
| 314 | - .split2_choose{ | |
| 315 | - display: flex; | |
| 316 | - view{ | |
| 317 | - display: flex; | |
| 318 | - justify-content: center; | |
| 319 | - align-items: center; | |
| 320 | - font-family: PingFangSC-Regular; | |
| 321 | - font-size: 12px; | |
| 322 | - color: #666666; | |
| 323 | - background: #F2F2F2; | |
| 324 | - width: 100rpx; | |
| 325 | - height: 60rpx; | |
| 326 | - border-radius: 2px; | |
| 327 | - margin-right: 10px; | |
| 328 | - } | |
| 329 | - view:hover{ | |
| 330 | - color: #FF6B4A; | |
| 331 | - background: rgba(255,107,74,0.15); | |
| 332 | - } | |
| 333 | - .split2_tui{ | |
| 334 | - width: 186rpx; | |
| 335 | - height: 60rpx; | |
| 336 | - } | |
| 441 | + .split_colour2_actived{ | |
| 442 | + background: rgba(255,107,74,0.15); | |
| 443 | + color: #FF6B4A; | |
| 337 | 444 | } |
| 338 | - | |
| 339 | 445 | } |
| 340 | 446 | .size,.part{ |
| 341 | 447 | margin-top:14px; |
| ... | ... | @@ -413,6 +519,9 @@ hr{ |
| 413 | 519 | color: #999999; |
| 414 | 520 | letter-spacing: -0.19px; |
| 415 | 521 | } |
| 522 | + .D3_list1{ | |
| 523 | + display: flex; | |
| 524 | + } | |
| 416 | 525 | } |
| 417 | 526 | } |
| 418 | 527 | .part{ |
| ... | ... | @@ -430,13 +539,19 @@ hr{ |
| 430 | 539 | height: 100%; |
| 431 | 540 | } |
| 432 | 541 | } |
| 433 | - view:hover{ | |
| 542 | + .size_viewed{ | |
| 434 | 543 | border: 1px solid #FF6B4A; |
| 544 | + height: 72rpx; | |
| 545 | + image{ | |
| 546 | + width: 100%; | |
| 547 | + height: 100%; | |
| 548 | + } | |
| 435 | 549 | } |
| 436 | 550 | } |
| 437 | 551 | } |
| 552 | + | |
| 438 | 553 | .buy{ |
| 439 | - height: 280rpx; | |
| 554 | + height: 300rpx; | |
| 440 | 555 | background: #FFFFFF ; |
| 441 | 556 | margin-top: 10px; |
| 442 | 557 | border-radius: 8px; |
| ... | ... | @@ -502,5 +617,4 @@ hr{ |
| 502 | 617 | font-size: 16px; |
| 503 | 618 | } |
| 504 | 619 | } |
| 505 | - | |
| 506 | 620 | </style> |
| 507 | 621 | \ No newline at end of file | ... | ... |
src/pages/frameDetail/frameDetail.vue
| ... | ... | @@ -1,617 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <view class="container"> | |
| 3 | - <view class="D1"> | |
| 4 | - <!-- 轮播图 --> | |
| 5 | - <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > | |
| 6 | - <swiper-item v-for="(item) in infos" :key="item.goods_id"> | |
| 7 | - <image :src="item.img" mode="scaleToFill"></image> | |
| 8 | - </swiper-item> | |
| 9 | - </swiper> | |
| 10 | - <view class="D1_price">￥{{price}}</view> | |
| 11 | - <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> | |
| 12 | - <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> | |
| 13 | - </view> | |
| 14 | - <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4"> | |
| 15 | - <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | |
| 16 | - <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> | |
| 17 | - <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
| 18 | - </view> | |
| 19 | - <view class="D2" v-if="updateGoodType == 1"> | |
| 20 | - <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | |
| 21 | - <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> | |
| 22 | - <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
| 23 | - </view> | |
| 24 | - <view class="D2" v-if="updateGoodType == 3"> | |
| 25 | - <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | |
| 26 | - <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> | |
| 27 | - <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | |
| 28 | - </view> | |
| 29 | - | |
| 30 | - <view class="D3"> | |
| 31 | - <view class="screenBar"> | |
| 32 | - <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > | |
| 33 | - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | |
| 34 | - </view> | |
| 35 | - </view> | |
| 36 | - <view class="screen-item " v-if="current ===0"> | |
| 37 | - <view class="D3_list"> | |
| 38 | - <view v-for="(item) in parameter" :key="item.key"> | |
| 39 | - <image class="D3_image" v-bind:src = "item.img"></image> | |
| 40 | - <span>{{item.standard}}</span> | |
| 41 | - <span>{{item.slength}}</span> | |
| 42 | - </view> | |
| 43 | - </view> | |
| 44 | - </view > | |
| 45 | - <view class="screen-item " v-if="current ===1"> | |
| 46 | - <view class="D3_list"> | |
| 47 | - <view>主体</view> | |
| 48 | - <view>商品产地：韩国</view> | |
| 49 | - <view>包装清单：彩色隐形 * 1</view> | |
| 50 | - </view> | |
| 51 | - </view > | |
| 52 | - <view class="screen-item " v-if="current ===2"> | |
| 53 | - <view class="customerService"> | |
| 54 | - <view class="serviceItem" > | |
| 55 | - <view class="title"> | |
| 56 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
| 57 | - <text class="titleText">卖家服务</text> | |
| 58 | - </view> | |
| 59 | - <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> | |
| 60 | - </view> | |
| 61 | - <view class="serviceItem" > | |
| 62 | - <view class="title"> | |
| 63 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
| 64 | - <text class="titleText">平台承诺</text> | |
| 65 | - </view> | |
| 66 | - <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> | |
| 67 | - </view> | |
| 68 | - <view class="serviceItem"> | |
| 69 | - <view class="title"> | |
| 70 | - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | |
| 71 | - <text class="titleText">正品保证</text> | |
| 72 | - </view> | |
| 73 | - <view class="itemContent">向您保证所售商品均为正品行货</view> | |
| 74 | - </view> | |
| 75 | - <view class="serviceItem2"> | |
| 76 | - <view class="title"> | |
| 77 | - <text class="titleText">权利申明</text> | |
| 78 | - </view> | |
| 79 | - <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> | |
| 80 | - </view> | |
| 81 | - <view class="serviceItem2"> | |
| 82 | - <view class="title"> | |
| 83 | - <text class="titleText">价格保证</text> | |
| 84 | - </view> | |
| 85 | - <view class="itemContent"> | |
| 86 | - <view class="itemContent-child"> | |
| 87 | - <text class="contentTitle">平台价:</text> | |
| 88 | - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
| 89 | - </view> | |
| 90 | - <view class="itemContent-child"> | |
| 91 | - <text class="contentTitle">划线价:</text> | |
| 92 | - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
| 93 | - </view> | |
| 94 | - <view class="itemContent-child"> | |
| 95 | - <text class="contentTitle">平折扣:</text> | |
| 96 | - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
| 97 | - </view> | |
| 98 | - <view class="itemContent-child"> | |
| 99 | - <text class="contentTitle">异常问题:</text> | |
| 100 | - <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | |
| 101 | - </view> | |
| 102 | - | |
| 103 | - </view> | |
| 104 | - </view> | |
| 105 | - </view> | |
| 106 | - </view > | |
| 107 | - </view> | |
| 108 | - <view class="D4" v-if="current !==2"> | |
| 109 | - <view class="D4_esvalue"> | |
| 110 | - <view>{{esvalue}}</view> | |
| 111 | - <view class="D4_2"> | |
| 112 | - <view class="star" v-for="o in starCount" :key="o"> | |
| 113 | - <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> | |
| 114 | - </view> | |
| 115 | - </view> | |
| 116 | - </view> | |
| 117 | - <view class="D4_list"> | |
| 118 | - <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> | |
| 119 | - </view> | |
| 120 | - </view> | |
| 121 | - <view class="D5" v-if="current !==2"> | |
| 122 | - <view class="D5_fixed1"> | |
| 123 | - <image src="/static/img/detail/hr.png"></image> | |
| 124 | - <view>商品详细</view> | |
| 125 | - <image src="/static/img/detail/hr.png"></image> | |
| 126 | - </view> | |
| 127 | - <view class="D5_all"> | |
| 128 | - <image v-bind:src="imgAll"></image> | |
| 129 | - </view> | |
| 130 | - <view class="D5_photoes"> | |
| 131 | - <view class="D5_photoes1"> | |
| 132 | - <view v-for="(photoes) in photoes" :key="photoes.value"> | |
| 133 | - <image v-bind:src = "photoes.img"></image> | |
| 134 | - <view>{{photoes.value}}</view> | |
| 135 | - </view> | |
| 136 | - </view> | |
| 137 | - <view class="D5_logo1">帕森防蓝光镜片</view> | |
| 138 | - <view class="D5_logo2">健康护眼，我们是认真的！</view> | |
| 139 | - <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> | |
| 140 | - </view> | |
| 141 | - </view> | |
| 142 | - <view class="D6" v-if="current !==2"> | |
| 143 | - <view class="D6_v1">CHARM DETAIL</view> | |
| 144 | - <view class="D6_v2">细节展示</view> | |
| 145 | - <view ><image v-bind:src="imgDetail"></image></view> | |
| 146 | - <view>........................................................................</view> | |
| 147 | - <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> | |
| 148 | - </view> | |
| 149 | - | |
| 150 | - <!-- 底部菜单 --> | |
| 151 | - <view class="botton"> | |
| 152 | - <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> | |
| 153 | - <view class="botton_2"> | |
| 154 | - <view class="botton_input">加入购物车</view> | |
| 155 | - <view class="botton_now" @click="goPerchase">立即购买</view> | |
| 156 | - </view> | |
| 157 | - </view> | |
| 158 | - </view> | |
| 159 | -</template> | |
| 160 | - | |
| 161 | -<script> | |
| 162 | -import store from '@/store'; | |
| 163 | -export default { | |
| 164 | - data(){ | |
| 165 | - return { | |
| 166 | - name:'商品名称', | |
| 167 | - goodType:2, | |
| 168 | - price: 120, | |
| 169 | - number: 391, | |
| 170 | - screenItems: [ | |
| 171 | - {current:0,text:'商品保障'}, | |
| 172 | - {current:1,text:'规格参数'}, | |
| 173 | - {current:2,text:'售后保障'}, | |
| 174 | - ], | |
| 175 | - current: 0, | |
| 176 | - starCount:5, | |
| 177 | - infos: [ | |
| 178 | - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 179 | - { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 180 | - { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 181 | - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 182 | - ], | |
| 183 | - parameter:[ | |
| 184 | - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, | |
| 185 | - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, | |
| 186 | - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, | |
| 187 | - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, | |
| 188 | - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, | |
| 189 | - {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} | |
| 190 | - ], | |
| 191 | - assess:[ | |
| 192 | - {key: 0, Iassess: '价格实惠'}, | |
| 193 | - {key: 1, Iassess: '美观大方'}, | |
| 194 | - {key: 2, Iassess: '易搭配'} | |
| 195 | - ], | |
| 196 | - esvalue:'宝贝好评率 100%', | |
| 197 | - introduction:{ | |
| 198 | - material:'钛合金', | |
| 199 | - func:'抗疲劳/防辐射', | |
| 200 | - rate: 1.6 | |
| 201 | - }, | |
| 202 | - imgAll:'/static/img/detail/d8.png' , | |
| 203 | - photoes:[ | |
| 204 | - {value:'日常办公', img:'/static/img/detail/d9.png'}, | |
| 205 | - {value:'上网', img:'/static/img/detail/d10.png'}, | |
| 206 | - {value:'追剧', img:'/static/img/detail/d11.png'}, | |
| 207 | - {value:'玩游戏', img:'/static/img/detail/d12.png'}, | |
| 208 | - ], | |
| 209 | - imgDetail:'/static/img/detail/d13.png', | |
| 210 | - imgShop:{ | |
| 211 | - img:'/static/tab-cart.png', | |
| 212 | - IsShown: false | |
| 213 | - } | |
| 214 | - } | |
| 215 | - }, | |
| 216 | - onLoad:function(option){ | |
| 217 | - this.goodType = option.goodType | |
| 218 | - // console.log(this.updateGoodType) | |
| 219 | - store.dispatch('read/fetch'); | |
| 220 | - }, | |
| 221 | - computed:{ | |
| 222 | - updateGoodType(){ | |
| 223 | - return this.goodType | |
| 224 | - }, | |
| 225 | - goodInfo() { | |
| 226 | - console.log(this.$store.state.read.goodInfo) | |
| 227 | - return this.$store.state.read.goodInfo; | |
| 228 | - }, | |
| 229 | - }, | |
| 230 | - methods:{ | |
| 231 | - goPerchase(){ | |
| 232 | - switch(this.updateGoodType){ | |
| 233 | - case '1': | |
| 234 | - uni.navigateTo({ | |
| 235 | - url: '../detailsChoiceArgs/detailsChoiceArgs', | |
| 236 | - success: res => {}, | |
| 237 | - fail: () => {}, | |
| 238 | - complete: () => {} | |
| 239 | - }); | |
| 240 | - break; | |
| 241 | - case '2': | |
| 242 | - uni.navigateTo({ | |
| 243 | - url: `../detailStandard/detailStandard_k`, | |
| 244 | - success: res => {}, | |
| 245 | - fail: () => {}, | |
| 246 | - complete: () => {} | |
| 247 | - }); | |
| 248 | - break; | |
| 249 | - case '3': | |
| 250 | - uni.navigateTo({ | |
| 251 | - url: `../purchaseLenses/purchaseLenses`, | |
| 252 | - success: res => {}, | |
| 253 | - fail: () => {}, | |
| 254 | - complete: () => {} | |
| 255 | - }); | |
| 256 | - break; | |
| 257 | - case '4': | |
| 258 | - uni.navigateTo({ | |
| 259 | - url: `../detailStandard/detailStandard_sun`, | |
| 260 | - success: res => {}, | |
| 261 | - fail: () => {}, | |
| 262 | - complete: () => {} | |
| 263 | - }); | |
| 264 | - break; | |
| 265 | - default : | |
| 266 | - break | |
| 267 | - } | |
| 268 | - }, | |
| 269 | - tabChange(e) { | |
| 270 | - if (this.current !== e) { | |
| 271 | - this.current = e; | |
| 272 | - } | |
| 273 | - } | |
| 274 | - } | |
| 275 | -} | |
| 276 | -</script> | |
| 277 | -<style lang='scss'> | |
| 278 | - .container{ | |
| 279 | - background-color:#f8f8f8 ; | |
| 280 | - } | |
| 281 | - .D1,.D2,.D3,.D4,.D6{ | |
| 282 | - background: #ffffff; | |
| 283 | - margin-bottom: 10px; | |
| 284 | - padding:8px 20px 8px 20px; | |
| 285 | - box-sizing: border-box; | |
| 286 | - .swiperImage { | |
| 287 | - width: 684rpx; | |
| 288 | - height: 512rpx; | |
| 289 | - image { | |
| 290 | - width: 100%; | |
| 291 | - height: 100%; | |
| 292 | - border-radius: 16rpx; | |
| 293 | - } | |
| 294 | - } | |
| 295 | - } | |
| 296 | - .D5{ | |
| 297 | - background: #ffffff; | |
| 298 | - padding:8px 20px 8px 20px; | |
| 299 | - box-sizing: border-box; | |
| 300 | - } | |
| 301 | - .swiperImage{ | |
| 302 | - width: 100%; | |
| 303 | - height: 560rpx; | |
| 304 | - .swiper-item{ | |
| 305 | - width: 100%; | |
| 306 | - image{ | |
| 307 | - width: 100%; | |
| 308 | - } | |
| 309 | - } | |
| 310 | - } | |
| 311 | - .D1{ | |
| 312 | - .D1_price{ | |
| 313 | - color: #EB5D3B; | |
| 314 | - font-size: 18px; | |
| 315 | - margin-top: 5px; | |
| 316 | - font-family: 'PingFangSC-Semibold'; | |
| 317 | - } | |
| 318 | - .D1_name{ | |
| 319 | - font-size: 16px; | |
| 320 | - font-family: 'PingFangSC-Semibold'; | |
| 321 | - margin-top: 5px; | |
| 322 | - display: flex; | |
| 323 | - justify-content: space-between; | |
| 324 | - .D1_name1{ | |
| 325 | - font-weight: bold; | |
| 326 | - font-size: 16px; | |
| 327 | - color: #333333; | |
| 328 | - } | |
| 329 | - .D1_number{ | |
| 330 | - color: #999999 ; | |
| 331 | - font-size: 14px; | |
| 332 | - font-family: 'PingFangSC-Regular'; | |
| 333 | - } | |
| 334 | - } | |
| 335 | - .D1_spans{ | |
| 336 | - font-size: 10px; | |
| 337 | - color:#999999; | |
| 338 | - margin-top: 5px; | |
| 339 | - span{ | |
| 340 | - height: 14px; | |
| 341 | - margin-right: 10px; | |
| 342 | - } | |
| 343 | - } | |
| 344 | - | |
| 345 | - } | |
| 346 | - .D2{ | |
| 347 | - font-size: 14px; | |
| 348 | - font-family: 'PingFangSC-Regular'; | |
| 349 | - view{ | |
| 350 | - height: 24px; | |
| 351 | - } | |
| 352 | - .D2_span1{ | |
| 353 | - color: #999999; | |
| 354 | - } | |
| 355 | - .D2_span2{ | |
| 356 | - color: #333333; | |
| 357 | - } | |
| 358 | - } | |
| 359 | - .D3{ | |
| 360 | - .screenBar{ | |
| 361 | - width: 670rpx; | |
| 362 | - margin-top: 20rpx; | |
| 363 | - margin-bottom: 24rpx; | |
| 364 | - display: flex; | |
| 365 | - flex-direction: row; | |
| 366 | - justify-content: space-between; | |
| 367 | - align-items: center; | |
| 368 | - font-size: 14px; | |
| 369 | - color: #333333; | |
| 370 | - transition:all 0.2s; | |
| 371 | - } | |
| 372 | - .screen-item{ | |
| 373 | - font-size: 32rpx; | |
| 374 | - color: #333333; | |
| 375 | - display: flex; | |
| 376 | - transition:all 0.2s; | |
| 377 | - .D3_list{ | |
| 378 | - margin-bottom: 4px; | |
| 379 | - } | |
| 380 | - .D3_list view{ | |
| 381 | - display: flex; | |
| 382 | - align-content: center; | |
| 383 | - font-size: 14px; | |
| 384 | - color: #333333; | |
| 385 | - } | |
| 386 | - .D3_list image{ | |
| 387 | - width: 50px; | |
| 388 | - height: 25px; | |
| 389 | - margin-right: 6px; | |
| 390 | - } | |
| 391 | - .D3_list span{ | |
| 392 | - margin-left: 6px; | |
| 393 | - margin-right: 5px; | |
| 394 | - font-family: 'PingFangSC-Regular'; | |
| 395 | - } | |
| 396 | - } | |
| 397 | - .active{ | |
| 398 | - border-bottom: 4rpx solid #FF6B4A; | |
| 399 | - } | |
| 400 | - .customerService{ | |
| 401 | - margin-bottom: 90rpx; | |
| 402 | - .serviceItem{ | |
| 403 | - margin-bottom: 32rpx; | |
| 404 | - .title{ | |
| 405 | - display: flex;flex-direction: row; | |
| 406 | - align-items: center; | |
| 407 | - .titleText{ | |
| 408 | - font-size: 14px; | |
| 409 | - color: #333333; | |
| 410 | - margin-bottom: 12rpx; | |
| 411 | - } | |
| 412 | - } | |
| 413 | - .itemContent{ | |
| 414 | - font-size: 14px; | |
| 415 | - color: #999999; | |
| 416 | - margin-left: 18rpx; | |
| 417 | - } | |
| 418 | - } | |
| 419 | - .serviceItem2{ | |
| 420 | - margin-left: 18rpx; | |
| 421 | - margin-bottom: 32rpx; | |
| 422 | - .titleText{ | |
| 423 | - font-size: 14px; | |
| 424 | - color: #FF6B4A; | |
| 425 | - } | |
| 426 | - .itemContent{ | |
| 427 | - font-size: 14px; | |
| 428 | - color: #999999; | |
| 429 | - .itemContent-child{ | |
| 430 | - margin-bottom: 40rpx; | |
| 431 | - .contentTitle{ | |
| 432 | - border-bottom: 1px solid #FF6B4A; | |
| 433 | - } | |
| 434 | - } | |
| 435 | - } | |
| 436 | - } | |
| 437 | - } | |
| 438 | - } | |
| 439 | - .D4{ | |
| 440 | - .D4_esvalue{ | |
| 441 | - font-size: 14px; | |
| 442 | - color: #333333; | |
| 443 | - display: flex; | |
| 444 | - justify-content: space-between; | |
| 445 | - margin-bottom: 10px; | |
| 446 | - .D4_2{ | |
| 447 | - width: 90px; | |
| 448 | - display: flex; | |
| 449 | - align-items: center; | |
| 450 | - justify-content: space-between; | |
| 451 | - } | |
| 452 | - } | |
| 453 | - .D4_esvalue view{ | |
| 454 | - font-size: 14px; | |
| 455 | - color: #333333; | |
| 456 | - font-weight: bold; | |
| 457 | - } | |
| 458 | - .D4_list view{ | |
| 459 | - display: inline-block; | |
| 460 | - font-size: 12px; | |
| 461 | - text-align: center; | |
| 462 | - margin-right: 12px; | |
| 463 | - width: 90px; | |
| 464 | - height: 24px; | |
| 465 | - line-height: 24px; | |
| 466 | - background: #F2F2F2; | |
| 467 | - color: #666666 ; | |
| 468 | - } | |
| 469 | - } | |
| 470 | - .D5{ | |
| 471 | - .D5_fixed1{ | |
| 472 | - display: flex; | |
| 473 | - justify-content: space-between; | |
| 474 | - align-content: center; | |
| 475 | - margin-bottom: 12px; | |
| 476 | - view{ | |
| 477 | - font-size: 14px; | |
| 478 | - color: #333333; | |
| 479 | - font-weight: bold; | |
| 480 | - font-family: 'PingFangSC-Medium'; | |
| 481 | - line-height: 24px; | |
| 482 | - } | |
| 483 | - image{ | |
| 484 | - width: 240rpx; | |
| 485 | - height: 3px; | |
| 486 | - margin-top: 10px; | |
| 487 | - } | |
| 488 | - } | |
| 489 | - .D5_all { | |
| 490 | - width: 100%; | |
| 491 | - height: 380px; | |
| 492 | - margin-bottom: 30px; | |
| 493 | - font-family: 'PingFangSC-Regular'; | |
| 494 | - border: #999999 solid 1.5px; | |
| 495 | - image{ | |
| 496 | - width: 100%; | |
| 497 | - height: 380px; | |
| 498 | - }} | |
| 499 | - .D5_photoes1{ | |
| 500 | - display: grid; | |
| 501 | - grid-template-columns: 48% 48%; | |
| 502 | - grid-row-gap: 10px; | |
| 503 | - grid-column-gap: 4%; | |
| 504 | - image{ | |
| 505 | - width: 100%; | |
| 506 | - height: 70px; | |
| 507 | - } | |
| 508 | - view{ | |
| 509 | - width: 100%; | |
| 510 | - font-size: 14px; | |
| 511 | - text-align: center; | |
| 512 | - background: #949494; | |
| 513 | - font-family: 'PingFangSC-Regular'; | |
| 514 | - color: #ffffff; | |
| 515 | - view{ | |
| 516 | - height: 24px; | |
| 517 | - line-height: 24px; | |
| 518 | - } | |
| 519 | - } | |
| 520 | - } | |
| 521 | - .D5_logo1,.D5_logo2{ | |
| 522 | - text-align: center; | |
| 523 | - } | |
| 524 | - .D5_logo1{ | |
| 525 | - margin-top: 40px; | |
| 526 | - font-size: 24px; | |
| 527 | - font-weight: bold; | |
| 528 | - font-family: 'PingFangSC-Semibold'; | |
| 529 | - } | |
| 530 | - .D5_logo2{ | |
| 531 | - font-size: 12px; | |
| 532 | - } | |
| 533 | - .D5_logo3{ | |
| 534 | - width: 100%; | |
| 535 | - text-align: center; | |
| 536 | - image{ | |
| 537 | - width: 50px; | |
| 538 | - height: 24px; | |
| 539 | - } | |
| 540 | - } | |
| 541 | - } | |
| 542 | - .D6{ | |
| 543 | - width: 100%; | |
| 544 | - height: 430px; | |
| 545 | - background: #F9F6ED; | |
| 546 | - margin-bottom: 74px; | |
| 547 | - view{ | |
| 548 | - text-align: center; | |
| 549 | - } | |
| 550 | - .D6_v1{ | |
| 551 | - font-weight: bold; | |
| 552 | - } | |
| 553 | - .D6_v2{ | |
| 554 | - font-size: 14px; | |
| 555 | - margin-bottom: 30px; | |
| 556 | - } | |
| 557 | - .D6_v5{ | |
| 558 | - .D6_v5_s1{ | |
| 559 | - font-weight: bold; | |
| 560 | - } | |
| 561 | - .D6_v5_s2{ | |
| 562 | - font-size: 14px; | |
| 563 | - } | |
| 564 | - } | |
| 565 | - } | |
| 566 | - .botton{ | |
| 567 | - position: fixed; | |
| 568 | - bottom: 0; | |
| 569 | - height: 74px; | |
| 570 | - width: 100%; | |
| 571 | - background: #FFFFFF; | |
| 572 | - padding: 20px 20px 8px 20px; | |
| 573 | - font-family: 'PingFangSC-Regular'; | |
| 574 | - box-sizing: border-box; | |
| 575 | - display: flex; | |
| 576 | - justify-content: space-between; | |
| 577 | - align-content: center; | |
| 578 | - .botton_1{ | |
| 579 | - width: 20%; | |
| 580 | - height: 100%; | |
| 581 | - text-align: center; | |
| 582 | - color: #989898; | |
| 583 | - } | |
| 584 | - image{ | |
| 585 | - width: 60%; | |
| 586 | - height: 30px; | |
| 587 | - } | |
| 588 | - .botton_image{ | |
| 589 | - font-size: 12px; | |
| 590 | - text-align: center; | |
| 591 | - } | |
| 592 | - .botton_2{ | |
| 593 | - width: 74%; | |
| 594 | - height: 86%; | |
| 595 | - display: grid; | |
| 596 | - grid-template-columns: 50% 50%; | |
| 597 | - } | |
| 598 | - .botton_input{ | |
| 599 | - display: inline-flex; | |
| 600 | - align-items: center; | |
| 601 | - justify-content: space-around; | |
| 602 | - background: #FFF0EC; | |
| 603 | - font-size: 16px; | |
| 604 | - color: #FF6B4A; | |
| 605 | - border-radius: 20px 0 0 20px; | |
| 606 | - } | |
| 607 | - .botton_now{ | |
| 608 | - display: inline-flex; | |
| 609 | - align-items: center; | |
| 610 | - justify-content: space-around; | |
| 611 | - background: #FF6B4A; | |
| 612 | - font-size: 16px; | |
| 613 | - color: #FFFFFF; | |
| 614 | - border-radius:0 20px 20px 0; | |
| 615 | - } | |
| 616 | - } | |
| 617 | -</style> | |
| 618 | 0 | \ No newline at end of file |
src/store/modules/detailStandard_k.js
| ... | ... | @@ -2,7 +2,7 @@ import urlAlias from '../url'; |
| 2 | 2 | import request from '../request'; |
| 3 | 3 | |
| 4 | 4 | const { |
| 5 | - detailStandardList | |
| 5 | + detailStandardUrl | |
| 6 | 6 | } = urlAlias |
| 7 | 7 | |
| 8 | 8 | const state = { |
| ... | ... | @@ -10,29 +10,28 @@ const state = { |
| 10 | 10 | }; |
| 11 | 11 | |
| 12 | 12 | const mutations = { |
| 13 | - INIT: (state, detailStandardList) => { | |
| 14 | - state.detailStandardList = detailStandardList; | |
| 13 | + INIT: (state, data) => { | |
| 14 | + state.list = data; | |
| 15 | 15 | }, |
| 16 | 16 | }; |
| 17 | 17 | |
| 18 | 18 | const actions = { |
| 19 | - getList({ commit }, param){ | |
| 19 | + fetch({ commit }, param) { | |
| 20 | 20 | request({ |
| 21 | - detailStandardList, | |
| 22 | - success: (res) => { | |
| 23 | - | |
| 24 | - commit('INIT', res.data.data) | |
| 25 | - console,log('success') | |
| 26 | - }, | |
| 27 | - fail: (res) => { | |
| 28 | - console.log("detail status === > ", res); | |
| 29 | - }, | |
| 30 | - complete: (res) => { | |
| 31 | - console.log("detail compete status === > ", res); | |
| 32 | - }, | |
| 33 | - }) | |
| 21 | + url: detailStandardUrl, | |
| 22 | + data: param, | |
| 23 | + success: (res) => { | |
| 24 | + commit('INIT', res.data); | |
| 25 | + }, | |
| 26 | + fail: (res) => { | |
| 27 | + console.log(" detail fail status === > ", res); | |
| 28 | + }, | |
| 29 | + complete: (res) => { | |
| 30 | + console.log(" detail complete status === > ", res); | |
| 31 | + }, | |
| 32 | + }) | |
| 34 | 33 | } |
| 35 | -} | |
| 34 | + } | |
| 36 | 35 | |
| 37 | 36 | export default { |
| 38 | 37 | namespaced: true, | ... | ... |
src/store/modules/myOrder.js
src/store/modules/test.js
src/store/url.js