刘文博 / gulu-vue

Download as
Browse Code »

Commit 6781a272d8a9085454e6c24e9a6bc7ba5e7b9d15

Authored by BigBoss
2 parents 22e1420fab 01b15d67e9
Exists in master

修改冲突

Showing 2 changed files   Show diff stats
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @6781a27
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <!-- <view 34 <!-- <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> --> 49 </view> -->
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view
295 class="D5_fixed1"
296 @click="consolg(goodInfo.prodIntro1)"
297 >
295 <image src="/static/img/detail/hr.png"></image> 298 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 299 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 300 <image src="/static/img/detail/hr.png"></image>
298 </view> 301 </view>
299 <view class="D5_all" v-html="test"> 302 <view
303 class="D5_all"
304 v-html="test"
305 >
300 <!-- <block> 306 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 307 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 308 </block> -->
303 </view> 309 </view>
304 </view> 310 </view>
305 <!-- 底部菜单 --> 311 <!-- 底部菜单 -->
306 <view class="botton"> 312 <view class="botton">
307 <view 313 <view
308 @tap="toCart()" 314 @tap="toCart()"
309 class="botton_1" 315 class="botton_1"
310 > 316 >
311 <view class="cart_icon"> 317 <view class="cart_icon">
312 <image v-bind:src="imgShop.img"/> 318 <image v-bind:src="imgShop.img" />
313 <text>{{cartNumber}}</text> 319 <text>{{cartNumber}}</text>
314 </view> 320 </view>
315 <view class="botton_image">购物车</view> 321 <view class="botton_image">购物车</view>
316 </view> 322 </view>
317 <view class="botton_2"> 323 <view class="botton_2">
318 <view 324 <view
319 class="botton_input" 325 class="botton_input"
320 @tap="showBottom(1)" 326 @tap="showBottom(1)"
321 >加入购物车</view> 327 >加入购物车</view>
322 <view 328 <view
323 class="botton_now" 329 class="botton_now"
324 330
325 @click="showBottom(2)"
326 >立即购买</view> 331 @click="showBottom(2)"
327 </view> 332 >立即购买</view>
328 </view> 333 </view>
329 <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" 334 </view>
330 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> 335 <BottomSheet
336 v-if="isShowBottom"
337 :isCart="isCart"
338 @addCart="addCart"
339 :pid="pid"
340 :goodInfo="goodInfo"
341 :isShowBottom="isShowBottom"
342 @closeBottom="closeBottom"
331 </view> 343 ></BottomSheet>
332 </template> 344 </view>
333 345 </template>
334 <script> 346
335 import store from '@/store' 347 <script>
336 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'; 348 import store from '@/store'
337 export default { 349 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
338 components:{ 350 export default {
339 BottomSheet, 351 components:{
340 }, 352 BottomSheet,
341 data () { 353 },
342 return { 354 data () {
343 isCart:Number, 355 return {
344 isShowBottom : false, //底部弹窗开关 356 isCart:Number,
345 test: '', 357 isShowBottom : false, //底部弹窗开关
346 goodType: 2, 358
347 screenItems: [ 359 test: '',
348 { current: 0, text: '商品介绍' }, 360 goodType: 2,
349 { current: 1, text: '规格参数' }, 361 screenItems: [
350 { current: 2, text: '售后保障' }, 362 { current: 0, text: '商品介绍' },
351 ], 363 { current: 1, text: '规格参数' },
352 current: 0, 364 { current: 2, text: '售后保障' },
353 starCount: 5, 365 ],
354 parameter: [ 366 current: 0,
355 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 367 starCount: 5,
356 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 368 parameter: [
357 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 369 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
358 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 370 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
359 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 371 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
360 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 372 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
361 ], 373 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
362 esvalue: '宝贝好评率', 374 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
363 introduction: { 375 ],
364 material: '钛合金', 376 esvalue: '宝贝好评率',
365 func: '抗疲劳/防辐射', 377 introduction: {
366 rate: '男/女', 378 material: '钛合金',
367 }, 379 func: '抗疲劳/防辐射',
368 imgAll: '/static/img/detail/d8.png', 380 rate: '男/女',
369 photoes: [ 381 },
370 { value: '日常办公', img: '/static/img/detail/d9.png' }, 382 imgAll: '/static/img/detail/d8.png',
371 { value: '上网', img: '/static/img/detail/d10.png' }, 383 photoes: [
372 { value: '追剧', img: '/static/img/detail/d11.png' }, 384 { value: '日常办公', img: '/static/img/detail/d9.png' },
373 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 385 { value: '上网', img: '/static/img/detail/d10.png' },
374 ], 386 { value: '追剧', img: '/static/img/detail/d11.png' },
375 imgDetail: '/static/img/detail/d13.png', 387 { value: '玩游戏', img: '/static/img/detail/d12.png' },
376 imgShop: { 388 ],
377 img: '/static/tab-cart.png', 389 imgDetail: '/static/img/detail/d13.png',
378 IsShown: false, 390 imgShop: {
379 }, 391 img: '/static/tab-cart.png',
380 tag: { 392 IsShown: false,
381 prod_tag_freesend: [{ 393 },
382 label: '眼镜盒', 394 tag: {
383 value: '262', 395 prod_tag_freesend: [{
384 }], 396 label: '眼镜盒',
385 }, 397 value: '262',
386 398 }],
387 pid: Number, 399 },
388 // 购物车数据 400
389 addCartList: { 401 pid: Number,
390 uid: Number,//用户的唯一识别码 402 // 购物车数据
391 openid: String, 403 addCartList: {
392 mp_id: Number,//使用人 404 uid: Number,//用户的唯一识别码
393 sk_id: Number,//产品的sku_id 405 openid: String,
394 num: Number,//购买数量 406 mp_id: Number,//使用人
395 pid: Number,//产品id 407 sk_id: Number,//产品的sku_id
396 price: Number,//价格 408 num: Number,//购买数量
397 checkedSKU:Object//产品信息 409 pid: Number,//产品id
398 }, 410 price: Number,//价格
399 } 411 checkedSKU:Object//产品信息
400 }, 412 },
401 onLoad: function ({ pid, sk_id: skId }) { 413 }
402 this.pid = pid 414 },
403 // console.log('sk_id=====>',sk_id) 415 onLoad: function ({ pid, sk_id: skId }) {
404 store.dispatch('read/fetch', { 416 this.pid = pid
405 pid, 417 // console.log('sk_id=====>',sk_id)
406 // sk_id: skId, 418 store.dispatch('read/fetch', {
407 }).then(() => { 419 pid,
408 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 420 // sk_id: skId,
409 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 421 }).then(() => {
410 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 422 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
411 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 423 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
412 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 424 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
413 this.parameter[5].slength = `${this.goodInfo.weight}mm` 425 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
414 this.tag = this.goodInfo.tag 426 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
415 this.test = this.goodInfo.prodIntro1 427 this.parameter[5].slength = `${this.goodInfo.weight}mm`
416 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') 428 this.tag = this.goodInfo.tag
417 // addCart 429 this.test = this.goodInfo.prodIntro1
418 this.addCartList.uid = this.$store.state.user.userInfo.uid 430 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
419 this.addCartList.openid = this.$store.state.user.userInfo.openid 431 // addCart
420 this.addCartList.pid = this.goodInfo.pid 432 this.addCartList.uid = this.$store.state.user.userInfo.uid
421 this.addCartList.price = this.goodInfo.priceArea.Min_Price 433 this.addCartList.openid = this.$store.state.user.userInfo.openid
422 }) 434 this.addCartList.pid = this.goodInfo.pid
423 store.dispatch('cart/getCartList') 435 this.addCartList.price = this.goodInfo.priceArea.Min_Price
424 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 436 })
425 }, 437 store.dispatch('cart/getCartList')
426 computed: { 438 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
427 updateGoodType () { 439 },
428 return this.goodType 440 computed: {
429 }, 441 updateGoodType () {
430 goodInfo () { 442 return this.goodType
431 // console.log(this.$store.state.read.goodInfo) 443 },
432 return this.$store.state.read.goodInfo 444 goodInfo () {
433 }, 445 // console.log(this.$store.state.read.goodInfo)
434 cartNumber() { 446 return this.$store.state.read.goodInfo
435 return this.$store.state.cart.cartList.length || 0 447 },
436 }, 448 cartNumber() {
437 }, 449 return this.$store.state.cart.cartList.length || 0
438 methods: { 450 },
439 //底部弹窗开关 451 },
440 showBottom(isCart){ 452 methods: {
441 this.isCart = isCart; 453 // 底部弹窗开关
442 this.isShowBottom = true; 454 showBottom(isCart) {
443 }, 455 this.isCart = isCart
444 closeBottom(){ 456 this.isShowBottom = true
445 this.isShowBottom = false; 457 },
446 }, 458 closeBottom() {
447 // 前往购物车 459 this.isShowBottom = false
448 toCart() { 460 },
449 uni.switchTab({ 461 // 前往购物车
450 url: '/pages/cart/cart', 462 toCart() {
451 success: res => {}, 463 uni.switchTab({
452 fail: (error) => { console.log('跳转购物车失败======>', error) }, 464 url: '/pages/cart/cart',
453 complete: () => { console.log('toCart') }, 465 success: res => {},
454 }) 466 fail: (error) => { console.log('跳转购物车失败======>', error) },
455 }, 467 complete: () => { console.log('toCart') },
456 // 加入购物车 468 })
457 addCart (mp_id,num,checkedSKU,sk_id) { 469 },
458 this.addCartList.mp_id = mp_id 470 // 加入购物车
459 this.addCartList.sk_id = sk_id 471 addCart (mp_id,num,checkedSKU,sk_id) {
460 this.addCartList.num = num 472 this.addCartList.mp_id = mp_id
461 this.addCartList.checkedSKU = checkedSKU 473 this.addCartList.sk_id = sk_id
462 console.log('添加购物车的参数',this.addCartList) 474 this.addCartList.num = num
463 store.dispatch('cart/addCart', this.addCartList).then((res)=>{ 475 this.addCartList.checkedSKU = checkedSKU
464 if(res.code == 1){ 476 console.log('添加购物车的参数',this.addCartList)
465 uni.showToast({ 477 store.dispatch('cart/addCart', this.addCartList).then((res)=>{
466 title:'添加成功~', 478 if(res.code == 1){
467 icon:'success' 479 uni.showToast({
468 }) 480 title:'添加成功~',
469 } 481 icon:'success'
470 // 再次请求购物车接口，实现实时更新 482 })
471 store.dispatch('cart/getCartList', { 483 }
472 uid: this.$store.state.user.userInfo.uid, 484 // 再次请求购物车接口，实现实时更新
473 }) 485 store.dispatch('cart/getCartList', {
474 }) 486 uid: this.$store.state.user.userInfo.uid,
475 }, 487 })
476 goPerchase () { 488 })
477 // switch (this.updateGoodType) { 489
478 // case '1': 490 },
479 console.log('goPerchase') 491 goPerchase () {
480 uni.navigateTo({ 492 // switch (this.updateGoodType) {
481 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 493 // case '1':
482 success: res => {}, 494 console.log('goPerchase')
483 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 495 uni.navigateTo({
484 complete: () => { console.log('goPerchase') }, 496 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
485 }) 497 success: res => {},
486 // break 498 fail: (error) => { console.log('跳转参数选择失败======>', error) },
487 // case '2': 499 complete: () => { console.log('goPerchase') },
488 // uni.navigateTo({ 500 })
489 // url: '../detailStandard/detailStandard_k', 501 // break
490 // success: res => {}, 502 // case '2':
491 // fail: () => {}, 503 // uni.navigateTo({
492 // complete: () => {} 504 // url: '../detailStandard/detailStandard_k',
493 // }) 505 // success: res => {},
494 // break 506 // fail: () => {},
495 // case '3': 507 // complete: () => {}
496 // uni.navigateTo({ 508 // })
497 // url: '../purchaseLenses/purchaseLenses', 509 // break
498 // success: res => {}, 510 // case '3':
499 // fail: () => {}, 511 // uni.navigateTo({
500 // complete: () => {} 512 // url: '../purchaseLenses/purchaseLenses',
501 // }) 513 // success: res => {},
502 // break 514 // fail: () => {},
503 // case '4': 515 // complete: () => {}
504 // uni.navigateTo({ 516 // })
505 // url: '../detailStandard/detailStandard_sun', 517 // break
506 // success: res => {}, 518 // case '4':
507 // fail: () => {}, 519 // uni.navigateTo({
508 // complete: () => {} 520 // url: '../detailStandard/detailStandard_sun',
509 // }) 521 // success: res => {},
510 // break 522 // fail: () => {},
511 // default : 523 // complete: () => {}
512 // break 524 // })
513 // } 525 // break
514 }, 526 // default :
515 // 加入购物车 527 // break
516 // addCart () { 528 // }
517 // store.dispatch('cart/addCart', { 529 },
518 // uid: this.$store.state.user.userInfo.uid, 530 // 加入购物车
519 // openid: this.$store.state.user.userInfo.openid, 531 // addCart () {
520 // pid: this.pid, 532 // store.dispatch('cart/addCart', {
521 // checkedSKU: {}, 533 // uid: this.$store.state.user.userInfo.uid,
522 // }) 534 // openid: this.$store.state.user.userInfo.openid,
523 // store.dispatch('cart/getCartList', { 535 // pid: this.pid,
524 // uid: this.$store.state.user.userInfo.uid, // 用户id 536 // checkedSKU: {},
525 // }) 537 // })
526 // }, 538 // store.dispatch('cart/getCartList', {
527 tabChange (e) { 539 // uid: this.$store.state.user.userInfo.uid, // 用户id
528 if (this.current !== e) { 540 // })
529 this.current = e 541 // },
530 } 542 tabChange (e) {
531 }, 543 if (this.current !== e) {
532 }, 544 this.current = e
533 } 545 }
534 </script> 546 },
535 <style lang='scss'> 547 },
536 .container { 548 }
537 background-color: #f8f8f8; 549 </script>
538 } 550 <style lang='scss'>
539 .D1, 551 .container {
540 .D2, 552 background-color: #f8f8f8;
541 .D3, 553 }
542 .D4, 554 .D1,
543 .D6 { 555 .D2,
544 background: #ffffff; 556 .D3,
545 margin-bottom: 10px; 557 .D4,
546 padding: 8px 20px 8px 20px; 558 .D6 {
547 box-sizing: border-box; 559 background: #ffffff;
548 .swiperImage { 560 margin-bottom: 10px;
549 width: 684rpx; 561 padding: 8px 20px 8px 20px;
550 height: 480rpx; 562 box-sizing: border-box;
551 image { 563 .swiperImage {
552 max-width: 100%; 564 width: 684rpx;
553 max-height: 100%; 565 height: 480rpx;
554 border-radius: 16rpx; 566 image {
555 } 567 max-width: 100%;
556 } 568 max-height: 100%;
557 } 569 border-radius: 16rpx;
558 .D5 { 570 }
559 background: #ffffff; 571 }
560 padding: 8px 20px 8px 20px; 572 }
561 box-sizing: border-box; 573 .D5 {
562 } 574 background: #ffffff;
563 .swiperImage { 575 padding: 8px 20px 8px 20px;
564 width: 100%; 576 box-sizing: border-box;
565 height: 560rpx; 577 }
566 .swiper-item { 578 .swiperImage {
567 width: 100%; 579 width: 100%;
568 image { 580 height: 560rpx;
569 width: 100%; 581 .swiper-item {
570 } 582 width: 100%;
571 } 583 image {
572 } 584 width: 100%;
573 .D1 { 585 }
574 .D1_price { 586 }
575 color: #eb5d3b; 587 }
576 font-size: 18px; 588 .D1 {
577 margin-top: 5px; 589 .D1_price {
578 font-family: "PingFangSC-Semibold"; 590 color: #eb5d3b;
579 display: flex; 591 font-size: 18px;
580 justify-content: space-between; 592 margin-top: 5px;
581 .D1_number { 593 font-family: "PingFangSC-Semibold";
582 color: #999999; 594 display: flex;
583 font-size: 14px; 595 justify-content: space-between;
584 font-family: "PingFangSC-Regular"; 596 .D1_number {
585 } 597 color: #999999;
586 } 598 font-size: 14px;
587 .D1_name { 599 font-family: "PingFangSC-Regular";
588 font-size: 16px; 600 }
589 font-family: "PingFangSC-Semibold"; 601 }
590 margin-top: 5px; 602 .D1_name {
591 .D1_name1 { 603 font-size: 16px;
592 font-weight: bold; 604 font-family: "PingFangSC-Semibold";
593 font-size: 16px; 605 margin-top: 5px;
594 color: #333333; 606 .D1_name1 {
595 } 607 font-weight: bold;
596 } 608 font-size: 16px;
597 .D1_spans { 609 color: #333333;
598 font-size: 10px; 610 }
599 color: #999999; 611 }
600 margin-top: 5px; 612 .D1_spans {
601 span { 613 font-size: 10px;
602 height: 14px; 614 color: #999999;
603 margin-right: 10px; 615 margin-top: 5px;
604 } 616 span {
605 } 617 height: 14px;
606 } 618 margin-right: 10px;
607 .D2 { 619 }
608 font-size: 14px; 620 }
609 font-family: "PingFangSC-Regular"; 621 }
610 view { 622 .D2 {
611 height: 24px; 623 font-size: 14px;
612 } 624 font-family: "PingFangSC-Regular";
613 .D2_span1 { 625 view {
614 color: #999999; 626 height: 24px;
615 } 627 }
616 .D2_span2 { 628 .D2_span1 {
617 color: #333333; 629 color: #999999;
618 } 630 }
619 } 631 .D2_span2 {
620 .D3 { 632 color: #333333;
621 .screenBar { 633 }
622 width: 670rpx; 634 }
623 margin-top: 20rpx; 635 .D3 {
624 margin-bottom: 24rpx; 636 .screenBar {
625 display: flex; 637 width: 670rpx;
626 flex-direction: row; 638 margin-top: 20rpx;
627 justify-content: space-between; 639 margin-bottom: 24rpx;
628 align-items: center; 640 display: flex;
629 font-size: 14px; 641 flex-direction: row;
630 color: #333333; 642 justify-content: space-between;
631 transition: all 0.2s; 643 align-items: center;
632 } 644 font-size: 14px;
633 .screen-item { 645 color: #333333;
634 font-size: 32rpx; 646 transition: all 0.2s;
635 color: #333333; 647 }
636 display: flex; 648 .screen-item {
637 transition: all 0.2s; 649 font-size: 32rpx;
638 .D3_list { 650 color: #333333;
639 margin-bottom: 4px; 651 display: flex;
640 } 652 transition: all 0.2s;
641 .D3_list view { 653 .D3_list {
642 display: flex; 654 margin-bottom: 4px;
643 align-content: center; 655 }
644 font-size: 14px; 656 .D3_list view {
645 color: #333333; 657 display: flex;
646 } 658 align-content: center;
647 .D3_list image { 659 font-size: 14px;
648 width: 50px; 660 color: #333333;
649 height: 25px; 661 }
650 margin-right: 6px; 662 .D3_list image {
651 } 663 width: 50px;
652 .D3_list span { 664 height: 25px;
653 margin-left: 6px; 665 margin-right: 6px;
654 margin-right: 5px; 666 }
655 font-family: "PingFangSC-Regular"; 667 .D3_list span {
656 } 668 margin-left: 6px;
657 } 669 margin-right: 5px;
658 .active { 670 font-family: "PingFangSC-Regular";
659 border-bottom: 4rpx solid #ff6b4a; 671 }
660 } 672 }
661 .customerService { 673 .active {
662 margin-bottom: 90rpx; 674 border-bottom: 4rpx solid #ff6b4a;
663 .serviceItem { 675 }
664 margin-bottom: 32rpx; 676 .customerService {
665 .title { 677 margin-bottom: 90rpx;
666 display: flex; 678 .serviceItem {
667 flex-direction: row; 679 margin-bottom: 32rpx;
668 align-items: center; 680 .title {
669 .titleText { 681 display: flex;
670 font-size: 14px; 682 flex-direction: row;
671 color: #333333; 683 align-items: center;
672 margin-bottom: 12rpx; 684 .titleText {
673 } 685 font-size: 14px;
674 } 686 color: #333333;
675 .itemContent { 687 margin-bottom: 12rpx;
676 font-size: 14px; 688 }
677 color: #999999; 689 }
678 margin-left: 18rpx; 690 .itemContent {
679 } 691 font-size: 14px;
680 } 692 color: #999999;
681 .serviceItem2 { 693 margin-left: 18rpx;
682 margin-left: 18rpx; 694 }
683 margin-bottom: 32rpx; 695 }
684 .titleText { 696 .serviceItem2 {
685 font-size: 14px; 697 margin-left: 18rpx;
686 color: #ff6b4a; 698 margin-bottom: 32rpx;
687 } 699 .titleText {
688 .itemContent { 700 font-size: 14px;
689 font-size: 14px; 701 color: #ff6b4a;
690 color: #999999; 702 }
691 .itemContent-child { 703 .itemContent {
692 margin-bottom: 40rpx; 704 font-size: 14px;
693 .contentTitle { 705 color: #999999;
694 border-bottom: 1px solid #ff6b4a; 706 .itemContent-child {
695 } 707 margin-bottom: 40rpx;
696 } 708 .contentTitle {
697 } 709 border-bottom: 1px solid #ff6b4a;
698 } 710 }
699 } 711 }
700 } 712 }
701 .D4 { 713 }
702 .D4_esvalue { 714 }
703 font-size: 14px; 715 }
704 color: #333333; 716 .D4 {
705 display: flex; 717 .D4_esvalue {
706 justify-content: space-between; 718 font-size: 14px;
707 margin-bottom: 10px; 719 color: #333333;
708 .D4_2 { 720 display: flex;
709 width: 90px; 721 justify-content: space-between;
710 display: flex; 722 margin-bottom: 10px;
711 align-items: center; 723 .D4_2 {
712 justify-content: space-between; 724 width: 90px;
713 } 725 display: flex;
714 } 726 align-items: center;
715 .D4_esvalue view { 727 justify-content: space-between;
716 font-size: 14px; 728 }
717 color: #333333; 729 }
718 font-weight: bold; 730 .D4_esvalue view {
719 } 731 font-size: 14px;
720 .D4_list{ 732 color: #333333;
721 display: grid; 733 font-weight: bold;
722 grid-row-gap: 10px; 734 }
723 grid-column-gap: 4px; 735 .D4_list {
724 } 736 display: grid;
725 .D4_list view { 737 grid-row-gap: 10px;
726 display: flex; 738 grid-column-gap: 4px;
727 justify-content: center; 739 }
728 align-items: center; 740 .D4_list view {
729 font-size: 12px; 741 display: flex;
730 width: 118px; 742 justify-content: center;
731 height: 24px; 743 align-items: center;
732 border-radius: 2px; 744 font-size: 12px;
733 background: #f2f2f2; 745 width: 118px;
734 color: #666666; 746 height: 24px;
735 // letter-spacing: 1px; 747 border-radius: 2px;
736 } 748 background: #f2f2f2;
737 } 749 color: #666666;
738 .D5 { 750 // letter-spacing: 1px;
739 .D5_fixed1 { 751 }
740 display: flex; 752 }
741 justify-content: space-between; 753 .D5 {
742 align-content: center; 754 .D5_fixed1 {
743 margin-bottom: 12px; 755 display: flex;
744 view { 756 justify-content: space-between;
745 font-size: 14px; 757 align-content: center;
746 color: #333333; 758 margin-bottom: 12px;
747 font-weight: bold; 759 view {
748 font-family: "PingFangSC-Medium"; 760 font-size: 14px;
749 line-height: 24px; 761 color: #333333;
750 } 762 font-weight: bold;
751 image { 763 font-family: "PingFangSC-Medium";
752 width: 240rpx; 764 line-height: 24px;
753 height: 3px; 765 }
754 margin-top: 10px; 766 image {
755 } 767 width: 240rpx;
756 } 768 height: 3px;
757 .D5_all { 769 margin-top: 10px;
758 width: 100%; 770 }
759 margin-top: 30rpx; 771 }
760 margin-right: 30rpx; 772 .D5_all {
761 margin-bottom: 180rpx; 773 width: 100%;
762 font-family: "PingFangSC-Regular"; 774 margin-top: 30rpx;
763 // border: #999999 solid 1.5px; 775 margin-right: 30rpx;
764 } 776 margin-bottom: 180rpx;
765 } 777 font-family: "PingFangSC-Regular";
766 .D6 { 778 // border: #999999 solid 1.5px;
767 width: 100%; 779 }
768 height: 430px; 780 }
769 background: #f9f6ed; 781 .D6 {
770 margin-bottom: 74px; 782 width: 100%;
771 view { 783 height: 430px;
772 text-align: center; 784 background: #f9f6ed;
773 } 785 margin-bottom: 74px;
774 .D6_v1 { 786 view {
775 font-weight: bold; 787 text-align: center;
776 } 788 }
777 .D6_v2 { 789 .D6_v1 {
778 font-size: 14px; 790 font-weight: bold;
779 margin-bottom: 30px; 791 }
780 } 792 .D6_v2 {
781 .D6_v5 { 793 font-size: 14px;
782 .D6_v5_s1 { 794 margin-bottom: 30px;
783 font-weight: bold; 795 }
784 } 796 .D6_v5 {
785 .D6_v5_s2 { 797 .D6_v5_s1 {
786 font-size: 14px; 798 font-weight: bold;
787 } 799 }
788 } 800 .D6_v5_s2 {
789 } 801 font-size: 14px;
790 .botton { 802 }
791 position: fixed; 803 }
792 bottom: 0; 804 }
793 height: 74px; 805 .botton {
794 width: 100%; 806 position: fixed;
795 background: #ffffff; 807 bottom: 0;
796 padding: 20px 20px 8px 20px; 808 height: 74px;
797 font-family: "PingFangSC-Regular"; 809 width: 100%;
798 box-sizing: border-box; 810 background: #ffffff;
799 display: flex; 811 padding: 20px 20px 8px 20px;
800 justify-content: space-between; 812 font-family: "PingFangSC-Regular";
801 align-content: center; 813 box-sizing: border-box;
802 .botton_1 { 814 display: flex;
803 width: 20%; 815 justify-content: space-between;
804 height: 100%; 816 align-content: center;
805 text-align: center;
806 color: #989898; 817 .botton_1 {
807 .cart_icon { 818 width: 20%;
808 position: relative; 819 height: 100%;
809 image { 820 text-align: center;
810 821 color: #989898;
811 } 822 .cart_icon {
812 text { 823 position: relative;
813 position: absolute; 824 image {
814 color: white; 825 }
815 font-size: 17px; 826 text {
816 background-color: red; 827 position: absolute;
817 min-height: 24px; 828 color: white;
818 min-width:24px; 829 font-size: 17px;
819 line-height: 24px; 830 background-color: red;
820 right: -12%; 831 min-height: 24px;
821 top: -12px; 832 min-width: 24px;
822 text-align: center; 833 line-height: 24px;
823 border-radius: 24px; 834 right: -12%;
824 padding:2px; 835 top: -12px;
825 } 836 text-align: center;
826 } 837 border-radius: 24px;
827 } 838 padding: 2px;
828 image { 839 }
829 width: 42%; 840 }
830 height: 26px; 841 }
831 } 842 image {
832 .botton_image { 843 width: 42%;
833 font-size: 12px; 844 height: 26px;
834 text-align: center; 845 }
835 } 846 .botton_image {
836 .botton_2 { 847 font-size: 12px;
837 width: 74%; 848 text-align: center;
838 height: 86%; 849 }
839 display: grid; 850 .botton_2 {
840 grid-template-columns: 50% 50%; 851 width: 74%;
841 } 852 height: 86%;
842 .botton_input { 853 display: grid;
843 display: inline-flex; 854 grid-template-columns: 50% 50%;
844 align-items: center; 855 }
845 justify-content: space-around; 856 .botton_input {
846 background: #fff0ec; 857 display: inline-flex;
847 font-size: 16px; 858 align-items: center;
848 color: #ff6b4a; 859 justify-content: space-around;
849 border-radius: 20px 0 0 20px; 860 background: #fff0ec;
850 } 861 font-size: 16px;
851 .botton_now { 862 color: #ff6b4a;
852 display: inline-flex; 863 border-radius: 20px 0 0 20px;
853 align-items: center; 864 }
854 justify-content: space-around; 865 .botton_now {
855 background: #ff6b4a; 866 display: inline-flex;
856 font-size: 16px; 867 align-items: center;
857 color: #ffffff; 868 justify-content: space-around;
858 border-radius: 0 20px 20px 0; 869 background: #ff6b4a;
859 } 870 font-size: 16px;
860 } 871 color: #ffffff;
861 /* 隐藏滚动条 */ 872 border-radius: 0 20px 20px 0;
862 ::-webkit-scrollbar { 873 }
863 width: 0; 874 }
864 height: 0; 875 /* 隐藏滚动条 */
865 color: transparent; 876 ::-webkit-scrollbar {
866 } 877 width: 0;
867 </style> 878 height: 0;
868 879 color: transparent;
880 }