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 | <template> | 1 | <template> |
| 2 | <div class="c-progress"> | 2 | <div class="c-progress"> |
| 3 | <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> | 3 | <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> |
| 4 | <div class="c-progress-inner" :style="setProgressStyle"></div> | 4 | <div class="c-progress-inner" |
| 5 | <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> | 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 | </div> | 8 | </div> |
| 7 | <span v-if="showPerText">{{stand_width}}mm</span> | 9 | <span v-if="showPerText">{{content}}mm</span> |
| 8 | </div> | 10 | </div> |
| 9 | </template> | 11 | </template> |
| 10 | 12 | ||
| 11 | <script> | 13 | <script> |
| 12 | // 使用了element的颜色 | 14 | // 使用了element的颜色 |
| 13 | const colorTable = { | 15 | const colorTable = { |
| 14 | success: '#13ce66', | 16 | success: '#13ce66', |
| 15 | fail: '#ff4949', | 17 | fail: '#ff4949', |
| 16 | warning: '#e6a23c', | 18 | warning: '#e6a23c', |
| 17 | default: '#409EFF' | 19 | default: '#409EFF' |
| 18 | } | 20 | } |
| 19 | export default { | 21 | export default { |
| 20 | name: 'CProgress', | 22 | name: 'CProgress', |
| 21 | props: { | 23 | props: { |
| 22 | percent: { | 24 | //inner的长度 |
| 23 | type: Number, | 25 | inner_widthProp: Number, |
| 24 | default: 60 | 26 | //调用接口的值 |
| 25 | }, | 27 | contentProp: String |
| 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 | } | ||
| 67 | }, | 28 | }, |
| 68 | data () { | 29 | data () { |
| 69 | return { | 30 | return { |
| 70 | sliderLeft: 0, // 滑块相对父元素发x坐标 | 31 | inner_width: this.inner_widthProp, |
| 71 | progressWidth: 0, // 进度条当前的的宽度 | 32 | content: this.contentProp |
| 72 | tempPercent: 0, | ||
| 73 | } | 33 | } |
| 74 | }, | 34 | }, |
| 75 | computed: { | 35 | computed: { |
| 76 | // 设置进度条的背景样式 | 36 | // 设置进度条的背景样式 |
| 77 | setProgressBgStyle () { | 37 | setProgressBgStyle () { |
| 78 | return { | 38 | return { |
| 79 | // 加上滑块的宽度 | 39 | // 加上滑块的宽度 |
| 80 | width: `${this.width + this.sliderWidth}px` | 40 | width: `${this.width + this.sliderWidth}px` |
| 81 | } | 41 | } |
| 82 | }, | 42 | }, |
| 83 | // 设置进度条的样式 | 43 | // 设置进度条的样式 |
| 84 | setProgressStyle () { | 44 | setProgressStyle () { |
| 85 | const color = colorTable[this.type] || this.progressColor | 45 | const color = colorTable[this.type] || this.progressColor |
| 86 | return { | 46 | return { |
| 87 | width: `${this.progressWidth}px`, | 47 | width: `${this.progressWidth}px`, |
| 88 | background: color | 48 | background: color |
| 89 | } | 49 | } |
| 90 | }, | 50 | }, |
| 91 | // 设置滑块的样式 | 51 | // 设置滑块的样式 |
| 92 | setSliderStyle () { | 52 | setSliderStyle () { |
| 93 | const color = colorTable[this.type] || this.progressColor | 53 | const color = colorTable[this.type] || this.progressColor |
| 94 | return { | 54 | return { |
| 95 | border: `1px solid ${color}`, | 55 | border: `1px solid ${color}`, |
| 96 | width: `${this.sliderWidth}px`, | 56 | width: `${this.sliderWidth}px`, |
| 97 | height: `${this.sliderWidth}px`, | 57 | height: `${this.sliderWidth}px`, |
| 98 | left: `${this.sliderLeft}px` | 58 | left: `${this.sliderLeft}px` |
| 99 | } | 59 | } |
| 100 | } | 60 | } |
| 101 | }, | 61 | }, |
| 102 | mounted () { | 62 | mounted () { |
| 103 | this.sliderLeft = this.width / 100 * this.percent | 63 | this.sliderLeft = this.width / 100 * this.percent |
| 104 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 | 64 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 |
| 105 | this.tempPercent = this.percent | 65 | this.tempPercent = this.percent |
| 106 | this.addListener() | 66 | // this.addListener() |
| 107 | }, | 67 | }, |
| 108 | methods: { | 68 | // methods: { |
| 109 | addListener () { | 69 | // addListener () { |
| 110 | const slider = this.$refs.slider | 70 | // const slider = this.$refs.slider |
| 111 | const progress = this.$refs.progress | 71 | // const progress = this.$refs.progress |
| 112 | let isClickSlider = false | 72 | // let isClickSlider = false |
| 113 | let distance = 0 // 滑块与点击坐标的绝对距离 | 73 | // let distance = 0 // 滑块与点击坐标的绝对距离 |
| 114 | progress.onclick = (e) => { | 74 | // progress.onclick = (e) => { |
| 115 | // 阻止事件冒泡 | 75 | // // 阻止事件冒泡 |
| 116 | if (e.target == slider) { | 76 | // if (e.target == slider) { |
| 117 | return | 77 | // return |
| 118 | } | 78 | // } |
| 119 | let curX = progress.offsetLeft | 79 | // let curX = progress.offsetLeft |
| 120 | this.sliderLeft = e.pageX - curX | 80 | // this.sliderLeft = e.pageX - curX |
| 121 | if (this.sliderLeft <= 0) { | 81 | // if (this.sliderLeft <= 0) { |
| 122 | this.sliderLeft = 0 | 82 | // this.sliderLeft = 0 |
| 123 | } | 83 | // } |
| 124 | if (this.sliderLeft >= this.width) { | 84 | // if (this.sliderLeft >= this.width) { |
| 125 | this.sliderLeft = this.width | 85 | // this.sliderLeft = this.width |
| 126 | } | 86 | // } |
| 127 | this._countCurPercent() | 87 | // this._countCurPercent() |
| 128 | } | 88 | // } |
| 129 | // slider.onmousedown = (e) => { | 89 | // // slider.onmousedown = (e) => { |
| 130 | // isClickSlider = true | 90 | // // isClickSlider = true |
| 131 | // let curX = slider.offsetLeft | 91 | // // let curX = slider.offsetLeft |
| 132 | // distance = e.pageX - curX // 得出绝对距离 | 92 | // // distance = e.pageX - curX // 得出绝对距离 |
| 133 | // } | 93 | // // } |
| 134 | progress.onmousemove = (e) => { | 94 | // progress.onmousemove = (e) => { |
| 135 | if (isClickSlider) { | 95 | // if (isClickSlider) { |
| 136 | // 判断是否已经超出进度条的长度 | 96 | // // 判断是否已经超出进度条的长度 |
| 137 | if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | 97 | // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { |
| 138 | this.sliderLeft = e.pageX - distance | 98 | // this.sliderLeft = e.pageX - distance |
| 139 | this._countCurPercent() | 99 | // this._countCurPercent() |
| 140 | } | 100 | // } |
| 141 | } | 101 | // } |
| 142 | } | 102 | // } |
| 143 | progress.onmouseup = () => { | 103 | // progress.onmouseup = () => { |
| 144 | isClickSlider = false | 104 | // isClickSlider = false |
| 145 | } | 105 | // } |
| 146 | }, | 106 | // }, |
| 147 | // 算出百分比 | 107 | // // 算出百分比 |
| 148 | _countCurPercent () { | 108 | // _countCurPercent () { |
| 149 | this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | 109 | // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) |
| 150 | this.progressWidth = this.sliderLeft + 20 | 110 | // this.progressWidth = this.sliderLeft + 20 |
| 151 | // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 | 111 | // // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 |
| 152 | if (this.tempPercent <= 0) { | 112 | // if (this.tempPercent <= 0) { |
| 153 | this.progressWidth = 0 | 113 | // this.progressWidth = 0 |
| 154 | this.sliderLeft = 0 | 114 | // this.sliderLeft = 0 |
| 155 | } | 115 | // } |
| 156 | if (this.tempPercent >= 100) { | 116 | // if (this.tempPercent >= 100) { |
| 157 | this.progressWidth = this.width + 20 | 117 | // this.progressWidth = this.width + 20 |
| 158 | this.sliderLeft = this.width | 118 | // this.sliderLeft = this.width |
| 159 | } | 119 | // } |
| 160 | this.stand_width = this.tempPercent*this.standard | 120 | // this.stand_width = this.tempPercent*this.standard |
| 161 | this.stand_width = parseInt(this.stand_width/1) //取整 | 121 | // this.stand_width = parseInt(this.stand_width/1) //取整 |
| 162 | this.$emit('percentChange', this.tempPercent) | 122 | // this.$emit('percentChange', this.tempPercent) |
| 163 | } | 123 | // } |
| 164 | } | 124 | // } |
| 165 | } | 125 | } |
| 166 | </script> | 126 | </script> |
| 167 | 127 | ||
| 168 | <style scoped lang="scss"> | 128 | <style scoped lang="scss"> |
| 169 | .c-progress { | 129 | .c-progress { |
| 170 | $width: 400rpx; | 130 | $width: 300px; |
| 171 | $radius: 5px; | 131 | $radius: 5px; |
| 172 | display: flex; | 132 | display: flex; |
| 173 | align-items: center; | 133 | align-items: center; |
| 174 | 134 | ||
| 175 | span { | 135 | span { |
| 176 | margin-left: 5px; | 136 | margin-left: 5px; |
| 177 | font-size: 14px; | 137 | font-size: 14px; |
| 178 | color: #666; | 138 | color: #666; |
| 179 | } | 139 | } |
| 180 | 140 | ||
| 181 | .c-progress-outer { | 141 | .c-progress-outer { |
| 182 | width: $width; | 142 | width: 420rpx; |
| 183 | height: 10px; | 143 | height: 10px; |
| 184 | background: #ebeef5; | 144 | background: #ebeef5; |
| 185 | position: relative; | 145 | position: relative; |
| 186 | display: flex; | 146 | display: flex; |
| 187 | align-items: center; | 147 | align-items: center; |
| 188 | 148 | ||
| 189 | .c-progress-inner { | 149 | .c-progress-inner { |
| 190 | width: 100rpx; | 150 | width: 300rpx; |
| 191 | height: 10px; | 151 | height: 10px; |
| 192 | background: #FF6B4A ; | 152 | background: #FF6B4A ; |
| 193 | } | 153 | } |
| 194 | 154 | ||
| 195 | .c-progress-slider { | 155 | .c-progress-slider { |
| 196 | width: 20px; | 156 | width: 20px; |
| 197 | height: 20px; | 157 | height: 20px; |
| 198 | border-radius: 50%; | 158 | border-radius: 50%; |
| 199 | background: #fff; | 159 | background: #fff; |
| 200 | border: 1px solid #FF6B4A ; | 160 | border: 1px solid #FF6B4A ; |
| 201 | position: absolute; | 161 | position: absolute; |
| 202 | z-index: 10; | 162 | z-index: 10; |
| 203 | left: 10px; | 163 | left: 10px; |
| 204 | } | 164 | } |
| 205 | } | 165 | } |
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages" : [ | 2 | "pages" : [ |
| 3 | { | 3 | { |
| 4 | "path" : "pages/index/index", | 4 | "path" : "pages/index/index", |
| 5 | "style" : { | 5 | "style" : { |
| 6 | "navigationBarTitleText" : "商城一览" | 6 | "navigationBarTitleText" : "商城一览" |
| 7 | } | 7 | } |
| 8 | }, | 8 | }, |
| 9 | { | 9 | { |
| 10 | "path" : "pages/myOrder/myOrder", | 10 | "path" : "pages/myOrder/myOrder", |
| 11 | "style" : { | 11 | "style" : { |
| 12 | "navigationBarTitleText" : "我的订单" | 12 | "navigationBarTitleText" : "我的订单" |
| 13 | } | 13 | } |
| 14 | }, | 14 | }, |
| 15 | { | 15 | { |
| 16 | "path" : "pages/cart/cart", | 16 | "path" : "pages/cart/cart", |
| 17 | "style" : { | 17 | "style" : { |
| 18 | "navigationBarTitleText" : "购物车" | 18 | "navigationBarTitleText" : "购物车" |
| 19 | } | 19 | } |
| 20 | }, | 20 | }, |
| 21 | { | 21 | { |
| 22 | "path" : "pages/frameDetail/frameDetail", | ||
| 23 | "style" : { | ||
| 24 | "navigationBarTitleText" : "产品详情" | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | { | ||
| 28 | "path" : "pages/lensDetails/lensDetails", | 22 | "path" : "pages/lensDetails/lensDetails", |
| 29 | "style" : { | 23 | "style" : { |
| 30 | "navigationBarTitleText" : "产品详情" | 24 | "navigationBarTitleText" : "产品详情" |
| 31 | } | 25 | } |
| 32 | }, | 26 | }, |
| 33 | { | 27 | { |
| 34 | "path" : "pages/purchaseLenses/purchaseLenses", | 28 | "path" : "pages/purchaseLenses/purchaseLenses", |
| 35 | "style" : { | 29 | "style" : { |
| 36 | "navigationBarTitleText" : "产品选购" | 30 | "navigationBarTitleText" : "产品选购" |
| 37 | } | 31 | } |
| 38 | }, | 32 | }, |
| 39 | { | 33 | { |
| 40 | "path" : "pages/refundProgress/refundProgress", | 34 | "path" : "pages/refundProgress/refundProgress", |
| 41 | "style" : { | 35 | "style" : { |
| 42 | "navigationBarTitleText" : "申请退款" | 36 | "navigationBarTitleText" : "申请退款" |
| 43 | } | 37 | } |
| 44 | }, | 38 | }, |
| 45 | { | 39 | { |
| 46 | "path" : "pages/addAddress/addAddress", | 40 | "path" : "pages/addAddress/addAddress", |
| 47 | "style" : { | 41 | "style" : { |
| 48 | "navigationBarTitleText" : "新增地址" | 42 | "navigationBarTitleText" : "新增地址" |
| 49 | } | 43 | } |
| 50 | }, | 44 | }, |
| 51 | { | 45 | { |
| 52 | "path" : "pages/confirmOrder/confirmOrder", | 46 | "path" : "pages/confirmOrder/confirmOrder", |
| 53 | "style" : { | 47 | "style" : { |
| 54 | "navigationBarTitleText" : "确认订单" | 48 | "navigationBarTitleText" : "确认订单" |
| 55 | } | 49 | } |
| 56 | }, | 50 | }, |
| 57 | { | 51 | { |
| 58 | "path" : "pages/user/user", | 52 | "path" : "pages/user/user", |
| 59 | "style" : { | 53 | "style" : { |
| 60 | "navigationBarTitleText" : "我的" | 54 | "navigationBarTitleText" : "我的" |
| 61 | } | 55 | } |
| 62 | }, | 56 | }, |
| 63 | { | 57 | { |
| 64 | "path" : "pages/refundment/refundWays" | 58 | "path" : "pages/refundment/refundWays" |
| 65 | }, | 59 | }, |
| 66 | { | 60 | { |
| 67 | "path" : "pages/refundment/refundment" | 61 | "path" : "pages/refundment/refundment" |
| 68 | }, | 62 | }, |
| 69 | { | 63 | { |
| 70 | "path" : "pages/predelivery/predelivery" | 64 | "path" : "pages/predelivery/predelivery" |
| 71 | }, | 65 | }, |
| 72 | { | 66 | { |
| 73 | "path" : "pages/customerService/customerService", | 67 | "path" : "pages/customerService/customerService", |
| 74 | "style" : { | 68 | "style" : { |
| 75 | "navigationBarTitleText" : "在线客服" | 69 | "navigationBarTitleText" : "在线客服" |
| 76 | } | 70 | } |
| 77 | }, | 71 | }, |
| 78 | { | 72 | { |
| 79 | "path" : "pages/myOrderPaying/myOrderPaying", | 73 | "path" : "pages/myOrderPaying/myOrderPaying", |
| 80 | "style" : { | 74 | "style" : { |
| 81 | "navigationBarTitleText" : "我的订单" | 75 | "navigationBarTitleText" : "我的订单" |
| 82 | } | 76 | } |
| 83 | }, | 77 | }, |
| 84 | { | 78 | { |
| 85 | "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", | 79 | "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", |
| 86 | "style" : { | 80 | "style" : { |
| 87 | "navigationBarTitleText" : "镜片名称名称" | 81 | "navigationBarTitleText" : "镜片名称名称" |
| 88 | } | 82 | } |
| 89 | }, | 83 | }, |
| 90 | { | 84 | { |
| 91 | "path" : "pages/detailStandard/detailStandard_sun", | 85 | "path" : "pages/detailStandard/detailStandard_sun", |
| 92 | "style" : { | 86 | "style" : { |
| 93 | "navigationBarTitleText" : "太阳镜选购页" | 87 | "navigationBarTitleText" : "太阳镜选购页" |
| 94 | } | 88 | } |
| 95 | }, | 89 | }, |
| 96 | { | 90 | { |
| 97 | "path" : "pages/detailStandard/detailStandard_k", | 91 | "path" : "pages/detailStandard/detailStandard_k", |
| 98 | "style" : { | 92 | "style" : { |
| 99 | "navigationBarTitleText" : "镜框选购页" | 93 | "navigationBarTitleText" : "镜框选购页" |
| 100 | } | 94 | } |
| 101 | } | 95 | } |
| 102 | ], | 96 | ], |
| 103 | "globalStyle" : { | 97 | "globalStyle" : { |
| 104 | "navigationBarTextStyle" : "black", | 98 | "navigationBarTextStyle" : "black", |
| 105 | "navigationBarTitleText" : "uni-app", | 99 | "navigationBarTitleText" : "uni-app", |
| 106 | "navigationBarBackgroundColor" : "#F8F8F8", | 100 | "navigationBarBackgroundColor" : "#F8F8F8", |
| 107 | "backgroundColor" : "#F8F8F8" | 101 | "backgroundColor" : "#F8F8F8" |
| 108 | }, | 102 | }, |
| 109 | "tabBar" : { | 103 | "tabBar" : { |
| 110 | "color" : "#C0C4CC", | 104 | "color" : "#C0C4CC", |
| 111 | "selectedColor" : "#fa436a", | 105 | "selectedColor" : "#fa436a", |
| 112 | "borderStyle" : "black", | 106 | "borderStyle" : "black", |
| 113 | "backgroundColor" : "#ffffff", | 107 | "backgroundColor" : "#ffffff", |
| 114 | "list" : [ | 108 | "list" : [ |
| 115 | { | 109 | { |
| 116 | "pagePath" : "pages/index/index", | 110 | "pagePath" : "pages/index/index", |
| 117 | "iconPath" : "static/tab-home.png", | 111 | "iconPath" : "static/tab-home.png", |
| 118 | "selectedIconPath" : "static/tab-home-current.png", | 112 | "selectedIconPath" : "static/tab-home-current.png", |
| 119 | "text" : "首页" | 113 | "text" : "首页" |
| 120 | }, | 114 | }, |
| 121 | { | 115 | { |
| 122 | "pagePath" : "pages/cart/cart", | 116 | "pagePath" : "pages/cart/cart", |
| 123 | "iconPath" : "static/tab-cart.png", | 117 | "iconPath" : "static/tab-cart.png", |
| 124 | "selectedIconPath" : "static/tab-cart-current.png", | 118 | "selectedIconPath" : "static/tab-cart-current.png", |
| 125 | "text" : "购物车" | 119 | "text" : "购物车" |
| 126 | }, | 120 | }, |
| 127 | { | 121 | { |
| 128 | "pagePath" : "pages/user/user", | 122 | "pagePath" : "pages/user/user", |
| 129 | "iconPath" : "static/tab-my.png", | 123 | "iconPath" : "static/tab-my.png", |
| 130 | "selectedIconPath" : "static/tab-my-current.png", | 124 | "selectedIconPath" : "static/tab-my-current.png", |
| 131 | "text" : "我的" | 125 | "text" : "我的" |
| 132 | } | 126 | } |
| 133 | ] | 127 | ] |
| 134 | }, | 128 | }, |
| 135 | "condition" : { | 129 | "condition" : { |
| 136 | //模式配置，仅开发期间生效 | 130 | //模式配置，仅开发期间生效 |
| 137 | "current" : 0, //当前激活的模式(list 的索引项) | 131 | "current" : 0, //当前激活的模式(list 的索引项) |
| 138 | "list" : [ | 132 | "list" : [ |
| 139 | { | 133 | { |
| 140 | "name" : "", //模式名称 | 134 | "name" : "", //模式名称 |
| 141 | "path" : "", //启动页面，必选 | 135 | "path" : "", //启动页面，必选 |
| 142 | "query" : "" //启动参数，在页面的onLoad函数里面得到 | 136 | "query" : "" //启动参数，在页面的onLoad函数里面得到 |
| 143 | } | 137 | } |
| 144 | ] | 138 | ] |
| 145 | } | 139 | } |
| 146 | } | 140 | } |
| 147 | 141 |
src/pages/detailStandard/detailStandard_k.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view class="detail"> | 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 | <view class="detail2"> | 5 | <view class="detail2"> |
| 6 | <view class="detail2_name">{{detail.name}}</view> | 6 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | 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 | </view> | 16 | </view> |
| 10 | </view> | 17 | </view> |
| 11 | <view class="choose"> | 18 | <view class="choose"> |
| 12 | <view class="colour"> | 19 | <view class="colour"> |
| 13 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> | 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 | <view class="colour2"> | 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 | </view> | 34 | </view> |
| 18 | <hr/> | 35 | <hr/> |
| 19 | </view> | 36 | </view> |
| 20 | <view class="size"> | 37 | <view class="size"> |
| 21 | <view class="size1"> | 38 | <view class="size1"> |
| 22 | <view class="size1_1">框架尺寸</view> | 39 | <view class="size1_1">框架尺寸</view> |
| 23 | <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> | 40 | <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> |
| 24 | </view> | 41 | </view> |
| 25 | <view class="size2"> | 42 | <view class="colour"> |
| 26 | <view>通用</view> | 43 | <view class="colour_exp">*{{colour}}</view> |
| 27 | <view>定制</view> | ||
| 28 | </view> | 44 | </view> |
| 29 | <view class="D3_list"> | 45 | <view class="D3_list"> |
| 30 | <view v-for="(item) in parameter" :key="item.key"> | 46 | <view> |
| 31 | <view><image class="D3_image" v-bind:src = "item.img"></image></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 | <view class="D3_list_jDu"> | 58 | <view class="D3_list_jDu"> |
| 33 | <!-- uni-sliper插件 --> | 59 | <view class="D3_list1"> |
| 34 | <!-- <c-progress class="c-progress" | 60 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 35 | :percent="item.percent" | 61 | <view>{{details.data.glass_width}}mm</view> |
| 36 | :show-slider="false" :width="190" | 62 | </view> |
| 37 | :standard="item.standard_l" | 63 | <view>{{parameter[1].standard}}</view> |
| 38 | :stand_width="item.slength" | 64 | </view> |
| 39 | progressColor="#FF6B4A" | 65 | </view> |
| 40 | /> --> | 66 | <view> |
| 41 | <view>{{item.standard}}</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 | </view> | 95 | </view> |
| 43 | </view> | 96 | </view> |
| 44 | <hr/> | 97 | <hr/> |
| 45 | </view> | 98 | </view> |
| 46 | </view> | 99 | </view> |
| 47 | <view class="part"> | 100 | <view class="part"> |
| 48 | <view class="size1"> | 101 | <view class="size1"> |
| 49 | <view class="size1_1">配件</view> | 102 | <view class="size1_1">配件</view> |
| 50 | <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | 103 | <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> |
| 51 | </view> | 104 | </view> |
| 52 | <view class="colour_exp">*0290</view> | 105 | <view class="colour_exp">*0290</view> |
| 53 | <view class="part_som"> | 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 | </view> | 114 | </view> |
| 56 | </view> | 115 | </view> |
| 57 | </view> | 116 | </view> |
| 58 | <view class="buy"> | 117 | <view class="buy"> |
| 59 | <view class="buy1">选了镜框，想选镜片？</view> | 118 | <view class="buy1">选了镜框，想选镜片？</view> |
| 60 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | 119 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 61 | <view class="buy3"> | 120 | <view class="buy3"> |
| 62 | <view class="buy3_1">暂时不选</view> | 121 | <view class="buy3_1">暂时不选</view> |
| 63 | <view class="buy3_2">立即去选</view> | 122 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 64 | </view> | 123 | </view> |
| 65 | </view> | 124 | </view> |
| 66 | <view class="zhanwei"></view> | 125 | <view class="zhanwei"></view> |
| 67 | <view class="button"><view>立即结算</view></view> | 126 | <view class="button"><view>立即结算</view></view> |
| 68 | </view> | 127 | </view> |
| 69 | </template> | 128 | </template> |
| 70 | <script> | 129 | <script> |
| 71 | import CProgress from '../../components/UniSliper/UniSliper' | 130 | import CProgress from '../../components/UniSliper/UniSliper' |
| 72 | import store from '@/store' | 131 | import store from '@/store' |
| 73 | 132 | ||
| 74 | export default { | 133 | export default { |
| 134 | components: { | ||
| 135 | CProgress | ||
| 136 | }, | ||
| 75 | data(){ | 137 | data(){ |
| 76 | return{ | 138 | return{ |
| 77 | detail:{ | 139 | count: 1, |
| 78 | image:'/static/img/detail/d1.png', | 140 | colour: '1.56非球面防蓝光_亚黑色', |
| 79 | name:'商品名称商品名称商品名称商品名称商品名称', | 141 | chooseNum : '', |
| 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 | //规格 | ||
| 94 | parameter:[ | 142 | parameter:[ |
| 95 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | 143 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
| 96 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | 144 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
| 97 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | 145 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
| 98 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | 146 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
| 99 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | 147 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
| 100 | ], | 148 | ], |
| 101 | //配饰 | 149 | //配饰 |
| 102 | part:[ | 150 | part:[ |
| 103 | {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | 151 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
| 104 | {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | 152 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 105 | {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | 153 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 106 | {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | 154 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 107 | {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | 155 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 108 | {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | 156 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 109 | {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | 157 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 110 | {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | 158 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 111 | ], | 159 | ], |
| 112 | } | 160 | } |
| 113 | }, | 161 | }, |
| 114 | 162 | ||
| 115 | components: { | 163 | computed: { |
| 116 | detailStandard_k(){ | 164 | details(){ |
| 117 | console.log(detailStandard_k) | 165 | return this.$store.state.detailStandard_k.list |
| 118 | return this.$store.state.detailStandard_k.detailStandardList | 166 | }, |
| 119 | } | ||
| 120 | }, | 167 | }, |
| 121 | onLoad:function(){ | 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 | </script> | 202 | </script> |
| 126 | 203 | ||
| 127 | <style lang="scss"> | 204 | <style lang="scss"> |
| 128 | .container{ | 205 | .container{ |
| 129 | min-height: 100vh; | 206 | min-height: 100vh; |
| 130 | background: #F2F2F2; | 207 | background: #F2F2F2; |
| 131 | padding-top: 10px; | 208 | padding-top: 10px; |
| 132 | box-sizing: border-box; | 209 | box-sizing: border-box; |
| 133 | } | 210 | } |
| 134 | hr{ | 211 | hr{ |
| 135 | border: none; | 212 | border: none; |
| 136 | height: 1px; | 213 | height: 1px; |
| 137 | background: #F2F2F2; | 214 | background: #F2F2F2; |
| 138 | margin-top: 18px; | 215 | margin-top: 18px; |
| 139 | } | 216 | } |
| 140 | .detail{ | 217 | .detail{ |
| 141 | height: 272rpx; | 218 | height: 272rpx; |
| 142 | background: #FFFFFF; | 219 | background: #FFFFFF; |
| 143 | border-radius: 8px; | 220 | border-radius: 8px; |
| 144 | padding: 16px; | 221 | padding: 16px; |
| 145 | box-sizing: border-box; | 222 | box-sizing: border-box; |
| 146 | display: flex; | 223 | display: flex; |
| 147 | justify-content: space-between; | 224 | justify-content: space-between; |
| 148 | align-items: center; | 225 | align-items: center; |
| 149 | } | 226 | } |
| 150 | .detail1{ | 227 | .detail1{ |
| 151 | height: 188rpx; | 228 | height: 178rpx; |
| 152 | width: 188rpx; | 229 | width: 188rpx; |
| 153 | image{ | 230 | image{ |
| 154 | width: 100%; | 231 | width: 100%; |
| 155 | height: 100%; | 232 | height: 100%; |
| 156 | border-radius: 8px; | 233 | border-radius: 8px; |
| 157 | } | 234 | } |
| 158 | } | 235 | } |
| 159 | .detail2{ | 236 | .detail2{ |
| 160 | width: 68%; | 237 | width: 68%; |
| 161 | view{ | 238 | view{ |
| 162 | margin-bottom: 8px; | 239 | margin-bottom: 6px; |
| 163 | font-family: PingFangSC-Regular; | 240 | font-family: PingFangSC-Regular; |
| 164 | } | 241 | } |
| 165 | .detail2_name{ | 242 | .detail2_name{ |
| 166 | font-size: 14px; | 243 | font-size: 14px; |
| 167 | color: #333333; | 244 | color: #333333; |
| 168 | letter-spacing: -0.26px; | 245 | letter-spacing: -0.26px; |
| 169 | line-height: 18px; | 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 | .detail2_tui{ | 253 | .detail2_tui{ |
| 172 | font-size: 10px; | 254 | font-size: 10px; |
| 173 | color: #999999; | 255 | color: #999999; |
| 174 | letter-spacing: -0.19px; | 256 | letter-spacing: -0.19px; |
| 175 | span{ | 257 | span{ |
| 176 | margin-right: 10px; | 258 | margin-right: 10px; |
| 177 | } | 259 | } |
| 178 | } | 260 | } |
| 179 | .detail2_price{ | 261 | .detail2_price{ |
| 180 | font-size: 14px; | 262 | font-size: 14px; |
| 181 | color: #FF6B4A; | 263 | color: #FF6B4A; |
| 182 | letter-spacing: -0.26px; | 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 | .choose{ | 285 | .choose{ |
| 186 | background: #FFFFFF; | 286 | background: #FFFFFF; |
| 187 | padding: 16px; | 287 | padding: 16px; |
| 188 | box-sizing: border-box; | 288 | box-sizing: border-box; |
| 189 | margin-top: 10px; | 289 | margin-top: 10px; |
| 190 | border-radius: 8px; | 290 | border-radius: 8px; |
| 191 | .colour1{ | 291 | .colour1{ |
| 192 | span{ | 292 | span{ |
| 193 | font-family: PingFangSC-Medium; | 293 | font-family: PingFangSC-Medium; |
| 194 | font-size: 16px; | 294 | font-size: 16px; |
| 195 | color: #333333; | 295 | color: #333333; |
| 196 | letter-spacing: -0.3px; | 296 | letter-spacing: -0.3px; |
| 197 | text-align: justify; | 297 | text-align: justify; |
| 198 | line-height: 24px; | 298 | line-height: 24px; |
| 199 | font-weight: bold; | 299 | font-weight: bold; |
| 200 | } | 300 | } |
| 201 | image{ | 301 | image{ |
| 202 | float: right; | 302 | float: right; |
| 203 | width: 40rpx; | 303 | width: 40rpx; |
| 204 | height: 36rpx; | 304 | height: 36rpx; |
| 205 | } | 305 | } |
| 206 | } | 306 | } |
| 207 | .colour_exp{ | 307 | .colour_exp{ |
| 208 | font-family: PingFangSC-Regular; | 308 | font-family: PingFangSC-Regular; |
| 209 | font-size: 12px; | 309 | font-size: 12px; |
| 210 | color: #666666; | 310 | color: #666666; |
| 211 | letter-spacing: 0; | 311 | letter-spacing: 0; |
| 212 | margin-top: 10px; | 312 | margin-top: 10px; |
| 213 | margin-bottom: 10px; | 313 | margin-bottom: 10px; |
| 214 | } | 314 | } |
| 215 | .colour2{ | 315 | .colour2{ |
| 216 | display: grid; | 316 | display: grid; |
| 217 | grid-template-columns: repeat(5, 17%); | 317 | grid-template-columns: repeat(5, 17%); |
| 218 | justify-content: space-between ; | 318 | justify-content: space-between ; |
| 219 | grid-row-gap: 10px; | 319 | grid-row-gap: 10px; |
| 220 | margin-bottom: 14px; | 320 | margin-bottom: 14px; |
| 221 | view{ | 321 | .colour2_view{ |
| 222 | border: 1px solid #F2F2F2; | 322 | border: 1px solid #F2F2F2; |
| 223 | image{ | 323 | image{ |
| 224 | width: 100%; | 324 | width: 100rpx; |
| 225 | height: 100%; | 325 | height: 60rpx; |
| 226 | } | 326 | } |
| 227 | } | 327 | } |
| 228 | view:hover{ | 328 | .colour2_viewed{ |
| 229 | border: 1px solid #FF6B4A; | 329 | border: 1px solid #FF6B4A; |
| 330 | image{ | ||
| 331 | width: 100rpx; | ||
| 332 | height: 60rpx; | ||
| 333 | } | ||
| 230 | } | 334 | } |
| 231 | } | 335 | } |
| 232 | } | 336 | } |
| 233 | .size,.part{ | 337 | .size,.part{ |
| 234 | margin-top:14px; | 338 | margin-top:14px; |
| 235 | .size1{ | 339 | .size1{ |
| 236 | display: flex; | 340 | display: flex; |
| 237 | justify-content: space-between; | 341 | justify-content: space-between; |
| 238 | margin-bottom: 10px; | 342 | margin-bottom: 10px; |
| 239 | .size1_1{ | 343 | .size1_1{ |
| 240 | font-weight: bold; | 344 | font-weight: bold; |
| 241 | font-family: PingFangSC-Medium; | 345 | font-family: PingFangSC-Medium; |
| 242 | font-size: 16px; | 346 | font-size: 16px; |
| 243 | color: #333333; | 347 | color: #333333; |
| 244 | letter-spacing: -0.3px; | 348 | letter-spacing: -0.3px; |
| 245 | line-height: 24px; | 349 | line-height: 24px; |
| 246 | } | 350 | } |
| 247 | view{ | 351 | view{ |
| 248 | span{ | 352 | span{ |
| 249 | font-family: PingFangSC-Regular; | 353 | font-family: PingFangSC-Regular; |
| 250 | font-size: 14px; | 354 | font-size: 14px; |
| 251 | color: #FF6B4A; | 355 | color: #FF6B4A; |
| 252 | letter-spacing: -0.26px; | 356 | letter-spacing: -0.26px; |
| 253 | margin-right: 12px; | 357 | margin-right: 12px; |
| 254 | } | 358 | } |
| 255 | image{ | 359 | image{ |
| 256 | width: 40rpx; | 360 | width: 40rpx; |
| 257 | height: 36rpx; | 361 | height: 36rpx; |
| 258 | } | 362 | } |
| 259 | } | 363 | } |
| 260 | } | 364 | } |
| 261 | .size2{ | 365 | .size2{ |
| 262 | view{ | 366 | view{ |
| 263 | display: inline-flex; | 367 | display: inline-flex; |
| 264 | align-items: center; | 368 | align-items: center; |
| 265 | justify-content: center; //字体居中 | 369 | justify-content: center; //字体居中 |
| 266 | margin-right: 12px; | 370 | margin-right: 12px; |
| 267 | margin-bottom: 20px; | 371 | margin-bottom: 20px; |
| 268 | width: 136rpx; | 372 | width: 136rpx; |
| 269 | height: 60rpx; | 373 | height: 60rpx; |
| 270 | background: #F2F2F2; | 374 | background: #F2F2F2; |
| 271 | border-radius: 2px; | 375 | border-radius: 2px; |
| 272 | font-family: PingFangSC-Regular; | 376 | font-family: PingFangSC-Regular; |
| 273 | font-size: 12px; | 377 | font-size: 12px; |
| 274 | color: #666666; | 378 | color: #666666; |
| 275 | } | 379 | } |
| 276 | view:hover{ | 380 | view:hover{ |
| 277 | color: #FF6B4A; | 381 | color: #FF6B4A; |
| 278 | background: rgba(255,107,74,0.15); | 382 | background: rgba(255,107,74,0.15); |
| 279 | } | 383 | } |
| 280 | } | 384 | } |
| 281 | .D3_list{ | 385 | .D3_list{ |
| 282 | margin-bottom: 4px; | 386 | margin-bottom: 4px; |
| 283 | } | 387 | } |
| 284 | .D3_list>view{ | 388 | .D3_list>view{ |
| 285 | display: flex; | 389 | display: flex; |
| 286 | align-content: center; | 390 | align-content: center; |
| 287 | margin-bottom: 10px; | 391 | margin-bottom: 10px; |
| 288 | view{ | 392 | view{ |
| 289 | margin-right: 10px; | 393 | margin-right: 10px; |
| 290 | } | 394 | } |
| 291 | } | 395 | } |
| 292 | .D3_list image{ | 396 | .D3_list image{ |
| 293 | width: 50px; | 397 | width: 50px; |
| 294 | height: 25px; | 398 | height: 25px; |
| 295 | margin-right: 6px; | 399 | margin-right: 6px; |
| 296 | } | 400 | } |
| 297 | .D3_list span{ | 401 | .D3_list span{ |
| 298 | margin-left: 6px; | 402 | margin-left: 6px; |
| 299 | margin-right: 5px; | 403 | margin-right: 5px; |
| 300 | font-family: 'PingFangSC-Regular'; | 404 | font-family: 'PingFangSC-Regular'; |
| 301 | } | 405 | } |
| 302 | .D3_list_jDu{ | 406 | .D3_list_jDu{ |
| 303 | view{ | 407 | view{ |
| 304 | font-family: PingFangSC-Regular; | 408 | font-family: PingFangSC-Regular; |
| 305 | font-size: 10px; | 409 | font-size: 10px; |
| 306 | color: #999999; | 410 | color: #999999; |
| 307 | letter-spacing: -0.19px; | 411 | letter-spacing: -0.19px; |
| 308 | } | 412 | } |
| 413 | .D3_list1{ | ||
| 414 | display: flex; | ||
| 415 | } | ||
| 309 | } | 416 | } |
| 310 | } | 417 | } |
| 311 | .part{ | 418 | .part{ |
| 312 | .part_som{ | 419 | .part_som{ |
| 313 | display: grid; | 420 | display: grid; |
| 314 | justify-content: space-between; | 421 | justify-content: space-between; |
| 315 | grid-template-columns: repeat(4, 22%); | 422 | grid-template-columns: repeat(4, 22%); |
| 316 | grid-row-gap: 12px; | 423 | grid-row-gap: 12px; |
| 317 | margin-bottom: 14px; | 424 | margin-bottom: 14px; |
| 318 | view{ | 425 | view{ |
| 319 | border: 1px solid #F2F2F2; | 426 | border: 1px solid #F2F2F2; |
| 320 | height: 72rpx; | 427 | height: 72rpx; |
| 321 | image{ | 428 | image{ |
| 322 | width: 100%; | 429 | width: 100%; |
| 323 | height: 100%; | 430 | height: 100%; |
| 324 | } | 431 | } |
| 325 | } | 432 | } |
| 326 | view:hover{ | 433 | .size_viewed{ |
| 327 | border: 1px solid #FF6B4A; | 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 | .buy{ | 444 | .buy{ |
| 332 | height: 280rpx; | 445 | height: 300rpx; |
| 333 | background: #FFFFFF ; | 446 | background: #FFFFFF ; |
| 334 | margin-top: 10px; | 447 | margin-top: 10px; |
| 335 | border-radius: 8px; | 448 | border-radius: 8px; |
| 336 | padding-top: 20px; | 449 | padding-top: 20px; |
| 337 | box-sizing: border-box; | 450 | box-sizing: border-box; |
| 338 | margin-bottom: 20px; | 451 | margin-bottom: 20px; |
| 339 | } | 452 | } |
| 340 | .buy1{ | 453 | .buy1{ |
| 341 | font-family: PingFangSC-Medium; | 454 | font-family: PingFangSC-Medium; |
| 342 | font-size: 16px; | 455 | font-size: 16px; |
| 343 | font-weight: bold; | 456 | font-weight: bold; |
| 344 | color: #333333; | 457 | color: #333333; |
| 345 | text-align: center; | 458 | text-align: center; |
| 346 | } | 459 | } |
| 347 | .buy2{ | 460 | .buy2{ |
| 348 | font-family: PingFangSC-Regular; | 461 | font-family: PingFangSC-Regular; |
| 349 | font-size: 12px; | 462 | font-size: 12px; |
| 350 | color: #999999; | 463 | color: #999999; |
| 351 | text-align: center; | 464 | text-align: center; |
| 352 | margin: 10px; | 465 | margin: 10px; |
| 353 | } | 466 | } |
| 354 | .buy3{ | 467 | .buy3{ |
| 355 | font-family: PingFangSC-Regular; | 468 | font-family: PingFangSC-Regular; |
| 356 | font-size: 16px; | 469 | font-size: 16px; |
| 357 | display: flex; | 470 | display: flex; |
| 358 | justify-content: center; | 471 | justify-content: center; |
| 359 | margin-top: 14px; | 472 | margin-top: 14px; |
| 360 | view{ | 473 | view{ |
| 361 | border-radius: 20px; | 474 | border-radius: 20px; |
| 362 | width: 240rpx; | 475 | width: 240rpx; |
| 363 | height: 80rpx; | 476 | height: 80rpx; |
| 364 | display: flex; | 477 | display: flex; |
| 365 | justify-content: center; | 478 | justify-content: center; |
| 366 | align-items: center; | 479 | align-items: center; |
| 367 | } | 480 | } |
| 368 | .buy3_1{ | 481 | .buy3_1{ |
| 369 | margin-right: 20px; | 482 | margin-right: 20px; |
| 370 | background: rgba(255,107,74,0.15); | 483 | background: rgba(255,107,74,0.15); |
| 371 | color: #FF6B4A ; | 484 | color: #FF6B4A ; |
| 372 | } | 485 | } |
| 373 | .buy3_2{ | 486 | .buy3_2{ |
| 374 | background: #FF6B4A; | 487 | background: #FF6B4A; |
| 375 | color: #FFFFFF ; | 488 | color: #FFFFFF ; |
| 376 | } | 489 | } |
| 377 | } | 490 | } |
| 378 | .zhanwei{ | 491 | .zhanwei{ |
| 379 | background: #F2F2F2; | 492 | background: #F2F2F2; |
| 380 | height: 120rpx; | 493 | height: 120rpx; |
| 381 | } | 494 | } |
| 382 | .button{ | 495 | .button{ |
src/pages/detailStandard/detailStandard_sun.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view class="detail"> | 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 | <view class="detail2"> | 5 | <view class="detail2"> |
| 6 | <view class="detail2_name">{{detail.name}}</view> | 6 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | 7 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> |
| 8 | <view class="detail2_price"><span>￥{{detail.price}}</span></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 | </view> | 16 | </view> |
| 10 | </view> | 17 | </view> |
| 11 | <view class="choose"> | 18 | <view class="choose"> |
| 12 | <view class="colour"> | 19 | <view class="colour"> |
| 13 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | 20 | <view class="colour1"><text>框架颜色</text><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 | <view class="colour2"> | 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 | </view> | 34 | </view> |
| 18 | <hr/> | 35 | <hr/> |
| 19 | </view> | 36 | </view> |
| 20 | <view class="colour"> | 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 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | 39 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
| 40 | <view> | ||
| 23 | <view class="jp_colour2"> | 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 | </view> | 50 | </view> |
| 26 | <hr/> | 51 | <hr/> |
| 27 | </view> | 52 | </view> |
| 28 | <view class="split"> | 53 | <view class="colour"> |
| 29 | <view class="split1"> | 54 | <view class="colour1"> |
| 30 | <span>折射率</span> | 55 | <text>{{details.data.attrList[0].meta_name}}</text> |
| 31 | <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span> | 56 | <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> |
| 32 | <image src="/static/img/detail/xiala2.png"></image> | 57 | <image src="/static/img/detail/xiala.png"></image> |
| 33 | </view> | 58 | </view> |
| 34 | <view class="split2"> | 59 | <view> |
| 35 | <view class="split2_number">0-300度</view> | 60 | <view class="split"> |
| 36 | <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view> | 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 | </view> | 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 | </view> | 72 | </view> |
| 43 | <hr/> | 73 | <hr/> |
| 44 | </view> | 74 | </view> |
| 45 | <view class="size"> | 75 | <view class="size"> |
| 46 | <view class="size1"> | 76 | <view class="size1"> |
| 47 | <view class="size1_1">框架尺寸</view> | 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 | </view> | 79 | </view> |
| 50 | <view class="size2"> | 80 | <view class="colour"> |
| 51 | <view>通用</view> | 81 | <view class="colour_exp">*{{colour}}</view> |
| 52 | <view>定制</view> | ||
| 53 | </view> | 82 | </view> |
| 54 | <!-- uni-sliper插件 --> | ||
| 55 | <view class="D3_list"> | 83 | <view class="D3_list"> |
| 56 | <view v-for="(item) in parameter" :key="item.key"> | 84 | <view> |
| 57 | <view><image class="D3_image" v-bind:src = "item.img"></image></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 | <view class="D3_list_jDu"> | 106 | <view class="D3_list_jDu"> |
| 59 | <c-progress class="c-progress" | 107 | <view class="D3_list1"> |
| 60 | :percent="item.percent" | 108 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 61 | :show-slider="false" :width="190" | 109 | <view>{{details.data.glass_height}}mm</view> |
| 62 | :standard="item.standard_l" | 110 | </view> |
| 63 | :stand_width="item.slength" | 111 | <view>{{parameter[2].standard}}</view> |
| 64 | progressColor="#FF6B4A" | 112 | </view> |
| 65 | /> | 113 | </view> |
| 66 | <view>{{item.standard}}</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 | </view> | 133 | </view> |
| 68 | </view> | 134 | </view> |
| 69 | <hr/> | 135 | <hr/> |
| 70 | </view> | 136 | </view> |
| 71 | </view> | 137 | </view> |
| 72 | <view class="part"> | 138 | <view class="part"> |
| 73 | <view class="size1"> | 139 | <view class="size1"> |
| 74 | <view class="size1_1">配件</view> | 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 | </view> | 142 | </view> |
| 77 | <view class="colour_exp">*0290</view> | 143 | <view class="colour_exp">*0290</view> |
| 78 | <view class="part_som"> | 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 | </view> | 152 | </view> |
| 81 | </view> | 153 | </view> |
| 82 | </view> | 154 | </view> |
| 83 | <view class="buy"> | 155 | <view class="buy"> |
| 84 | <view class="buy1">选了镜框，想选镜片？</view> | 156 | <view class="buy1">选了镜框，想选镜片？</view> |
| 85 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | 157 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 86 | <view class="buy3"> | 158 | <view class="buy3"> |
| 87 | <view class="buy3_1">暂时不选</view> | 159 | <view class="buy3_1">暂时不选</view> |
| 88 | <view class="buy3_2">立即去选</view> | 160 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 89 | </view> | 161 | </view> |
| 90 | </view> | 162 | </view> |
| 91 | <view class="zhanwei"></view> | 163 | <view class="zhanwei"></view> |
| 92 | <view class="button"><view>立即结算</view></view> | 164 | <view class="button"><view>立即结算</view></view> |
| 93 | </view> | 165 | </view> |
| 94 | </template> | 166 | </template> |
| 95 | <script> | 167 | <script> |
| 96 | import CProgress from '../../components/UniSliper/UniSliper' | 168 | import CProgress from '../../components/UniSliper/UniSliper' |
| 169 | import store from '@/store' | ||
| 97 | 170 | ||
| 98 | export default { | 171 | export default { |
| 99 | components: { | 172 | components: { |
| 100 | CProgress | 173 | CProgress |
| 101 | }, | 174 | }, |
| 102 | data(){ | 175 | data(){ |
| 103 | return{ | 176 | return{ |
| 104 | detail:{ | 177 | count: 1, |
| 105 | image:'/static/img/detail/sun_glass.png', | 178 | colour: '1.56非球面防蓝光_亚黑色', |
| 106 | name:'商品名称商品名称商品名称商品名称商品名称', | 179 | chooseNum : '', |
| 107 | price: 180, | 180 | isSplit: '' , |
| 108 | number: 1, | 181 | parameter:[ |
| 109 | }, | 182 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
| 110 | //框架颜色 | 183 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
| 111 | colour:[ | 184 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
| 112 | {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | 185 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
| 113 | {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | 186 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
| 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'} | ||
| 119 | ], | 187 | ], |
| 120 | //镜片颜色 | 188 | //镜片颜色 |
| 121 | jp:[ | 189 | jp_colour:[ |
| 122 | {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 190 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 123 | {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 191 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 124 | {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 192 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 125 | {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 193 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 126 | {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 194 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 127 | {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | 195 | {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}, | ||
| 139 | ], | 196 | ], |
| 140 | //配饰 | 197 | //配饰 |
| 141 | part:[ | 198 | part:[ |
| 142 | {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | 199 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
| 143 | {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | 200 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 144 | {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | 201 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 145 | {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | 202 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 146 | {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | 203 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 147 | {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | 204 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 148 | {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | 205 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 149 | {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | 206 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 150 | |||
| 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 | </script> | 263 | </script> |
| 156 | 264 | ||
| 157 | <style lang="scss"> | 265 | <style lang="scss"> |
| 158 | .container{ | 266 | .container{ |
| 159 | min-height: 100vh; | 267 | min-height: 100vh; |
| 160 | background: #F2F2F2; | 268 | background: #F2F2F2; |
| 161 | padding-top: 10px; | 269 | padding-top: 10px; |
| 162 | box-sizing: border-box; | 270 | box-sizing: border-box; |
| 163 | } | 271 | } |
| 164 | hr{ | 272 | hr{ |
| 165 | border: none; | 273 | border: none; |
| 166 | height: 1px; | 274 | height: 1px; |
| 167 | background: #F2F2F2; | 275 | background: #F2F2F2; |
| 168 | margin-top: 18px; | 276 | margin-top: 18px; |
| 277 | margin-bottom: 10px; | ||
| 169 | } | 278 | } |
| 170 | .detail{ | 279 | .detail{ |
| 171 | height: 272rpx; | 280 | height: 272rpx; |
| 172 | background: #FFFFFF; | 281 | background: #FFFFFF; |
| 173 | border-radius: 8px; | 282 | border-radius: 8px; |
| 174 | padding: 16px; | 283 | padding: 16px; |
| 175 | box-sizing: border-box; | 284 | box-sizing: border-box; |
| 176 | display: flex; | 285 | display: flex; |
| 177 | justify-content: space-between; | 286 | justify-content: space-between; |
| 178 | align-items: center; | 287 | align-items: center; |
| 179 | } | 288 | } |
| 180 | .detail1{ | 289 | .detail1{ |
| 181 | height: 188rpx; | 290 | height: 178rpx; |
| 182 | width: 188rpx; | 291 | width: 188rpx; |
| 183 | image{ | 292 | image{ |
| 184 | width: 100%; | 293 | width: 100%; |
| 185 | height: 100%; | 294 | height: 100%; |
| 186 | border-radius: 8px; | 295 | border-radius: 8px; |
| 187 | } | 296 | } |
| 188 | } | 297 | } |
| 189 | .detail2{ | 298 | .detail2{ |
| 190 | width: 68%; | 299 | width: 68%; |
| 191 | view{ | 300 | view{ |
| 192 | margin-bottom: 8px; | 301 | margin-bottom: 6px; |
| 193 | font-family: PingFangSC-Regular; | 302 | font-family: PingFangSC-Regular; |
| 194 | } | 303 | } |
| 195 | .detail2_name{ | 304 | .detail2_name{ |
| 196 | font-size: 14px; | 305 | font-size: 14px; |
| 197 | color: #333333; | 306 | color: #333333; |
| 198 | letter-spacing: -0.26px; | 307 | letter-spacing: -0.26px; |
| 199 | line-height: 18px; | 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 | .detail2_tui{ | 315 | .detail2_tui{ |
| 202 | font-size: 10px; | 316 | font-size: 10px; |
| 203 | color: #999999; | 317 | color: #999999; |
| 204 | letter-spacing: -0.19px; | 318 | letter-spacing: -0.19px; |
| 205 | span{ | 319 | span{ |
| 206 | margin-right: 10px; | 320 | margin-right: 10px; |
| 207 | } | 321 | } |
| 208 | } | 322 | } |
| 209 | .detail2_price{ | 323 | .detail2_price{ |
| 210 | font-size: 14px; | 324 | font-size: 14px; |
| 211 | color: #FF6B4A; | 325 | color: #FF6B4A; |
| 212 | letter-spacing: -0.26px; | 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 | .choose{ | 347 | .choose{ |
| 216 | background: #FFFFFF; | 348 | background: #FFFFFF; |
| 217 | padding: 16px; | 349 | padding: 16px; |
| 218 | box-sizing: border-box; | 350 | box-sizing: border-box; |
| 219 | margin-top: 10px; | 351 | margin-top: 10px; |
| 220 | border-radius: 8px; | 352 | border-radius: 8px; |
| 221 | .colour1{ | 353 | .colour1{ |
| 222 | span{ | 354 | span{ |
| 223 | font-family: PingFangSC-Medium; | 355 | font-family: PingFangSC-Medium; |
| 224 | font-size: 16px; | 356 | font-size: 16px; |
| 225 | color: #333333; | 357 | color: #333333; |
| 226 | letter-spacing: -0.3px; | 358 | letter-spacing: -0.3px; |
| 227 | text-align: justify; | 359 | text-align: justify; |
| 228 | line-height: 24px; | 360 | line-height: 24px; |
| 229 | font-weight: bold; | 361 | font-weight: bold; |
| 230 | } | 362 | } |
| 231 | image{ | 363 | image{ |
| 232 | float: right; | 364 | float: right; |
| 233 | width: 40rpx; | 365 | width: 40rpx; |
| 234 | height: 36rpx; | 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 | .colour_exp{ | 376 | .colour_exp{ |
| 238 | font-family: PingFangSC-Regular; | 377 | font-family: PingFangSC-Regular; |
| 239 | font-size: 12px; | 378 | font-size: 12px; |
| 240 | color: #666666; | 379 | color: #666666; |
| 241 | letter-spacing: 0; | 380 | letter-spacing: 0; |
| 242 | margin-top: 10px; | 381 | margin-top: 10px; |
| 243 | margin-bottom: 10px; | 382 | margin-bottom: 10px; |
| 244 | } | 383 | } |
| 245 | .colour2{ | 384 | .colour2{ |
| 246 | display: grid; | 385 | display: grid; |
| 247 | grid-template-columns: repeat(5, 17%); | 386 | grid-template-columns: repeat(5, 17%); |
| 248 | justify-content: space-between ; | 387 | justify-content: space-between ; |
| 249 | grid-row-gap: 10px; | 388 | grid-row-gap: 10px; |
| 250 | margin-bottom: 14px; | 389 | margin-bottom: 14px; |
| 251 | view{ | 390 | .colour2_view{ |
| 252 | border: 1px solid #F2F2F2; | 391 | border: 1px solid #F2F2F2; |
| 253 | image{ | 392 | image{ |
| 254 | width: 100%; | 393 | width: 100rpx; |
| 255 | height: 100%; | 394 | height: 60rpx; |
| 256 | } | 395 | } |
| 257 | } | 396 | } |
| 258 | view:hover{ | 397 | .colour2_viewed{ |
| 259 | border: 1px solid #FF6B4A; | 398 | border: 1px solid #FF6B4A; |
| 399 | image{ | ||
| 400 | width: 100rpx; | ||
| 401 | height: 60rpx; | ||
| 402 | } | ||
| 260 | } | 403 | } |
| 261 | } | 404 | } |
| 262 | } | 405 | } |
| 263 | .jp_colour2{ | 406 | .jp_colour2{ |
| 264 | display: grid; | 407 | display: grid; |
| 265 | grid-template-columns: repeat(6, 12%); | 408 | grid-template-columns: repeat(5, 13%); |
| 266 | grid-row-gap: 10px; | 409 | justify-content: start ; |
| 267 | grid-column-gap: 6px; | 410 | grid-column-gap: 10px; |
| 268 | margin-bottom: 14px; | 411 | grid-row-gap: 10px; |
| 269 | view{ | 412 | margin-bottom: 14px; |
| 413 | .jp_colour2_view{ | ||
| 270 | border: 1px solid #F2F2F2; | 414 | border: 1px solid #F2F2F2; |
| 271 | height: 80rpx; | ||
| 272 | image{ | 415 | image{ |
| 273 | width: 100%; | 416 | width: 80rpx; |
| 274 | height: 100%; | 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{ | 421 | .split{ |
| 306 | margin-bottom: 12px; | 422 | display: grid; |
| 307 | .split2_number{ | 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 | font-family: PingFangSC-Regular; | 435 | font-family: PingFangSC-Regular; |
| 309 | font-size: 10px; | 436 | font-size: 12px; |
| 310 | color: #999999; | 437 | color: #666666; |
| 311 | letter-spacing: -0.19px; | 438 | letter-spacing: 0; |
| 312 | margin-bottom: 6px; | 439 | text-align: center; |
| 313 | } | 440 | } |
| 314 | .split2_choose{ | 441 | .split_colour2_actived{ |
| 315 | display: flex; | 442 | background: rgba(255,107,74,0.15); |
| 316 | view{ | 443 | color: #FF6B4A; |
| 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 | } | ||
| 337 | } | 444 | } |
| 338 | |||
| 339 | } | 445 | } |
| 340 | .size,.part{ | 446 | .size,.part{ |
| 341 | margin-top:14px; | 447 | margin-top:14px; |
| 342 | .size1{ | 448 | .size1{ |
| 343 | display: flex; | 449 | display: flex; |
| 344 | justify-content: space-between; | 450 | justify-content: space-between; |
| 345 | margin-bottom: 10px; | 451 | margin-bottom: 10px; |
| 346 | .size1_1{ | 452 | .size1_1{ |
| 347 | font-weight: bold; | 453 | font-weight: bold; |
| 348 | font-family: PingFangSC-Medium; | 454 | font-family: PingFangSC-Medium; |
| 349 | font-size: 16px; | 455 | font-size: 16px; |
| 350 | color: #333333; | 456 | color: #333333; |
| 351 | letter-spacing: -0.3px; | 457 | letter-spacing: -0.3px; |
| 352 | line-height: 24px; | 458 | line-height: 24px; |
| 353 | } | 459 | } |
| 354 | view{ | 460 | view{ |
| 355 | span{ | 461 | span{ |
| 356 | font-family: PingFangSC-Regular; | 462 | font-family: PingFangSC-Regular; |
| 357 | font-size: 14px; | 463 | font-size: 14px; |
| 358 | color: #FF6B4A; | 464 | color: #FF6B4A; |
| 359 | letter-spacing: -0.26px; | 465 | letter-spacing: -0.26px; |
| 360 | margin-right: 12px; | 466 | margin-right: 12px; |
| 361 | } | 467 | } |
| 362 | image{ | 468 | image{ |
| 363 | width: 40rpx; | 469 | width: 40rpx; |
| 364 | height: 36rpx; | 470 | height: 36rpx; |
| 365 | } | 471 | } |
| 366 | } | 472 | } |
| 367 | } | 473 | } |
| 368 | .size2{ | 474 | .size2{ |
| 369 | view{ | 475 | view{ |
| 370 | display: inline-flex; | 476 | display: inline-flex; |
| 371 | align-items: center; | 477 | align-items: center; |
| 372 | justify-content: center; //字体居中 | 478 | justify-content: center; //字体居中 |
| 373 | margin-right: 12px; | 479 | margin-right: 12px; |
| 374 | margin-bottom: 20px; | 480 | margin-bottom: 20px; |
| 375 | width: 136rpx; | 481 | width: 136rpx; |
| 376 | height: 60rpx; | 482 | height: 60rpx; |
| 377 | background: #F2F2F2; | 483 | background: #F2F2F2; |
| 378 | border-radius: 2px; | 484 | border-radius: 2px; |
| 379 | font-family: PingFangSC-Regular; | 485 | font-family: PingFangSC-Regular; |
| 380 | font-size: 12px; | 486 | font-size: 12px; |
| 381 | color: #666666; | 487 | color: #666666; |
| 382 | } | 488 | } |
| 383 | view:hover{ | 489 | view:hover{ |
| 384 | color: #FF6B4A; | 490 | color: #FF6B4A; |
| 385 | background: rgba(255,107,74,0.15); | 491 | background: rgba(255,107,74,0.15); |
| 386 | } | 492 | } |
| 387 | } | 493 | } |
| 388 | .D3_list{ | 494 | .D3_list{ |
| 389 | margin-bottom: 4px; | 495 | margin-bottom: 4px; |
| 390 | } | 496 | } |
| 391 | .D3_list>view{ | 497 | .D3_list>view{ |
| 392 | display: flex; | 498 | display: flex; |
| 393 | align-content: center; | 499 | align-content: center; |
| 394 | margin-bottom: 10px; | 500 | margin-bottom: 10px; |
| 395 | view{ | 501 | view{ |
| 396 | margin-right: 10px; | 502 | margin-right: 10px; |
| 397 | } | 503 | } |
| 398 | } | 504 | } |
| 399 | .D3_list image{ | 505 | .D3_list image{ |
| 400 | width: 50px; | 506 | width: 50px; |
| 401 | height: 25px; | 507 | height: 25px; |
| 402 | margin-right: 6px; | 508 | margin-right: 6px; |
| 403 | } | 509 | } |
| 404 | .D3_list span{ | 510 | .D3_list span{ |
| 405 | margin-left: 6px; | 511 | margin-left: 6px; |
| 406 | margin-right: 5px; | 512 | margin-right: 5px; |
| 407 | font-family: 'PingFangSC-Regular'; | 513 | font-family: 'PingFangSC-Regular'; |
| 408 | } | 514 | } |
| 409 | .D3_list_jDu{ | 515 | .D3_list_jDu{ |
| 410 | view{ | 516 | view{ |
| 411 | font-family: PingFangSC-Regular; | 517 | font-family: PingFangSC-Regular; |
| 412 | font-size: 10px; | 518 | font-size: 10px; |
| 413 | color: #999999; | 519 | color: #999999; |
| 414 | letter-spacing: -0.19px; | 520 | letter-spacing: -0.19px; |
| 415 | } | 521 | } |
| 522 | .D3_list1{ | ||
| 523 | display: flex; | ||
| 524 | } | ||
| 416 | } | 525 | } |
| 417 | } | 526 | } |
| 418 | .part{ | 527 | .part{ |
| 419 | .part_som{ | 528 | .part_som{ |
| 420 | display: grid; | 529 | display: grid; |
| 421 | justify-content: space-between; | 530 | justify-content: space-between; |
| 422 | grid-template-columns: repeat(4, 22%); | 531 | grid-template-columns: repeat(4, 22%); |
| 423 | grid-row-gap: 12px; | 532 | grid-row-gap: 12px; |
| 424 | margin-bottom: 14px; | 533 | margin-bottom: 14px; |
| 425 | view{ | 534 | view{ |
| 426 | border: 1px solid #F2F2F2; | 535 | border: 1px solid #F2F2F2; |
| 427 | height: 72rpx; | 536 | height: 72rpx; |
| 428 | image{ | 537 | image{ |
| 429 | width: 100%; | 538 | width: 100%; |
| 430 | height: 100%; | 539 | height: 100%; |
| 431 | } | 540 | } |
| 432 | } | 541 | } |
| 433 | view:hover{ | 542 | .size_viewed{ |
| 434 | border: 1px solid #FF6B4A; | 543 | border: 1px solid #FF6B4A; |
| 544 | height: 72rpx; | ||
| 545 | image{ | ||
| 546 | width: 100%; | ||
| 547 | height: 100%; | ||
| 548 | } |
src/pages/frameDetail/frameDetail.vue
| 1 | <template> | File was deleted | |
| 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> |
src/store/modules/detailStandard_k.js
| 1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
| 2 | import request from '../request'; | 2 | import request from '../request'; |
| 3 | 3 | ||
| 4 | const { | 4 | const { |
| 5 | detailStandardList | 5 | detailStandardUrl |
| 6 | } = urlAlias | 6 | } = urlAlias |
| 7 | 7 | ||
| 8 | const state = { | 8 | const state = { |
| 9 | list:[], | 9 | list:[], |
| 10 | }; | 10 | }; |
| 11 | 11 | ||
| 12 | const mutations = { | 12 | const mutations = { |
| 13 | INIT: (state, detailStandardList) => { | 13 | INIT: (state, data) => { |
| 14 | state.detailStandardList = detailStandardList; | 14 | state.list = data; |
| 15 | }, | 15 | }, |
| 16 | }; | 16 | }; |
| 17 | 17 | ||
| 18 | const actions = { | 18 | const actions = { |
| 19 | getList({ commit }, param){ | 19 | fetch({ commit }, param) { |
| 20 | request({ | 20 | request({ |
| 21 | detailStandardList, | 21 | url: detailStandardUrl, |
| 22 | success: (res) => { | 22 | data: param, |
| 23 | 23 | success: (res) => { | |
| 24 | commit('INIT', res.data.data) | 24 | commit('INIT', res.data); |
| 25 | console,log('success') | 25 | }, |
| 26 | }, | 26 | fail: (res) => { |
| 27 | fail: (res) => { | 27 | console.log(" detail fail status === > ", res); |
| 28 | console.log("detail status === > ", res); | 28 | }, |
| 29 | }, | 29 | complete: (res) => { |
| 30 | complete: (res) => { | 30 | console.log(" detail complete status === > ", res); |
| 31 | console.log("detail compete status === > ", res); | 31 | }, |
| 32 | }, | 32 | }) |
| 33 | }) | ||
| 34 | } | 33 | } |
| 35 | } | 34 | } |
| 36 | 35 | ||
| 37 | export default { | 36 | export default { |
| 38 | namespaced: true, | 37 | namespaced: true, |
| 39 | state, | 38 | state, |
| 40 | mutations, | 39 | mutations, |
| 41 | actions, | 40 | actions, |
| 42 | } | 41 | } |
src/store/modules/myOrder.js
| 1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
| 2 | import request from '../request'; | 2 | import request from '../request'; |
| 3 | 3 | ||
| 4 | const { | 4 | const { |
| 5 | orderList | 5 | orderList |
| 6 | } = urlAlias; | 6 | } = urlAlias; |
| 7 | 7 | ||
| 8 | const data = { | 8 | const data = { |
| 9 | data: [ | 9 | data: [ |
| 10 | { | 10 | { |
| 11 | finished_time: null, | 11 | finished_time: null, |
| 12 | is_refound: "0", | 12 | is_refound: "0", |
| 13 | mch_id: "1436019502", | 13 | mch_id: "1436019502", |
| 14 | money_of_dcw: "0", | 14 | money_of_dcw: "0", |
| 15 | money_of_partner: "0", | 15 | money_of_partner: "0", |
| 16 | money_of_shop: "0", | 16 | money_of_shop: "0", |
| 17 | orderJudge: false, | 17 | orderJudge: false, |
| 18 | order_info: { | 18 | order_info: { |
| 19 | address:{ | 19 | address:{ |
| 20 | cityName: "镇江市", | 20 | cityName: "镇江市", |
| 21 | countyName: "丹阳市", | 21 | countyName: "丹阳市", |
| 22 | detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", | 22 | detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", |
| 23 | errMsg: "chooseAddress:ok", | 23 | errMsg: "chooseAddress:ok", |
| 24 | nationalCode: "321181", | 24 | nationalCode: "321181", |
| 25 | postalCode: "212300", | 25 | postalCode: "212300", |
| 26 | provinceName: "江苏省", | 26 | provinceName: "江苏省", |
| 27 | telNumber: "15896379277", | 27 | telNumber: "15896379277", |
| 28 | userName: "点餐汪客服", | 28 | userName: "点餐汪客服", |
| 29 | }, | 29 | }, |
| 30 | cartinfo:['11', '12'], | 30 | cartinfo:['11', '12'], |
| 31 | keyname: "1_1587129366", | 31 | keyname: "1_1587129366", |
| 32 | lefttime: 179995, | 32 | lefttime: 179995, |
| 33 | list:[ | 33 | list:[ |
| 34 | { | 34 | { |
| 35 | cart_id: "11", | 35 | cart_id: "11", |
| 36 | imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", | 36 | imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", |
| 37 | img_index_url: null, | 37 | img_index_url: null, |
| 38 | memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", | 38 | memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", |
| 39 | mp_id: "1", | 39 | mp_id: "1", |
| 40 | nowPrice: 100, | 40 | nowPrice: 100, |
| 41 | num: "2", | 41 | num: "2", |
| 42 | oldPrice: "0", | 42 | oldPrice: "0", |
| 43 | p_discount: "1", | 43 | p_discount: "1", |
| 44 | p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", | 44 | p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", |
| 45 | p_root_index: "1", | 45 | p_root_index: "1", |
| 46 | p_sale_price: "0", | 46 | p_sale_price: "0", |
| 47 | peopleName: "me", | 47 | peopleName: "me", |
| 48 | pics: '', | 48 | pics: '', |
| 49 | pid: "4", | 49 | pid: "4", |
| 50 | sk_id: "38", | 50 | sk_id: "38", |
| 51 | }, | 51 | }, |
| 52 | ], | 52 | ], |
| 53 | orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", | 53 | orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", |
| 54 | total_fee: 100 | 54 | total_fee: 100 |
| 55 | }, | 55 | }, |
| 56 | partner_uid: "0", | 56 | partner_uid: "0", |
| 57 | pay_cate: "2020", | 57 | pay_cate: "2020", |
| 58 | pay_id: "3", | 58 | pay_id: "3", |
| 59 | pay_time: "2020-04-17 21:16:12", | 59 | pay_time: "2020-04-17 21:16:12", |
| 60 | pay_wood_desc: "在【非常戴镜】的微信付款凭证", | 60 | pay_wood_desc: "在【非常戴镜】的微信付款凭证", |
| 61 | pay_wood_id: "fcdj-1-1_1587129366", | 61 | pay_wood_id: "fcdj-1-1_1587129366", |
| 62 | prepay_id: "wx172116124528226bf1a8adad1662456500", | 62 | prepay_id: "wx172116124528226bf1a8adad1662456500", |
| 63 | re_check_staus: "0", | 63 | re_check_staus: "0", |
| 64 | shopid: "0", | 64 | shopid: "0", |
| 65 | split_userid: "0", | 65 | split_userid: "0", |
| 66 | status: "1", | 66 | status: "1", |
| 67 | total_fee: "100", | 67 | total_fee: "100", |
| 68 | uid: "1", | 68 | uid: "1", |
| 69 | } | 69 | } |
| 70 | ], | 70 | ], |
| 71 | msg: "订单列表", | 71 | msg: "订单列表", |
| 72 | status: 0, | 72 | status: 0, |
| 73 | } | 73 | } |
| 74 | 74 | ||
| 75 | const state = { | 75 | const state = { |
| 76 | orderList: [], | 76 | orderList: [], |
| 77 | }; | 77 | }; |
| 78 | 78 | ||
| 79 | const mutations = { | 79 | const mutations = { |
| 80 | INIT: (state, data) => { | 80 | INIT: (state, data) => { |
| 81 | state.orderList = data; | 81 | state.orderList = data; |
| 82 | }, | 82 | }, |
| 83 | }; | 83 | }; |
| 84 | 84 | ||
| 85 | const actions = { | 85 | const actions = { |
| 86 | getList({ commit }, param) { | 86 | getList({ commit }, param) { |
| 87 | request({ | 87 | request({ |
| 88 | url: orderList, | 88 | url: orderList, |
| 89 | data: param, | 89 | data: param, |
| 90 | success: (res) => { | 90 | success: (res) => { |
| 91 | const resData = { | 91 | const resData = { |
| 92 | ...res, | 92 | ...res, |
| 93 | data, | 93 | data, |
| 94 | } | 94 | } |
| 95 | console.log('data.data', resData.data.data); | 95 | console.log('data.data',res); |
| 96 | commit("INIT", resData.data.data); | 96 | commit("INIT", resData.data.data); |
| 97 | }, | 97 | }, |
| 98 | }) | 98 | }) |
| 99 | } | 99 | } |
| 100 | } | 100 | } |
| 101 | 101 | ||
| 102 | export default { | 102 | export default { |
| 103 | namespaced: true, | 103 | namespaced: true, |
| 104 | state, | 104 | state, |
| 105 | mutations, | 105 | mutations, |
| 106 | actions, | 106 | actions, |
| 107 | } | 107 | } |
src/store/modules/test.js
| 1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
| 2 | import request from '../request'; | 2 | import request from '../request'; |
| 3 | 3 | ||
| 4 | const { | 4 | const { |
| 5 | shopList | 5 | shopList |
| 6 | } = urlAlias; | 6 | } = urlAlias; |
| 7 | 7 | ||
| 8 | const state = { | 8 | const state = { |
| 9 | list: [], | 9 | list: [], |
| 10 | }; | 10 | }; |
| 11 | 11 | ||
| 12 | const mutations = { | 12 | const mutations = { |
| 13 | INIT: (state, list) => { | 13 | INIT: (state, data) => { |
| 14 | state.list = list; | 14 | state.list = data; |
| 15 | }, | 15 | }, |
| 16 | }; | 16 | }; |
| 17 | 17 | ||
| 18 | const actions = { | 18 | const actions = { |
| 19 | fetch({ commit }, param) { | 19 | fetch({ commit }, param) { |
| 20 | request({ | 20 | request({ |
| 21 | url: shopList, | 21 | url: shopList, |
| 22 | success: (res) => { | 22 | success: (res) => { |
| 23 | commit('INIT', res.data.data) | 23 | commit('INIT', res.data.data) |
| 24 | }, | 24 | }, |
| 25 | fail: (res) => { | 25 | fail: (res) => { |
| 26 | console.log("fail status === > ", res); | 26 | console.log("fail status === > ", res); |
| 27 | }, | 27 | }, |
| 28 | complete: (res) => { | 28 | complete: (res) => { |
| 29 | console.log("complete status === > ", res); | 29 | console.log("complete status === > ", res); |
| 30 | }, | 30 | }, |
| 31 | }) | 31 | }) |
| 32 | // uni | 32 | // uni |
| 33 | // .request({ | 33 | // .request({ |
| 34 | // url: "https://api.glass.xiuyetang.com/app/prod/list", | 34 | // url: "https://api.glass.xiuyetang.com/app/prod/list", |
| 35 | // method: "post", | 35 | // method: "post", |
| 36 | // data: {}, | 36 | // data: {}, |
| 37 | // header: { | 37 | // header: { |
| 38 | // "Content-Type": "application/x-www-form-urlencoded", | 38 | // "Content-Type": "application/x-www-form-urlencoded", |
| 39 | // }, | 39 | // }, |
| 40 | // timeout: 3000, | 40 | // timeout: 3000, |
| 41 | // withCredentials: false, | 41 | // withCredentials: false, |
| 42 | // success: (res) => { | 42 | // success: (res) => { |
| 43 | // commit('INIT', res.data.data) | 43 | // commit('INIT', res.data.data) |
| 44 | // }, | 44 | // }, |
| 45 | // fail: (res) => { | 45 | // fail: (res) => { |
| 46 | // console.log("fail status === > ", res); | 46 | // console.log("fail status === > ", res); |
| 47 | // }, | 47 | // }, |
| 48 | // complete: (res) => { | 48 | // complete: (res) => { |
| 49 | // console.log("complete status === > ", res); | 49 | // console.log("complete status === > ", res); |
| 50 | // }, | 50 | // }, |
| 51 | // }); | 51 | // }); |
| 52 | }, | 52 | }, |
| 53 | }; | 53 | }; |
| 54 | 54 | ||
| 55 | export default { | 55 | export default { |
| 56 | namespaced: true, | 56 | namespaced: true, |
| 57 | state, | 57 | state, |
| 58 | mutations, | 58 | mutations, |
| 59 | actions, | 59 | actions, |
| 60 | }; | 60 | }; |
| 61 | 61 |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 获取首页商品列表 | 2 | // 获取首页商品列表 |
| 3 | shopList: '/app/prod/list', | 3 | shopList: '/app/prod/list', |
| 4 | 4 | ||
| 5 | // 获取首页商品列表 | 5 | // 获取首页商品列表 |
| 6 | category: '/app/prod/category2', | 6 | category: '/app/prod/category2', |
| 7 | // 获取商品信息 | 7 | // 获取商品信息 |
| 8 | read: '/app/prod/read', | 8 | read: '/app/prod/read', |
| 9 | 9 | ||
| 10 | // 首页 | 10 | // 首页 |
| 11 | shopList: '/app/prod/list', // 获取首页商品列表 | 11 | shopList: '/app/prod/list', // 获取首页商品列表 |
| 12 | category: '/app/prod/category', // 获取首页商品分类 | 12 | category: '/app/prod/category', // 获取首页商品分类 |
| 13 | 13 | ||
| 14 | // 登陆 | 14 | // 登陆 |
| 15 | login: '/app/glass/getOpenId', // 登陆 | 15 | login: '/app/glass/getOpenId', // 登陆 |
| 16 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 | 16 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 |
| 17 | 17 | ||
| 18 | // 我的订单 | 18 | // 我的订单 |
| 19 | orderList: '/app/order/list', // 获取订单列表 | 19 | orderList: '/app/order/list', // 获取订单列表 |
| 20 | 20 | ||
| 21 | // 购物车 | 21 | // 购物车 |
| 22 | cartList: '/app/cart/list', // 获取购物车列表 | 22 | cartList: '/app/cart/list', // 获取购物车列表 |
| 23 | 23 | ||
| 24 | // 我的 | 24 | // 我的 |
| 25 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 | 25 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 |
| 26 | 26 | ||
| 27 | // 镜框选购页 | 27 | // 选购页 |
| 28 | detailStandardList: '/app/prod/read', //获取商品的详细信息 | 28 | detailStandardUrl: '/app/prod/read', //获取商品的详细信息 |
| 29 | 29 | ||
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | export default urlAlias; | 32 | export default urlAlias; |
| 33 | 33 |