刘文博 / gulu-vue

Download as
Browse Code »

Commit 56465b9943164fc07f943ed8b08580d264fc8767

Authored by 尹聃
1 parent 31dea37dac
Exists in master

合并选购页

Showing 1 changed file with 138 additions and 1 deletions   Show diff stats
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @56465b9
1 <template> 1 <template>
2 <view class="container"> 2 <view>
3 <view class="container" v-if="type===2">
3 <view class="detail"> 4 <view class="detail">
4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> 5 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 <view class="detail2"> 6 <view class="detail2">
6 <view class="detail2_name">{{details.data.p_name}}</view> 7 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> 8 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
8 <view class="detail2_price"> 9 <view class="detail2_price">
9 <text>￥{{details.data.p_sale_price*count}}</text> 10 <text>￥{{details.data.p_sale_price*count}}</text>
10 <view class="counter"> 11 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 12 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 13 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 14 <view class="btn" @click="counter(true)">+</view>
14 </view> 15 </view>
15 </view> 16 </view>
16 </view> 17 </view>
17 </view> 18 </view>
18 <view class="choose"> 19 <view class="choose">
19 <view class="colour"> 20 <view class="colour">
20 <view class="colour1" @click="xialachange(0)"> 21 <view class="colour1" @click="xialachange(0)">
21 <text>框架颜色</text> 22 <text>框架颜色</text>
22 <image v-bind:src="isNone[0].img"></image> 23 <image v-bind:src="isNone[0].img"></image>
23 </view> 24 </view>
24 <view class="colour_exp">*{{navData.colour}}</view> 25 <view class="colour_exp">*{{navData.colour}}</view>
25 <view> 26 <view>
26 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> 27 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
27 <view 28 <view
28 v-for="(items,index) in details.data.skuList" 29 v-for="(items,index) in details.data.skuList"
29 :key="index" 30 :key="index"
30 @click="viewChoose(index)" 31 @click="viewChoose(index)"
31 class="colour2_view" 32 class="colour2_view"
32 v-bind:class="{'colour2_viewed': chooseNum == index}" 33 v-bind:class="{'colour2_viewed': chooseNum == index}"
33 > 34 >
34 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> 35 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
35 </view> 36 </view>
36 </view> 37 </view>
37 </view> 38 </view>
38 <hr/> 39 <hr/>
39 </view> 40 </view>
40 <view class="colour"> 41 <view class="colour">
41 <view class="colour1" @click="xialachange(1)"> 42 <view class="colour1" @click="xialachange(1)">
42 <text>镜片颜色</text> 43 <text>镜片颜色</text>
43 <image v-bind:src="isNone[1].img"></image> 44 <image v-bind:src="isNone[1].img"></image>
44 </view> 45 </view>
45 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> 46 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
46 <view v-bind:class="{'colour2_none' : isNone[1].state}"> 47 <view v-bind:class="{'colour2_none' : isNone[1].state}">
47 <view class="jp_colour2"> 48 <view class="jp_colour2">
48 <view 49 <view
49 v-for="(items,index) in jp_colour" 50 v-for="(items,index) in jp_colour"
50 :key="index" 51 :key="index"
51 class="jp_colour2_view" 52 class="jp_colour2_view"
52 > 53 >
53 <image v-bind:src="items.img"></image> 54 <image v-bind:src="items.img"></image>
54 </view> 55 </view>
55 </view> 56 </view>
56 </view> 57 </view>
57 <hr/> 58 <hr/>
58 </view> 59 </view>
59 <view class="colour"> 60 <view class="colour">
60 <view class="colour1" @click="xialachange(2)"> 61 <view class="colour1" @click="xialachange(2)">
61 <text>{{details.data.attrList[0].meta_name}}</text> 62 <text>{{details.data.attrList[0].meta_name}}</text>
62 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> 63 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text>
63 <image v-bind:src="isNone[2].img"></image> 64 <image v-bind:src="isNone[2].img"></image>
64 </view> 65 </view>
65 <view> 66 <view>
66 <view class="colour_exp">*{{navData.split}}</view> 67 <view class="colour_exp">*{{navData.split}}</view>
67 <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> 68 <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}">
68 <view 69 <view
69 v-for="(items,index) in details.data.attrList[0].attr" 70 v-for="(items,index) in details.data.attrList[0].attr"
70 :key="index" 71 :key="index"
71 > 72 >
72 <view 73 <view
73 class="split_colour2" 74 class="split_colour2"
74 @click="splitChoose(index,items.name)" 75 @click="splitChoose(index,items.name)"
75 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" 76 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
76 >{{items.name}}</view> 77 >{{items.name}}</view>
77 </view> 78 </view>
78 </view> 79 </view>
79 </view> 80 </view>
80 <hr/> 81 <hr/>
81 </view> 82 </view>
82 <view class="size"> 83 <view class="size">
83 <view class="size1" @click="xialachange(3)"> 84 <view class="size1" @click="xialachange(3)">
84 <view class="size1_1">框架尺寸</view> 85 <view class="size1_1">框架尺寸</view>
85 <view><image v-bind:src="isNone[3].img"></image></view> 86 <view><image v-bind:src="isNone[3].img"></image></view>
86 </view> 87 </view>
87 <view class="colour"> 88 <view class="colour">
88 <view class="colour_exp">*{{navData.colour}}</view> 89 <view class="colour_exp">*{{navData.colour}}</view>
89 </view> 90 </view>
90 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> 91 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}">
91 <view> 92 <view>
92 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> 93 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
93 <view class="D3_list_jDu"> 94 <view class="D3_list_jDu">
94 <view class="D3_list1"> 95 <view class="D3_list1">
95 <c-progress class="c-progress" :inner_widthProp="300"/> 96 <c-progress class="c-progress" :inner_widthProp="300"/>
96 <text>{{details.data.frame_width}}mm</text> 97 <text>{{details.data.frame_width}}mm</text>
97 </view> 98 </view>
98 <view>{{parameter[0].standard}}</view> 99 <view>{{parameter[0].standard}}</view>
99 </view> 100 </view>
100 </view> 101 </view>
101 <view> 102 <view>
102 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> 103 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
103 <view class="D3_list_jDu"> 104 <view class="D3_list_jDu">
104 <view class="D3_list1"> 105 <view class="D3_list1">
105 <c-progress class="c-progress" :inner_widthProp="190"/> 106 <c-progress class="c-progress" :inner_widthProp="190"/>
106 <view>{{details.data.glass_width}}mm</view> 107 <view>{{details.data.glass_width}}mm</view>
107 </view> 108 </view>
108 <view>{{parameter[1].standard}}</view> 109 <view>{{parameter[1].standard}}</view>
109 </view> 110 </view>
110 </view> 111 </view>
111 <view> 112 <view>
112 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> 113 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
113 <view class="D3_list_jDu"> 114 <view class="D3_list_jDu">
114 <view class="D3_list1"> 115 <view class="D3_list1">
115 <c-progress class="c-progress" :inner_widthProp="210"/> 116 <c-progress class="c-progress" :inner_widthProp="210"/>
116 <view>{{details.data.glass_height}}mm</view> 117 <view>{{details.data.glass_height}}mm</view>
117 </view> 118 </view>
118 <view>{{parameter[2].standard}}</view> 119 <view>{{parameter[2].standard}}</view>
119 </view> 120 </view>
120 </view> 121 </view>
121 <view> 122 <view>
122 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> 123 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
123 <view class="D3_list_jDu"> 124 <view class="D3_list_jDu">
124 125
125 <view class="D3_list1"> 126 <view class="D3_list1">
126 <c-progress class="c-progress" :inner_widthProp="160"/> 127 <c-progress class="c-progress" :inner_widthProp="160"/>
127 <view>{{details.data.nose_width}}mm</view> 128 <view>{{details.data.nose_width}}mm</view>
128 </view> 129 </view>
129 <view>{{parameter[3].standard}}</view> 130 <view>{{parameter[3].standard}}</view>
130 </view> 131 </view>
131 </view> 132 </view>
132 <view> 133 <view>
133 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> 134 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
134 <view class="D3_list_jDu"> 135 <view class="D3_list_jDu">
135 <view class="D3_list1"> 136 <view class="D3_list1">
136 <c-progress class="c-progress" :inner_widthProp="260"/> 137 <c-progress class="c-progress" :inner_widthProp="260"/>
137 <view>{{details.data.leg_long}}mm</view> 138 <view>{{details.data.leg_long}}mm</view>
138 </view> 139 </view>
139 <view>{{parameter[4].standard}}</view> 140 <view>{{parameter[4].standard}}</view>
140 </view> 141 </view>
141 </view> 142 </view>
142 </view> 143 </view>
143 <hr/> 144 <hr/>
144 </view> 145 </view>
145 <view class="part"> 146 <view class="part">
146 <view class="size1" @click="xialachange(4)"> 147 <view class="size1" @click="xialachange(4)">
147 <view class="size1_1">配件</view> 148 <view class="size1_1">配件</view>
148 <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view> 149 <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view>
149 </view> 150 </view>
150 <view class="colour_exp">*0290</view> 151 <view class="colour_exp">*0290</view>
151 <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> 152 <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}">
152 <view 153 <view
153 v-for="(part) in part" 154 v-for="(part) in part"
154 :key="part.key" 155 :key="part.key"
155 v-bind:class="{'size_viewed': part.is_actived}" 156 v-bind:class="{'size_viewed': part.is_actived}"
156 > 157 >
157 <image v-bind:src="part.img"></image> 158 <image v-bind:src="part.img"></image>
158 </view> 159 </view>
159 </view> 160 </view>
160 </view> 161 </view>
161 </view> 162 </view>
162 <view class="buy"> 163 <view class="buy">
163 <view class="buy1">选了镜框，想选镜片？</view> 164 <view class="buy1">选了镜框，想选镜片？</view>
164 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 165 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
165 <view class="buy3"> 166 <view class="buy3">
166 <view class="buy3_1">暂时不选</view> 167 <view class="buy3_1">暂时不选</view>
167 <view class="buy3_2" @click="popArgs">立即去选</view> 168 <view class="buy3_2" @click="popArgs">立即去选</view>
168 </view> 169 </view>
169 </view> 170 </view>
170 <template > 171 <template >
171 <view class="goods-form"> 172 <view class="goods-form">
172 <text class="p1">填写验光数据</text> 173 <text class="p1">填写验光数据</text>
173 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 174 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
174 <view class="picker" > 175 <view class="picker" >
175 <view class="picker-choice"> 176 <view class="picker-choice">
176 <view class="choice-left"> 177 <view class="choice-left">
177 <text class="p11">{{pickerInfoList[0].nameC}}</text> 178 <text class="p11">{{pickerInfoList[0].nameC}}</text>
178 <text class="p12">{{pickerInfoList[0].nameE}}</text> 179 <text class="p12">{{pickerInfoList[0].nameE}}</text>
179 </view> 180 </view>
180 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 181 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
181 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 182 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
182 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 183 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
183 <image src="../../static/detail-tabicon.png" ></image> 184 <image src="../../static/detail-tabicon.png" ></image>
184 </picker> 185 </picker>
185 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 186 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
186 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 187 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
187 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 188 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
188 <image src="../../static/detail-tabicon.png" ></image> 189 <image src="../../static/detail-tabicon.png" ></image>
189 </picker> 190 </picker>
190 </view> 191 </view>
191 </view> 192 </view>
192 <view class="picker" > 193 <view class="picker" >
193 <view class="picker-choice"> 194 <view class="picker-choice">
194 <view class="choice-left"> 195 <view class="choice-left">
195 <text class="p11">{{pickerInfoList[1].nameC}}</text> 196 <text class="p11">{{pickerInfoList[1].nameC}}</text>
196 <text class="p12">{{pickerInfoList[1].nameE}}</text> 197 <text class="p12">{{pickerInfoList[1].nameE}}</text>
197 </view> 198 </view>
198 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 199 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
199 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 200 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
200 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 201 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
201 <image src="../../static/detail-tabicon.png" ></image> 202 <image src="../../static/detail-tabicon.png" ></image>
202 </picker> 203 </picker>
203 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 204 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
204 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 205 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
205 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 206 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
206 <image src="../../static/detail-tabicon.png" ></image> 207 <image src="../../static/detail-tabicon.png" ></image>
207 </picker> 208 </picker>
208 </view> 209 </view>
209 </view> 210 </view>
210 <view class="picker" > 211 <view class="picker" >
211 <view class="picker-choice"> 212 <view class="picker-choice">
212 <view class="choice-left"> 213 <view class="choice-left">
213 <text class="p11">{{pickerInfoList[2].nameC}}</text> 214 <text class="p11">{{pickerInfoList[2].nameC}}</text>
214 <text class="p12">{{pickerInfoList[2].nameE}}</text> 215 <text class="p12">{{pickerInfoList[2].nameE}}</text>
215 </view> 216 </view>
216 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 217 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
217 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 218 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
218 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 219 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
219 <image src="../../static/detail-tabicon.png" ></image> 220 <image src="../../static/detail-tabicon.png" ></image>
220 </picker> 221 </picker>
221 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 222 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
222 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 223 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
223 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 224 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
224 <image src="../../static/detail-tabicon.png" ></image> 225 <image src="../../static/detail-tabicon.png" ></image>
225 </picker> 226 </picker>
226 </view> 227 </view>
227 </view> 228 </view>
228 <view class="picker" > 229 <view class="picker" >
229 <view class="picker-choice"> 230 <view class="picker-choice">
230 <view class="choice-left"> 231 <view class="choice-left">
231 <text class="p11">{{pickerInfoList[3].nameC}}</text> 232 <text class="p11">{{pickerInfoList[3].nameC}}</text>
232 <text class="p12">{{pickerInfoList[3].nameE}}</text> 233 <text class="p12">{{pickerInfoList[3].nameE}}</text>
233 </view> 234 </view>
234 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 235 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
235 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 236 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
236 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 237 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
237 <image src="../../static/detail-tabicon.png" ></image> 238 <image src="../../static/detail-tabicon.png" ></image>
238 </picker> 239 </picker>
239 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 240 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
240 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 241 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
241 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 242 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
242 <image src="../../static/detail-tabicon.png" ></image> 243 <image src="../../static/detail-tabicon.png" ></image>
243 </picker> 244 </picker>
244 </view> 245 </view>
245 </view> 246 </view>
246 <view class="picker" > 247 <view class="picker" >
247 <view class="picker-choice"> 248 <view class="picker-choice">
248 <view class="choice-left"> 249 <view class="choice-left">
249 <text class="p11">{{pickerInfoList[4].nameC}}</text> 250 <text class="p11">{{pickerInfoList[4].nameC}}</text>
250 </view> 251 </view>
251 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 252 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
252 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 253 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
253 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 254 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
254 <image src="../../static/detail-tabicon.png" ></image> 255 <image src="../../static/detail-tabicon.png" ></image>
255 </picker> 256 </picker>
256 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 257 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
257 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 258 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
258 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 259 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
259 <image src="../../static/detail-tabicon.png" ></image> 260 <image src="../../static/detail-tabicon.png" ></image>
260 </picker> 261 </picker>
261 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 262 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
262 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 263 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
263 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 264 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
264 <image src="../../static/detail-tabicon.png" ></image> 265 <image src="../../static/detail-tabicon.png" ></image>
265 </picker> 266 </picker>
266 </view> 267 </view>
267 </view> 268 </view>
268 <view class="confirm"> 269 <view class="confirm">
269 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 270 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
270 <text>确认以上输入信息来源于我的验光数据!</text> 271 <text>确认以上输入信息来源于我的验光数据!</text>
271 </view> 272 </view>
272 </view> 273 </view>
273 274
274 </template> 275 </template>
275 <view class="zhanwei"></view> 276 <view class="zhanwei"></view>
276 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> 277 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
277 </view> 278 </view>
279 <view class="container" v-if="type===4">
280 <view class="detail">
281 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
282 <view class="detail2">
283 <view class="detail2_name">{{details.data.p_name}}</view>
284 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
285 <view class="detail2_price">
286 <span>￥{{details.data.p_sale_price*count}}</span>
287 <view class="counter">
288 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
289 <text>{{count}}</text>
290 <view class="btn" @click="counter(true)">+</view>
291 </view>
292 </view>
293 </view>
294 </view>
295 <view class="choose">
296 <view class="colour">
297 <view class="colour1" @click="xialachange(0)">
298 <text>框架颜色</text>
299 <image v-bind:src="isNone[0].img"></image>
300 </view>
301 <view class="colour_exp">*{{navData.colour}}</view>
302 <view>
303 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
304 <view
305 v-for="(items,index) in details.data.skuList"
306 :key="index"
307 @click="viewChoose(index)"
308 class="colour2_view"
309 v-bind:class="{'colour2_viewed': chooseNum == index}"
310 >
311 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
312 </view>
313 </view>
314 </view>
315 <hr/>
316 </view>
317 <view class="size">
318 <view class="size1" @click="xialachange(1)">
319 <view class="size1_1">框架尺寸</view>
320 <view><image v-bind:src="isNone[1].img"></image></view>
321 </view>
322 <view class="colour">
323 <view class="colour_exp">*{{navData.colour}}</view>
324 </view>
325 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
326 <view>
327 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
328 <view class="D3_list_jDu">
329 <view class="D3_list1">
330 <c-progress class="c-progress" :inner_widthProp="300"/>
331 <text>{{details.data.frame_width}}mm</text>
332 </view>
333 <view>{{parameter[0].standard}}</view>
334 </view>
335 </view>
336 <view>
337 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
338 <view class="D3_list_jDu">
339 <view class="D3_list1">
340 <c-progress class="c-progress" :inner_widthProp="190"/>
341 <view>{{details.data.glass_width}}mm</view>
342 </view>
343 <view>{{parameter[1].standard}}</view>
344 </view>
345 </view>
346 <view>
347 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
348 <view class="D3_list_jDu">
349 <view class="D3_list1">
350 <c-progress class="c-progress" :inner_widthProp="210"/>
351 <view>{{details.data.glass_height}}mm</view>
352 </view>
353 <view>{{parameter[2].standard}}</view>
354 </view>
355 </view>
356 <view>
357 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
358 <view class="D3_list_jDu">
359
360 <view class="D3_list1">
361 <c-progress class="c-progress" :inner_widthProp="160"/>
362 <view>{{details.data.nose_width}}mm</view>
363 </view>
364 <view>{{parameter[3].standard}}</view>
365 </view>
366 </view>
367 <view>
368 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
369 <view class="D3_list_jDu">
370 <view class="D3_list1">
371 <c-progress class="c-progress" :inner_widthProp="260"/>
372 <view>{{details.data.leg_long}}mm</view>
373 </view>
374 <view>{{parameter[4].standard}}</view>
375 </view>
376 </view>
377 <hr/>
378 </view>
379 </view>
380 <view class="part">
381 <view class="size1" @click="xialachange(2)">
382 <view class="size1_1" >配件</view>
383 <view>
384 <span>+￥0.00</span>
385 <image v-bind:src="isNone[2].img"></image>
386 </view>
387 </view>
388 <view class="colour_exp">*0290</view>
389 <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
390 <view
391 v-for="(part) in part"
392 :key="part.key"
393 v-bind:class="{'size_viewed': part.is_actived}"
394 >
395 <image v-bind:src="part.img"></image>
396 </view>
397 </view>
398 </view>
399 </view>
400 <view class="buy">
401 <view class="buy1">选了镜框，想选镜片？</view>
402 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
403 <view class="buy3">
404 <view class="buy3_1">暂时不选</view>
405 <view class="buy3_2" @click="popArgs">立即去选</view>
406 </view>
407 </view>
408 <view class="zhanwei"></view>
409 <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view>
410 </view>
411 </view>
278 </template> 412 </template>
279 <script> 413 <script>
280 import CProgress from '../../components/UniSliper/UniSliper' 414 import CProgress from '../../components/UniSliper/UniSliper'
281 import store from '@/store' 415 import store from '@/store'
282 416
283 export default { 417 export default {
284 components: { 418 components: {
285 CProgress 419 CProgress
286 }, 420 },
287 data(){ 421 data(){
288 return{ 422 return{
423 type: 2,
289 count: 1, 424 count: 1,
290 chooseNum : '', 425 chooseNum : '',
291 isSplit: '' , 426 isSplit: '' ,
292 isNone:[ 427 isNone:[
293 {state: false ,img: '/static/img/detail/xiala.png'}, 428 {state: false ,img: '/static/img/detail/xiala.png'},
294 {state: false ,img: '/static/img/detail/xiala.png'}, 429 {state: false ,img: '/static/img/detail/xiala.png'},
295 {state: false ,img: '/static/img/detail/xiala.png'}, 430 {state: false ,img: '/static/img/detail/xiala.png'},
296 {state: false ,img: '/static/img/detail/xiala.png'}, 431 {state: false ,img: '/static/img/detail/xiala.png'},
297 {state: false ,img: '/static/img/detail/xiala.png'}, 432 {state: false ,img: '/static/img/detail/xiala.png'},
298 ], 433 ],
299 434
300 //传参 435 //传参
301 navData:{ 436 navData:{
302 pid: "26", 437 pid: "26",
303 p_root_index: "4", 438 p_root_index: "4",
304 name:'', 439 name:'',
305 price:'', 440 price:'',
441 type:'',
306 split: '1.56非球面防蓝光', 442 split: '1.56非球面防蓝光',
307 colour: '1.56非球面防蓝光_亚黑色', 443 colour: '1.56非球面防蓝光_亚黑色',
308 }, 444 },
309 445
310 //尺寸 446 //尺寸
311 parameter:[ 447 parameter:[
312 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, 448 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
313 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, 449 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
314 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, 450 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
315 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, 451 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
316 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, 452 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
317 ], 453 ],
318 //镜片颜色 454 //镜片颜色
319 jp_colour:[ 455 jp_colour:[
320 {img:'/static/img/detail/Kuang/sun_jp.png'}, 456 {img:'/static/img/detail/Kuang/sun_jp.png'},
321 {img:'/static/img/detail/Kuang/sun_jp.png'}, 457 {img:'/static/img/detail/Kuang/sun_jp.png'},
322 {img:'/static/img/detail/Kuang/sun_jp.png'}, 458 {img:'/static/img/detail/Kuang/sun_jp.png'},
323 {img:'/static/img/detail/Kuang/sun_jp.png'}, 459 {img:'/static/img/detail/Kuang/sun_jp.png'},
324 {img:'/static/img/detail/Kuang/sun_jp.png'}, 460 {img:'/static/img/detail/Kuang/sun_jp.png'},
325 {img:'/static/img/detail/Kuang/sun_jp.png'} 461 {img:'/static/img/detail/Kuang/sun_jp.png'}
326 ], 462 ],
327 //配饰 463 //配饰
328 part:[ 464 part:[
329 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, 465 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
330 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 466 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
331 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 467 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
332 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 468 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
333 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 469 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
334 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 470 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
335 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 471 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
336 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 472 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
337 ], 473 ],
338 opIsOpen:true, 474 opIsOpen:true,
339 tablist: { 475 tablist: {
340 // read: true, 476 // read: true,
341 // seeLong: false, 477 // seeLong: false,
342 confirm: false 478 confirm: false
343 }, 479 },
344 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 480 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
345 // 度数相关数据 481 // 度数相关数据
346 pickerInfoList:[ 482 pickerInfoList:[
347 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 483 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
348 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 484 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
349 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 485 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
350 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 486 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
351 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 487 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
352 ], 488 ],
353 } 489 }
354 }, 490 },
355 491
356 computed: { 492 computed: {
357 details(){ 493 details(){
358 return this.$store.state.detailStandard_k.list 494 return this.$store.state.detailStandard_k.list
359 }, 495 },
360 }, 496 },
361 onLoad:function(){ 497 onLoad:function(){
362 store.dispatch('detailStandard_k/fetch', { 498 store.dispatch('detailStandard_k/fetch', {
363 uid: "1", 499 uid: "1",
364 pid: "26", 500 pid: "26",
365 p_root_index: "4" 501 p_root_index: "4"
366 }); 502 });
367 }, 503 },
368 methods: { 504 methods: {
369 counter(isadd){ 505 counter(isadd){
370 if(isadd){ 506 if(isadd){
371 this.count++ 507 this.count++
372 }else{ 508 }else{
373 this.count <= 1? this.disabled = true:this.count-- 509 this.count <= 1? this.disabled = true:this.count--
374 } 510 }
375 }, 511 },
376 xialachange(index){ 512 xialachange(index){
377 this.isNone[index].state = !this.isNone[index].state; 513 this.isNone[index].state = !this.isNone[index].state;
378 if(this.isNone[index].state){ 514 if(this.isNone[index].state){
379 this.isNone[index].img = '/static/img/detail/right.png' 515 this.isNone[index].img = '/static/img/detail/right.png'
380 }else{ 516 }else{
381 this.isNone[index].img = '/static/img/detail/xiala.png' 517 this.isNone[index].img = '/static/img/detail/xiala.png'
382 } 518 }
383 }, 519 },
384 colourChange(index,e){ 520 colourChange(index,e){
385 this.navData.colour = e ; //颜色选择 521 this.navData.colour = e ; //颜色选择
386 522
387 }, 523 },
388 viewChoose(index){ 524 viewChoose(index){
389 this.chooseNum = index 525 this.chooseNum = index
390 }, 526 },
391 //折射率选择 527 //折射率选择
392 splitChoose(index,e){ 528 splitChoose(index,e){
393 this.isSplit = index 529 this.isSplit = index
394 this.navData.split = e 530 this.navData.split = e
395 }, 531 },
396 //跳转镜片选购页 532 //跳转镜片选购页
397 popArgs(){ 533 popArgs(){
398 uni.navigateTo({ 534 uni.navigateTo({
399 url: '../detailsChoiceArgs/detailsChoiceArgs', 535 url: '../detailsChoiceArgs/detailsChoiceArgs',
400 success: res => {}, 536 success: res => {},
401 fail: () => {}, 537 fail: () => {},
402 complete: () => {} 538 complete: () => {}
403 }); 539 });
404 }, 540 },
405 //跳转确认订单页及传参 541 //跳转确认订单页及传参
406 popSure(name,price){ 542 popSure(name,price){
407 this.navData.name = name; 543 this.navData.name = name;
408 this.navData.price = price; 544 this.navData.price = price;
545 this.navData.type = this.type;
409 var navData = JSON.stringify(this.navData); 546 var navData = JSON.stringify(this.navData);
410 uni.navigateTo({ 547 uni.navigateTo({
411 url: '../confirmOrder/confirmOrder?index='+navData, 548 url: '../confirmOrder/confirmOrder?index='+navData,
412 }); 549 });
413 console.log(this.navData) 550 console.log(this.navData)
414 }, 551 },
415 //验光表 552 //验光表
416 changeConfirm() { 553 changeConfirm() {
417 this.tablist.confirm = !this.tablist.confirm 554 this.tablist.confirm = !this.tablist.confirm
418 }, 555 },
419 bindPickerChange01: function(e) { 556 bindPickerChange01: function(e) {
420 this.pickerInfoList[0].nameIndex1 = e.target.value 557 this.pickerInfoList[0].nameIndex1 = e.target.value
421 }, 558 },
422 bindPickerChange02: function(e) { 559 bindPickerChange02: function(e) {
423 this.pickerInfoList[0].nameIndex2 = e.target.value 560 this.pickerInfoList[0].nameIndex2 = e.target.value
424 }, 561 },
425 562
426 bindPickerChange11: function(e) { 563 bindPickerChange11: function(e) {
427 this.pickerInfoList[1].nameIndex1 = e.target.value 564 this.pickerInfoList[1].nameIndex1 = e.target.value
428 }, 565 },
429 bindPickerChange12: function(e) { 566 bindPickerChange12: function(e) {
430 this.pickerInfoList[1].nameIndex2 = e.target.value 567 this.pickerInfoList[1].nameIndex2 = e.target.value
431 }, 568 },
432 569
433 bindPickerChange21: function(e) { 570 bindPickerChange21: function(e) {
434 this.pickerInfoList[2].nameIndex1 = e.target.value 571 this.pickerInfoList[2].nameIndex1 = e.target.value
435 }, 572 },
436 bindPickerChange22: function(e) { 573 bindPickerChange22: function(e) {
437 this.pickerInfoList[2].nameIndex2 = e.target.value 574 this.pickerInfoList[2].nameIndex2 = e.target.value
438 }, 575 },
439 576
440 bindPickerChange31: function(e) { 577 bindPickerChange31: function(e) {
441 this.pickerInfoList[3].nameIndex1 = e.target.value 578 this.pickerInfoList[3].nameIndex1 = e.target.value
442 }, 579 },
443 bindPickerChange32: function(e) { 580 bindPickerChange32: function(e) {
444 this.pickerInfoList[3].nameIndex2 = e.target.value 581 this.pickerInfoList[3].nameIndex2 = e.target.value
445 }, 582 },
446 583
447 bindPickerChange41: function(e) { 584 bindPickerChange41: function(e) {
448 this.pickerInfoList[4].nameIndex1 = e.target.value 585 this.pickerInfoList[4].nameIndex1 = e.target.value
449 }, 586 },
450 bindPickerChange42: function(e) { 587 bindPickerChange42: function(e) {
451 this.pickerInfoList[4].nameIndex2 = e.target.value 588 this.pickerInfoList[4].nameIndex2 = e.target.value
452 }, 589 },
453 bindPickerChange43: function(e) { 590 bindPickerChange43: function(e) {
454 this.pickerInfoList[4].nameIndex3 = e.target.value 591 this.pickerInfoList[4].nameIndex3 = e.target.value
455 }, 592 },
456 } 593 }
457 594
458 } 595 }
459 </script> 596 </script>
460 597
461 <style lang="scss"> 598 <style lang="scss">
462 .container{ 599 .container{
463 min-height: 100vh; 600 min-height: 100vh;
464 background: #F2F2F2; 601 background: #F2F2F2;
465 padding-top: 10px; 602 padding-top: 10px;
466 box-sizing: border-box; 603 box-sizing: border-box;
467 } 604 }
468 hr{ 605 hr{
469 border: none; 606 border: none;
470 height: 1px; 607 height: 1px;
471 background: #F2F2F2; 608 background: #F2F2F2;
472 margin-top: 18px; 609 margin-top: 18px;
473 margin-bottom: 10px; 610 margin-bottom: 10px;
474 } 611 }
475 .detail{ 612 .detail{
476 height: 272rpx; 613 height: 272rpx;
477 background: #FFFFFF; 614 background: #FFFFFF;
478 border-radius: 8px; 615 border-radius: 8px;
479 padding: 16px; 616 padding: 16px;
480 box-sizing: border-box; 617 box-sizing: border-box;
481 display: flex; 618 display: flex;
482 justify-content: space-between; 619 justify-content: space-between;
483 align-items: center; 620 align-items: center;
484 } 621 }
485 .detail1{ 622 .detail1{
486 height: 178rpx; 623 height: 178rpx;
487 width: 188rpx; 624 width: 188rpx;
488 image{ 625 image{
489 width: 100%; 626 width: 100%;
490 height: 100%; 627 height: 100%;
491 border-radius: 8px; 628 border-radius: 8px;
492 } 629 }
493 } 630 }
494 .detail2{ 631 .detail2{
495 width: 68%; 632 width: 68%;
496 view{ 633 view{
497 margin-bottom: 6px; 634 margin-bottom: 6px;
498 font-family: PingFangSC-Regular; 635 font-family: PingFangSC-Regular;
499 } 636 }
500 .detail2_name{ 637 .detail2_name{
501 font-size: 14px; 638 font-size: 14px;
502 color: #333333; 639 color: #333333;
503 letter-spacing: -0.26px; 640 letter-spacing: -0.26px;
504 line-height: 18px; 641 line-height: 18px;
505 overflow:hidden; 642 overflow:hidden;
506 text-overflow:ellipsis; 643 text-overflow:ellipsis;
507 display:-webkit-box; 644 display:-webkit-box;
508 -webkit-box-orient:vertical; 645 -webkit-box-orient:vertical;
509 -webkit-line-clamp:2; 646 -webkit-line-clamp:2;
510 } 647 }
511 .detail2_tui{ 648 .detail2_tui{
512 font-size: 10px; 649 font-size: 10px;
513 color: #999999; 650 color: #999999;
514 letter-spacing: -0.19px; 651 letter-spacing: -0.19px;
515 span{ 652 span{
516 margin-right: 10px; 653 margin-right: 10px;
517 } 654 }
518 } 655 }
519 .detail2_price{ 656 .detail2_price{
520 font-size: 14px; 657 font-size: 14px;
521 color: #FF6B4A; 658 color: #FF6B4A;
522 letter-spacing: -0.26px; 659 letter-spacing: -0.26px;
523 } 660 }
524 } 661 }
525 .counter{ 662 .counter{
526 display: flex; 663 display: flex;
527 flex-direction: row; 664 flex-direction: row;
528 justify-content: space-between; 665 justify-content: space-between;
529 font-size: 28rpx; 666 font-size: 28rpx;
530 color: #333333; 667 color: #333333;
531 width: 122rpx; 668 width: 122rpx;
532 float: right; 669 float: right;
533 .btn{ 670 .btn{
534 display: flex; 671 display: flex;
535 justify-content: center; 672 justify-content: center;
536 line-height: 32rpx; 673 line-height: 32rpx;
537 height: 32rpx; 674 height: 32rpx;
538 width: 32rpx; 675 width: 32rpx;
539 background-color: #F2F2F2; 676 background-color: #F2F2F2;
540 color: #CFCFCF; 677 color: #CFCFCF;
541 } 678 }
542 } 679 }
543 .choose{ 680 .choose{
544 background: #FFFFFF; 681 background: #FFFFFF;
545 padding: 16px; 682 padding: 16px;
546 box-sizing: border-box; 683 box-sizing: border-box;
547 margin-top: 10px; 684 margin-top: 10px;
548 border-radius: 8px; 685 border-radius: 8px;
549 .colour1{ 686 .colour1{
550 span{ 687 span{
551 font-family: PingFangSC-Medium; 688 font-family: PingFangSC-Medium;
552 font-size: 16px; 689 font-size: 16px;
553 color: #333333; 690 color: #333333;
554 letter-spacing: -0.3px; 691 letter-spacing: -0.3px;
555 text-align: justify; 692 text-align: justify;
556 line-height: 24px; 693 line-height: 24px;
557 font-weight: bold; 694 font-weight: bold;
558 } 695 }
559 image{ 696 image{
560 float: right; 697 float: right;
561 width: 40rpx; 698 width: 40rpx;
562 height: 36rpx; 699 height: 36rpx;
563 } 700 }
564 .colour1_span2{ 701 .colour1_span2{
565 font-family: PingFangSC-Regular; 702 font-family: PingFangSC-Regular;
566 font-size: 12px; 703 font-size: 12px;
567 color: #666666; 704 color: #666666;
568 margin-left: 10px; 705 margin-left: 10px;
569 font-weight: normal 706 font-weight: normal
570 } 707 }
571 } 708 }
572 .colour_exp{ 709 .colour_exp{
573 font-family: PingFangSC-Regular; 710 font-family: PingFangSC-Regular;
574 font-size: 12px; 711 font-size: 12px;
575 color: #666666; 712 color: #666666;
576 letter-spacing: 0; 713 letter-spacing: 0;
577 margin-top: 10px; 714 margin-top: 10px;
578 margin-bottom: 10px; 715 margin-bottom: 10px;
579 } 716 }
580 .colour2{ 717 .colour2{
581 display: grid; 718 display: grid;
582 grid-template-columns: repeat(5, 17%); 719 grid-template-columns: repeat(5, 17%);
583 justify-content: space-between ; 720 justify-content: space-between ;
584 grid-row-gap: 10px; 721 grid-row-gap: 10px;
585 margin-bottom: 14px; 722 margin-bottom: 14px;
586 .colour2_view{ 723 .colour2_view{
587 border: 1px solid #F2F2F2; 724 border: 1px solid #F2F2F2;
588 image{ 725 image{
589 width: 100rpx; 726 width: 100rpx;
590 height: 60rpx; 727 height: 60rpx;
591 } 728 }
592 } 729 }
593 .colour2_viewed{ 730 .colour2_viewed{
594 border: 1px solid #FF6B4A; 731 border: 1px solid #FF6B4A;
595 image{ 732 image{
596 width: 100rpx; 733 width: 100rpx;
597 height: 60rpx; 734 height: 60rpx;
598 } 735 }
599 } 736 }
600 } 737 }
601 .colour2_none{ 738 .colour2_none{
602 display: none; 739 display: none;
603 } 740 }
604 } 741 }
605 .jp_colour2{ 742 .jp_colour2{
606 display: grid; 743 display: grid;
607 grid-template-columns: repeat(5, 13%); 744 grid-template-columns: repeat(5, 13%);
608 justify-content: start ; 745 justify-content: start ;
609 grid-column-gap: 10px; 746 grid-column-gap: 10px;
610 grid-row-gap: 10px; 747 grid-row-gap: 10px;
611 margin-bottom: 14px; 748 margin-bottom: 14px;
612 .jp_colour2_view{ 749 .jp_colour2_view{
613 border: 1px solid #F2F2F2; 750 border: 1px solid #F2F2F2;
614 image{ 751 image{
615 width: 80rpx; 752 width: 80rpx;
616 height: 80rpx; 753 height: 80rpx;
617 } 754 }
618 } 755 }
619 } 756 }
620 .split{ 757 .split{
621 display: grid; 758 display: grid;
622 grid-template-columns: repeat(2, 45%); 759 grid-template-columns: repeat(2, 45%);
623 grid-column-gap: 10px; 760 grid-column-gap: 10px;
624 grid-row-gap: 10px; 761 grid-row-gap: 10px;
625 margin-top: 10px ; 762 margin-top: 10px ;
626 .split_colour2{ 763 .split_colour2{
627 display: flex; 764 display: flex;
628 justify-content: center; 765 justify-content: center;
629 align-items: center; 766 align-items: center;
630 width: 300rpx; 767 width: 300rpx;
631 height: 60rpx; 768 height: 60rpx;
632 background: #F2F2F2; 769 background: #F2F2F2;
633 border-radius: 2px; 770 border-radius: 2px;
634 font-family: PingFangSC-Regular; 771 font-family: PingFangSC-Regular;
635 font-size: 12px; 772 font-size: 12px;
636 color: #666666; 773 color: #666666;
637 letter-spacing: 0; 774 letter-spacing: 0;
638 text-align: center; 775 text-align: center;
639 } 776 }
640 .split_colour2_actived{ 777 .split_colour2_actived{
641 background: rgba(255,107,74,0.15); 778 background: rgba(255,107,74,0.15);
642 color: #FF6B4A; 779 color: #FF6B4A;
643 } 780 }
644 } 781 }
645 .size,.part{ 782 .size,.part{
646 margin-top:14px; 783 margin-top:14px;
647 .size1{ 784 .size1{
648 display: flex; 785 display: flex;
649 justify-content: space-between; 786 justify-content: space-between;
650 margin-bottom: 10px; 787 margin-bottom: 10px;
651 .size1_1{ 788 .size1_1{
652 font-weight: bold; 789 font-weight: bold;
653 font-family: PingFangSC-Medium; 790 font-family: PingFangSC-Medium;
654 font-size: 16px; 791 font-size: 16px;
655 color: #333333; 792 color: #333333;
656 letter-spacing: -0.3px; 793 letter-spacing: -0.3px;
657 line-height: 24px; 794 line-height: 24px;
658 } 795 }
659 view{ 796 view{
660 span{ 797 span{
661 font-family: PingFangSC-Regular; 798 font-family: PingFangSC-Regular;
662 font-size: 14px; 799 font-size: 14px;
663 color: #FF6B4A; 800 color: #FF6B4A;
664 letter-spacing: -0.26px; 801 letter-spacing: -0.26px;
665 margin-right: 12px; 802 margin-right: 12px;
666 } 803 }
667 image{ 804 image{
668 width: 40rpx; 805 width: 40rpx;
669 height: 36rpx; 806 height: 36rpx;
670 } 807 }
671 } 808 }
672 } 809 }
673 .size2{ 810 .size2{
674 view{ 811 view{
675 display: inline-flex; 812 display: inline-flex;
676 align-items: center; 813 align-items: center;
677 justify-content: center; //字体居中 814 justify-content: center; //字体居中
678 margin-right: 12px; 815 margin-right: 12px;
679 margin-bottom: 20px; 816 margin-bottom: 20px;
680 width: 136rpx; 817 width: 136rpx;
681 height: 60rpx; 818 height: 60rpx;
682 background: #F2F2F2; 819 background: #F2F2F2;
683 border-radius: 2px; 820 border-radius: 2px;
684 font-family: PingFangSC-Regular; 821 font-family: PingFangSC-Regular;
685 font-size: 12px; 822 font-size: 12px;
686 color: #666666; 823 color: #666666;
687 } 824 }
688 view:hover{ 825 view:hover{
689 color: #FF6B4A; 826 color: #FF6B4A;
690 background: rgba(255,107,74,0.15); 827 background: rgba(255,107,74,0.15);
691 } 828 }
692 } 829 }
693 .D3_list{ 830 .D3_list{
694 margin-bottom: 4px; 831 margin-bottom: 4px;
695 } 832 }
696 .D3_list>view{ 833 .D3_list>view{
697 display: flex; 834 display: flex;
698 align-content: center; 835 align-content: center;
699 margin-bottom: 10px; 836 margin-bottom: 10px;
700 view{ 837 view{
701 margin-right: 10px; 838 margin-right: 10px;
702 } 839 }
703 } 840 }
704 .D3_list image{ 841 .D3_list image{
705 width: 50px; 842 width: 50px;
706 height: 25px; 843 height: 25px;
707 margin-right: 6px; 844 margin-right: 6px;
708 } 845 }
709 .D3_list span{ 846 .D3_list span{
710 margin-left: 6px; 847 margin-left: 6px;
711 margin-right: 5px; 848 margin-right: 5px;
712 font-family: 'PingFangSC-Regular'; 849 font-family: 'PingFangSC-Regular';
713 } 850 }
714 .D3_list_jDu{ 851 .D3_list_jDu{
715 view{ 852 view{
716 font-family: PingFangSC-Regular; 853 font-family: PingFangSC-Regular;
717 font-size: 10px; 854 font-size: 10px;
718 color: #999999; 855 color: #999999;
719 letter-spacing: -0.19px; 856 letter-spacing: -0.19px;
720 } 857 }
721 .D3_list1{ 858 .D3_list1{
722 display: flex; 859 display: flex;
723 } 860 }
724 } 861 }
725 } 862 }
726 .part{ 863 .part{
727 .part_som{ 864 .part_som{
728 display: grid; 865 display: grid;
729 justify-content: space-between; 866 justify-content: space-between;
730 grid-template-columns: repeat(4, 22%); 867 grid-template-columns: repeat(4, 22%);
731 grid-row-gap: 12px; 868 grid-row-gap: 12px;
732 margin-bottom: 14px; 869 margin-bottom: 14px;
733 view{ 870 view{
734 border: 1px solid #F2F2F2; 871 border: 1px solid #F2F2F2;
735 height: 72rpx; 872 height: 72rpx;
736 image{ 873 image{
737 width: 100%; 874 width: 100%;
738 height: 100%; 875 height: 100%;
739 } 876 }
740 } 877 }
741 .size_viewed{ 878 .size_viewed{
742 border: 1px solid #FF6B4A; 879 border: 1px solid #FF6B4A;
743 height: 72rpx; 880 height: 72rpx;
744 image{ 881 image{
745 width: 100%; 882 width: 100%;
746 height: 100%; 883 height: 100%;
747 } 884 }
748 } 885 }
749 } 886 }
750 .colour2_none{ 887 .colour2_none{
751 display: none; 888 display: none;
752 } 889 }
753 } 890 }
754 891
755 .buy{ 892 .buy{
756 height: 300rpx; 893 height: 300rpx;
757 background: #FFFFFF ; 894 background: #FFFFFF ;
758 margin-top: 10px; 895 margin-top: 10px;
759 border-radius: 8px; 896 border-radius: 8px;
760 padding-top: 20px; 897 padding-top: 20px;
761 box-sizing: border-box; 898 box-sizing: border-box;
762 margin-bottom: 10px; 899 margin-bottom: 10px;
763 } 900 }
764 .buy1{ 901 .buy1{
765 font-family: PingFangSC-Medium; 902 font-family: PingFangSC-Medium;
766 font-size: 16px; 903 font-size: 16px;
767 font-weight: bold; 904 font-weight: bold;
768 color: #333333; 905 color: #333333;
769 text-align: center; 906 text-align: center;
770 } 907 }
771 .buy2{ 908 .buy2{
772 font-family: PingFangSC-Regular; 909 font-family: PingFangSC-Regular;
773 font-size: 12px; 910 font-size: 12px;
774 color: #999999; 911 color: #999999;
775 text-align: center; 912 text-align: center;
776 margin: 10px; 913 margin: 10px;
777 } 914 }
778 .buy3{ 915 .buy3{
779 font-family: PingFangSC-Regular; 916 font-family: PingFangSC-Regular;
780 font-size: 16px; 917 font-size: 16px;
781 display: flex; 918 display: flex;
782 justify-content: center; 919 justify-content: center;
783 margin-top: 14px; 920 margin-top: 14px;
784 view{ 921 view{
785 border-radius: 20px; 922 border-radius: 20px;
786 width: 240rpx; 923 width: 240rpx;
787 height: 80rpx; 924 height: 80rpx;
788 display: flex; 925 display: flex;
789 justify-content: center; 926 justify-content: center;
790 align-items: center; 927 align-items: center;
791 } 928 }
792 .buy3_1{ 929 .buy3_1{
793 margin-right: 20px; 930 margin-right: 20px;
794 background: rgba(255,107,74,0.15); 931 background: rgba(255,107,74,0.15);
795 color: #FF6B4A ; 932 color: #FF6B4A ;
796 } 933 }
797 .buy3_2{ 934 .buy3_2{
798 background: #FF6B4A; 935 background: #FF6B4A;
799 color: #FFFFFF ; 936 color: #FFFFFF ;
800 } 937 }
801 } 938 }
802 .zhanwei{ 939 .zhanwei{
803 background: #F2F2F2; 940 background: #F2F2F2;
804 height: 200rpx; 941 height: 200rpx;
805 } 942 }
806 .goods-form { 943 .goods-form {
807 display: flex; 944 display: flex;
808 flex-direction: column; 945 flex-direction: column;
809 align-items: center; 946 align-items: center;
810 justify-content: center; 947 justify-content: center;
811 background-color: #fff; 948 background-color: #fff;
812 width: 100%; 949 width: 100%;
813 padding-top:20px; 950 padding-top:20px;
814 padding-bottom:20px; 951 padding-bottom:20px;
815 box-sizing: border-box; 952 box-sizing: border-box;
816 953
817 .p1 { 954 .p1 {
818 font-size: 16px; 955 font-size: 16px;
819 color: #333333; 956 color: #333333;
820 letter-spacing: -0.3px; 957 letter-spacing: -0.3px;
821 text-align: justify; 958 text-align: justify;
822 line-height: 24px; 959 line-height: 24px;
823 margin: 4px 0; 960 margin: 4px 0;
824 } 961 }
825 .p2 { 962 .p2 {
826 font-size: 12px; 963 font-size: 12px;
827 color: #999999; 964 color: #999999;
828 letter-spacing: -0.23px; 965 letter-spacing: -0.23px;
829 margin-bottom: 18rpx; 966 margin-bottom: 18rpx;
830 } 967 }
831 image{ 968 image{
832 width: 28rpx; 969 width: 28rpx;
833 height: 26rpx; 970 height: 26rpx;
834 } 971 }
835 .confirm { 972 .confirm {
836 display: flex; 973 display: flex;
837 align-items: center; 974 align-items: center;
838 font-size: 12px; 975 font-size: 12px;
839 color: #666666; 976 color: #666666;
840 letter-spacing: -0.23px; 977 letter-spacing: -0.23px;
841 width: 684rpx; 978 width: 684rpx;
842 image{ 979 image{
843 margin-right:25rpx; 980 margin-right:25rpx;
844 } 981 }
845 } 982 }
846 .picker{ 983 .picker{
847 display: flex; 984 display: flex;
848 flex-direction: column; 985 flex-direction: column;
849 justify-content: center; 986 justify-content: center;
850 align-items: center; 987 align-items: center;
851 width: 100%; 988 width: 100%;
852 image{ 989 image{
853 width: 10px; 990 width: 10px;
854 height: 10px; 991 height: 10px;
855 margin-right: 5px; 992 margin-right: 5px;
856 } 993 }
857 .picker-choice{ 994 .picker-choice{
858 display: flex; 995 display: flex;
859 width: 684rpx; 996 width: 684rpx;
860 align-items: center; 997 align-items: center;
861 margin-bottom: 40rpx; 998 margin-bottom: 40rpx;
862 .choice-left{ 999 .choice-left{
863 width: 210rpx; 1000 width: 210rpx;
864 .p11 { 1001 .p11 {
865 font-size: 14px; 1002 font-size: 14px;
866 color: #333333; 1003 color: #333333;
867 letter-spacing: -0.26px; 1004 letter-spacing: -0.26px;
868 text-align: justify; 1005 text-align: justify;
869 line-height: 24px; 1006 line-height: 24px;
870 // margin-right: 10px; 1007 // margin-right: 10px;
871 } 1008 }
872 .p12 { 1009 .p12 {
873 font-size: 10px; 1010 font-size: 10px;
874 color: #3F3F3F; 1011 color: #3F3F3F;
875 letter-spacing: -0.19px; 1012 letter-spacing: -0.19px;
876 text-align: justify; 1013 text-align: justify;
877 line-height: 24px; 1014 line-height: 24px;
878 } 1015 }
879 1016
880 1017
881 } 1018 }
882 .p13 { 1019 .p13 {
883 font-size: 10px; 1020 font-size: 10px;
884 color: #999999; 1021 color: #999999;
885 letter-spacing: -0.19px; 1022 letter-spacing: -0.19px;
886 margin-right: 10px; 1023 margin-right: 10px;
887 } 1024 }
888 .p13-date { 1025 .p13-date {
889 font-size: 10px; 1026 font-size: 10px;
890 color: #999999; 1027 color: #999999;
891 letter-spacing: -0.19px; 1028 letter-spacing: -0.19px;
892 margin-right: 5px; 1029 margin-right: 5px;
893 } 1030 }
894 .p14 { 1031 .p14 {
895 font-size: 14px; 1032 font-size: 14px;
896 color: #666666; 1033 color: #666666;
897 letter-spacing: -0.26px; 1034 letter-spacing: -0.26px;
898 text-align: center; 1035 text-align: center;
899 width: 124rpx; 1036 width: 124rpx;
900 border-bottom: 1px solid #CFCFCF; 1037 border-bottom: 1px solid #CFCFCF;
901 } 1038 }
902 1039
903 } 1040 }
904 } 1041 }
905 } 1042 }
906 .button{ 1043 .button{
907 position: fixed; 1044 position: fixed;
908 bottom: 0; 1045 bottom: 0;
909 width:100%; 1046 width:100%;
910 height: 112rpx; 1047 height: 112rpx;
911 background: #FF6B4A 100%; 1048 background: #FF6B4A 100%;
912 view{ 1049 view{
913 color: #FFFFFF; 1050 color: #FFFFFF;
914 height: 100%; 1051 height: 100%;
915 display: flex; 1052 display: flex;
916 justify-content: center; 1053 justify-content: center;
917 align-items: center; 1054 align-items: center;
918 font-family: PingFangSC-Regular; 1055 font-family: PingFangSC-Regular;
919 font-size: 16px; 1056 font-size: 16px;
920 } 1057 }
921 } 1058 }
922 </style> 1059 </style>