Adam / gulu-vue

Download as
Browse Code »

Commit d1ce60f3df3e4d9db432c5cca16bc591f26fde56

Authored by BigBoss
2 parents 5b513503fb 1df0f126a4
Exists in master

合并冲突

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