刘文博 / gulu-vue

Download as
Browse Code »

Commit b38a27f3ec7a7674bc160f7f760bcfd0b3b28794

Authored by 范牧
1 parent 42375342ff
Exists in master

详情页样式修改

Showing 5 changed files with 54 additions and 27 deletions   Show diff stats
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @b38a27f
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 class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
306 <view class="botton"> 306 <view class="botton">
307 <view 307 <view
308 @tap="toCart()" 308 @tap="toCart()"
309 class="botton_1" 309 class="botton_1"
310 > 310 >
311 <image v-bind:src="imgShop.img"></image> 311 <view class="cart_icon">
312 <image v-bind:src="imgShop.img"/>
313 <text>{{cartNumber}}</text>
314 </view>
312 <view class="botton_image">购物车</view> 315 <view class="botton_image">购物车</view>
313 </view> 316 </view>
314 <view class="botton_2"> 317 <view class="botton_2">
315 <view 318 <view
316 class="botton_input" 319 class="botton_input"
317 @tap="addCart()" 320 @tap="addCart()"
318 >加入购物车</view> 321 >加入购物车</view>
319 <view 322 <view
320 class="botton_now" 323 class="botton_now"
321 @tap="goPerchase()" 324 @tap="goPerchase()"
322 >立即购买</view> 325 >立即购买</view>
323 </view> 326 </view>
324 </view> 327 </view>
325 </view> 328 </view>
326 </template> 329 </template>
327 330
328 <script> 331 <script>
329 import store from '@/store' 332 import store from '@/store'
330 export default { 333 export default {
331 data () { 334 data () {
332 return { 335 return {
333 test: '', 336 test: '',
334 goodType: 2, 337 goodType: 2,
335 pid: 0, 338 pid: 0,
336 // 购物车数据 339 // 购物车数据
337 addCartList: { 340 addCartList: {
338 mp_id: 0, 341 mp_id: 0,
339 sk_id: 0, 342 sk_id: 0,
340 num: 1, 343 num: 1,
341 price: '', 344 price: '',
342 }, 345 },
343 screenItems: [ 346 screenItems: [
344 { current: 0, text: '商品介绍' }, 347 { current: 0, text: '商品介绍' },
345 { current: 1, text: '规格参数' }, 348 { current: 1, text: '规格参数' },
346 { current: 2, text: '售后保障' }, 349 { current: 2, text: '售后保障' },
347 ], 350 ],
348 current: 0, 351 current: 0,
349 starCount: 5, 352 starCount: 5,
350 parameter: [ 353 parameter: [
351 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 354 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
352 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 355 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
353 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 356 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
354 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 357 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
355 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 358 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
356 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 359 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
357 ], 360 ],
358 esvalue: '宝贝好评率', 361 esvalue: '宝贝好评率',
359 introduction: { 362 introduction: {
360 material: '钛合金', 363 material: '钛合金',
361 func: '抗疲劳/防辐射', 364 func: '抗疲劳/防辐射',
362 rate: '男/女', 365 rate: '男/女',
363 }, 366 },
364 imgAll: '/static/img/detail/d8.png', 367 imgAll: '/static/img/detail/d8.png',
365 photoes: [ 368 photoes: [
366 { value: '日常办公', img: '/static/img/detail/d9.png' }, 369 { value: '日常办公', img: '/static/img/detail/d9.png' },
367 { value: '上网', img: '/static/img/detail/d10.png' }, 370 { value: '上网', img: '/static/img/detail/d10.png' },
368 { value: '追剧', img: '/static/img/detail/d11.png' }, 371 { value: '追剧', img: '/static/img/detail/d11.png' },
369 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 372 { value: '玩游戏', img: '/static/img/detail/d12.png' },
370 ], 373 ],
371 imgDetail: '/static/img/detail/d13.png', 374 imgDetail: '/static/img/detail/d13.png',
372 imgShop: { 375 imgShop: {
373 img: '/static/tab-cart.png', 376 img: '/static/tab-cart.png',
374 IsShown: false, 377 IsShown: false,
375 }, 378 },
376 tag: { 379 tag: {
377 prod_tag_freesend: [{ 380 prod_tag_freesend: [{
378 label: '眼镜盒', 381 label: '眼镜盒',
379 value: '262', 382 value: '262',
380 }], 383 }],
381 }, 384 },
382 } 385 }
383 }, 386 },
384 onLoad: function ({ pid, sk_id: skId }) { 387 onLoad: function ({ pid, sk_id: skId }) {
385 this.pid = pid 388 this.pid = pid
386 // console.log('sk_id=====>',sk_id) 389 // console.log('sk_id=====>',sk_id)
387 store.dispatch('read/fetch', { 390 store.dispatch('read/fetch', {
388 pid, 391 pid,
389 sk_id: skId, 392 sk_id: skId,
390 }).then(() => { 393 }).then(() => {
391 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 394 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
392 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 395 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
393 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 396 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
394 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 397 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
395 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 398 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
396 this.parameter[5].slength = `${this.goodInfo.weight}mm` 399 this.parameter[5].slength = `${this.goodInfo.weight}mm`
397 this.tag = this.goodInfo.tag 400 this.tag = this.goodInfo.tag
398 this.test = this.goodInfo.prodIntro1 401 this.test = this.goodInfo.prodIntro1
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') 402 this.test = this.test.replace('/\<img/gi', '<img style="max-width:100%;height:auto"')
400 // addCart 403 // addCart
401 this.addCartList.price = this.goodInfo.priceArea.Min_Price 404 this.addCartList.price = this.goodInfo.priceArea.Min_Price
402 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id 405 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
403 this.addCartList.mp_id = this.goodInfo.glassData.mp_id 406 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
404 }) 407 })
408 store.dispatch('cart/getCartList')
405 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 409 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
406 }, 410 },
407 computed: { 411 computed: {
408 updateGoodType () { 412 updateGoodType () {
409 return this.goodType 413 return this.goodType
410 }, 414 },
411 goodInfo () { 415 goodInfo () {
412 console.log(this.$store.state.read.goodInfo) 416 console.log(this.$store.state.read.goodInfo)
413 return this.$store.state.read.goodInfo 417 return this.$store.state.read.goodInfo
414 }, 418 },
419 cartNumber() {
420 return this.$store.state.cart.cartList.length || 0
421 },
415 }, 422 },
416 methods: { 423 methods: {
417 // 前往购物车 424 // 前往购物车
418 toCart() { 425 toCart() {
419 uni.switchTab({ 426 uni.switchTab({
420 url: '/pages/cart/cart', 427 url: '/pages/cart/cart',
421 success: res => {}, 428 success: res => {},
422 fail: (error) => { console.log('跳转购物车失败======>', error) }, 429 fail: (error) => { console.log('跳转购物车失败======>', error) },
423 complete: () => { console.log('toCart') }, 430 complete: () => { console.log('toCart') },
424 }) 431 })
425 }, 432 },
426 // 加入购物车 433 // 加入购物车
427 addCart () { 434 addCart () {
428 store.dispatch('cart/addCart', { 435 store.dispatch('cart/addCart', {
429 uid: this.$store.state.user.userInfo.uid, 436 uid: this.$store.state.user.userInfo.uid,
430 openid: this.$store.state.user.userInfo.openid, 437 openid: this.$store.state.user.userInfo.openid,
431 mp_id: this.addCartList.mp_id, 438 mp_id: this.addCartList.mp_id,
432 sk_id: this.addCartList.sk_id, 439 sk_id: this.addCartList.sk_id,
433 num: this.addCartList.num, 440 num: this.addCartList.num,
434 pid: this.pid, 441 pid: this.pid,
435 price: this.addCartList.price, 442 price: this.addCartList.price,
436 }) 443 })
437 // 再次请求购物车接口，实现实时更新 444 // 再次请求购物车接口，实现实时更新
438 store.dispatch('cart/getCartList', { 445 store.dispatch('cart/getCartList', {
439 uid: this.$store.state.user.userInfo.uid, 446 uid: this.$store.state.user.userInfo.uid,
440 }) 447 })
441 }, 448 },
442 goPerchase () { 449 goPerchase () {
443 // switch (this.updateGoodType) { 450 // switch (this.updateGoodType) {
444 // case '1': 451 // case '1':
445 console.log('goPerchase') 452 console.log('goPerchase')
446 uni.navigateTo({ 453 uni.navigateTo({
447 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 454 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
448 success: res => {}, 455 success: res => {},
449 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 456 fail: (error) => { console.log('跳转参数选择失败======>', error) },
450 complete: () => { console.log('goPerchase') }, 457 complete: () => { console.log('goPerchase') },
451 }) 458 })
452 // break 459 // break
453 // case '2': 460 // case '2':
454 // uni.navigateTo({ 461 // uni.navigateTo({
455 // url: '../detailStandard/detailStandard_k', 462 // url: '../detailStandard/detailStandard_k',
456 // success: res => {}, 463 // success: res => {},
457 // fail: () => {}, 464 // fail: () => {},
458 // complete: () => {} 465 // complete: () => {}
459 // }) 466 // })
460 // break 467 // break
461 // case '3': 468 // case '3':
462 // uni.navigateTo({ 469 // uni.navigateTo({
463 // url: '../purchaseLenses/purchaseLenses', 470 // url: '../purchaseLenses/purchaseLenses',
464 // success: res => {}, 471 // success: res => {},
465 // fail: () => {}, 472 // fail: () => {},
466 // complete: () => {} 473 // complete: () => {}
467 // }) 474 // })
468 // break 475 // break
469 // case '4': 476 // case '4':
470 // uni.navigateTo({ 477 // uni.navigateTo({
471 // url: '../detailStandard/detailStandard_sun', 478 // url: '../detailStandard/detailStandard_sun',
472 // success: res => {}, 479 // success: res => {},
473 // fail: () => {}, 480 // fail: () => {},
474 // complete: () => {} 481 // complete: () => {}
475 // }) 482 // })
476 // break 483 // break
477 // default : 484 // default :
478 // break 485 // break
479 // } 486 // }
480 }, 487 },
481 // 加入购物车 488 // 加入购物车
482 // addCart () { 489 // addCart () {
483 // store.dispatch('cart/addCart', { 490 // store.dispatch('cart/addCart', {
484 // uid: this.$store.state.user.userInfo.uid, 491 // uid: this.$store.state.user.userInfo.uid,
485 // openid: this.$store.state.user.userInfo.openid, 492 // openid: this.$store.state.user.userInfo.openid,
486 // pid: this.pid, 493 // pid: this.pid,
487 // checkedSKU: {}, 494 // checkedSKU: {},
488 // }) 495 // })
489 // store.dispatch('cart/getCartList', { 496 // store.dispatch('cart/getCartList', {
490 // uid: this.$store.state.user.userInfo.uid, // 用户id 497 // uid: this.$store.state.user.userInfo.uid, // 用户id
491 // }) 498 // })
492 // }, 499 // },
493 tabChange (e) { 500 tabChange (e) {
494 if (this.current !== e) { 501 if (this.current !== e) {
495 this.current = e 502 this.current = e
496 } 503 }
497 }, 504 },
498 }, 505 },
499 } 506 }
500 </script> 507 </script>
501 <style lang='scss'> 508 <style lang='scss'>
502 .container { 509 .container {
503 background-color: #f8f8f8; 510 background-color: #f8f8f8;
504 } 511 }
505 .D1, 512 .D1,
506 .D2, 513 .D2,
507 .D3, 514 .D3,
508 .D4, 515 .D4,
509 .D6 { 516 .D6 {
510 background: #ffffff; 517 background: #ffffff;
511 margin-bottom: 10px; 518 margin-bottom: 10px;
512 padding: 8px 20px 8px 20px; 519 padding: 8px 20px 8px 20px;
513 box-sizing: border-box; 520 box-sizing: border-box;
514 .swiperImage { 521 .swiperImage {
515 width: 684rpx; 522 width: 684rpx;
516 height: 480rpx; 523 height: 480rpx;
517 image { 524 image {
518 max-width: 100%; 525 max-width: 100%;
519 max-height: 100%; 526 max-height: 100%;
520 border-radius: 16rpx; 527 border-radius: 16rpx;
521 } 528 }
522 } 529 }
523 } 530 }
524 .D5 { 531 .D5 {
525 background: #ffffff; 532 background: #ffffff;
526 padding: 8px 20px 8px 20px; 533 padding: 8px 20px 8px 20px;
527 box-sizing: border-box; 534 box-sizing: border-box;
528 } 535 }
529 .swiperImage { 536 .swiperImage {
530 width: 100%; 537 width: 100%;
531 height: 560rpx; 538 height: 560rpx;
532 .swiper-item { 539 .swiper-item {
533 width: 100%; 540 width: 100%;
534 image { 541 image {
535 width: 100%; 542 width: 100%;
536 } 543 }
537 } 544 }
538 } 545 }
539 .D1 { 546 .D1 {
540 .D1_price { 547 .D1_price {
541 color: #eb5d3b; 548 color: #eb5d3b;
542 font-size: 18px; 549 font-size: 18px;
543 margin-top: 5px; 550 margin-top: 5px;
544 font-family: "PingFangSC-Semibold"; 551 font-family: "PingFangSC-Semibold";
545 display: flex; 552 display: flex;
546 justify-content: space-between; 553 justify-content: space-between;
547 .D1_number { 554 .D1_number {
548 color: #999999; 555 color: #999999;
549 font-size: 14px; 556 font-size: 14px;
550 font-family: "PingFangSC-Regular"; 557 font-family: "PingFangSC-Regular";
551 } 558 }
552 } 559 }
553 .D1_name { 560 .D1_name {
554 font-size: 16px; 561 font-size: 16px;
555 font-family: "PingFangSC-Semibold"; 562 font-family: "PingFangSC-Semibold";
556 margin-top: 5px; 563 margin-top: 5px;
557 .D1_name1 { 564 .D1_name1 {
558 font-weight: bold; 565 font-weight: bold;
559 font-size: 16px; 566 font-size: 16px;
560 color: #333333; 567 color: #333333;
561 } 568 }
562 } 569 }
563 .D1_spans { 570 .D1_spans {
564 font-size: 10px; 571 font-size: 10px;
565 color: #999999; 572 color: #999999;
566 margin-top: 5px; 573 margin-top: 5px;
567 span { 574 span {
568 height: 14px; 575 height: 14px;
569 margin-right: 10px; 576 margin-right: 10px;
570 } 577 }
571 } 578 }
572 } 579 }
573 .D2 { 580 .D2 {
574 font-size: 14px; 581 font-size: 14px;
575 font-family: "PingFangSC-Regular"; 582 font-family: "PingFangSC-Regular";
576 view { 583 view {
577 height: 24px; 584 height: 24px;
578 } 585 }
579 .D2_span1 { 586 .D2_span1 {
580 color: #999999; 587 color: #999999;
581 } 588 }
582 .D2_span2 { 589 .D2_span2 {
583 color: #333333; 590 color: #333333;
584 } 591 }
585 } 592 }
586 .D3 { 593 .D3 {
587 .screenBar { 594 .screenBar {
588 width: 670rpx; 595 width: 670rpx;
589 margin-top: 20rpx; 596 margin-top: 20rpx;
590 margin-bottom: 24rpx; 597 margin-bottom: 24rpx;
591 display: flex; 598 display: flex;
592 flex-direction: row; 599 flex-direction: row;
593 justify-content: space-between; 600 justify-content: space-between;
594 align-items: center; 601 align-items: center;
595 font-size: 14px; 602 font-size: 14px;
596 color: #333333; 603 color: #333333;
597 transition: all 0.2s; 604 transition: all 0.2s;
598 } 605 }
599 .screen-item { 606 .screen-item {
600 font-size: 32rpx; 607 font-size: 32rpx;
601 color: #333333; 608 color: #333333;
602 display: flex; 609 display: flex;
603 transition: all 0.2s; 610 transition: all 0.2s;
604 .D3_list { 611 .D3_list {
605 margin-bottom: 4px; 612 margin-bottom: 4px;
606 } 613 }
607 .D3_list view { 614 .D3_list view {
608 display: flex; 615 display: flex;
609 align-content: center; 616 align-content: center;
610 font-size: 14px; 617 font-size: 14px;
611 color: #333333; 618 color: #333333;
612 } 619 }
613 .D3_list image { 620 .D3_list image {
614 width: 50px; 621 width: 50px;
615 height: 25px; 622 height: 25px;
616 margin-right: 6px; 623 margin-right: 6px;
617 } 624 }
618 .D3_list span { 625 .D3_list span {
619 margin-left: 6px; 626 margin-left: 6px;
620 margin-right: 5px; 627 margin-right: 5px;
621 font-family: "PingFangSC-Regular"; 628 font-family: "PingFangSC-Regular";
622 } 629 }
623 } 630 }
624 .active { 631 .active {
625 border-bottom: 4rpx solid #ff6b4a; 632 border-bottom: 4rpx solid #ff6b4a;
626 } 633 }
627 .customerService { 634 .customerService {
628 margin-bottom: 90rpx; 635 margin-bottom: 90rpx;
629 .serviceItem { 636 .serviceItem {
630 margin-bottom: 32rpx; 637 margin-bottom: 32rpx;
631 .title { 638 .title {
632 display: flex; 639 display: flex;
633 flex-direction: row; 640 flex-direction: row;
634 align-items: center; 641 align-items: center;
635 .titleText { 642 .titleText {
636 font-size: 14px; 643 font-size: 14px;
637 color: #333333; 644 color: #333333;
638 margin-bottom: 12rpx; 645 margin-bottom: 12rpx;
639 } 646 }
640 } 647 }
641 .itemContent { 648 .itemContent {
642 font-size: 14px; 649 font-size: 14px;
643 color: #999999; 650 color: #999999;
644 margin-left: 18rpx; 651 margin-left: 18rpx;
645 } 652 }
646 } 653 }
647 .serviceItem2 { 654 .serviceItem2 {
648 margin-left: 18rpx; 655 margin-left: 18rpx;
649 margin-bottom: 32rpx; 656 margin-bottom: 32rpx;
650 .titleText { 657 .titleText {
651 font-size: 14px; 658 font-size: 14px;
652 color: #ff6b4a; 659 color: #ff6b4a;
653 } 660 }
654 .itemContent { 661 .itemContent {
655 font-size: 14px; 662 font-size: 14px;
656 color: #999999; 663 color: #999999;
657 .itemContent-child { 664 .itemContent-child {
658 margin-bottom: 40rpx; 665 margin-bottom: 40rpx;
659 .contentTitle { 666 .contentTitle {
660 border-bottom: 1px solid #ff6b4a; 667 border-bottom: 1px solid #ff6b4a;
661 } 668 }
662 } 669 }
663 } 670 }
664 } 671 }
665 } 672 }
666 } 673 }
667 .D4 { 674 .D4 {
668 .D4_esvalue { 675 .D4_esvalue {
669 font-size: 14px; 676 font-size: 14px;
670 color: #333333; 677 color: #333333;
671 display: flex; 678 display: flex;
672 justify-content: space-between; 679 justify-content: space-between;
673 margin-bottom: 10px; 680 margin-bottom: 10px;
674 .D4_2 { 681 .D4_2 {
675 width: 90px; 682 width: 90px;
676 display: flex; 683 display: flex;
677 align-items: center; 684 align-items: center;
678 justify-content: space-between; 685 justify-content: space-between;
679 } 686 }
680 } 687 }
681 .D4_esvalue view { 688 .D4_esvalue view {
682 font-size: 14px; 689 font-size: 14px;
683 color: #333333; 690 color: #333333;
684 font-weight: bold; 691 font-weight: bold;
685 } 692 }
686 .D4_list{ 693 .D4_list{
687 display: grid; 694 display: grid;
688 grid-row-gap: 10px; 695 grid-row-gap: 10px;
689 grid-column-gap: 4px; 696 grid-column-gap: 4px;
690 } 697 }
691 .D4_list view { 698 .D4_list view {
692 display: flex; 699 display: flex;
693 justify-content: center; 700 justify-content: center;
694 align-items: center; 701 align-items: center;
695 font-size: 12px; 702 font-size: 12px;
696 width: 118px; 703 width: 118px;
697 height: 24px; 704 height: 24px;
698 border-radius: 2px; 705 border-radius: 2px;
699 background: #f2f2f2; 706 background: #f2f2f2;
700 color: #666666; 707 color: #666666;
701 // letter-spacing: 1px; 708 // letter-spacing: 1px;
702 } 709 }
703 } 710 }
704 .D5 { 711 .D5 {
705 .D5_fixed1 { 712 .D5_fixed1 {
706 display: flex; 713 display: flex;
707 justify-content: space-between; 714 justify-content: space-between;
708 align-content: center; 715 align-content: center;
709 margin-bottom: 12px; 716 margin-bottom: 12px;
710 view { 717 view {
711 font-size: 14px; 718 font-size: 14px;
712 color: #333333; 719 color: #333333;
713 font-weight: bold; 720 font-weight: bold;
714 font-family: "PingFangSC-Medium"; 721 font-family: "PingFangSC-Medium";
715 line-height: 24px; 722 line-height: 24px;
716 } 723 }
717 image { 724 image {
718 width: 240rpx; 725 width: 240rpx;
719 height: 3px; 726 height: 3px;
720 margin-top: 10px; 727 margin-top: 10px;
721 } 728 }
722 } 729 }
723 .D5_all { 730 .D5_all {
724 width: 100%; 731 width: 100%;
725 margin-top: 30rpx; 732 margin-top: 30rpx;
726 margin-right: 30rpx; 733 margin-right: 30rpx;
727 margin-bottom: 180rpx; 734 margin-bottom: 180rpx;
728 font-family: "PingFangSC-Regular"; 735 font-family: "PingFangSC-Regular";
729 // border: #999999 solid 1.5px; 736 // border: #999999 solid 1.5px;
730 } 737 }
731 } 738 }
732 .D6 { 739 .D6 {
733 width: 100%; 740 width: 100%;
734 height: 430px; 741 height: 430px;
735 background: #f9f6ed; 742 background: #f9f6ed;
736 margin-bottom: 74px; 743 margin-bottom: 74px;
737 view { 744 view {
738 text-align: center; 745 text-align: center;
739 } 746 }
740 .D6_v1 { 747 .D6_v1 {
741 font-weight: bold; 748 font-weight: bold;
742 } 749 }
743 .D6_v2 { 750 .D6_v2 {
744 font-size: 14px; 751 font-size: 14px;
745 margin-bottom: 30px; 752 margin-bottom: 30px;
746 } 753 }
747 .D6_v5 { 754 .D6_v5 {
748 .D6_v5_s1 { 755 .D6_v5_s1 {
749 font-weight: bold; 756 font-weight: bold;
750 } 757 }
751 .D6_v5_s2 { 758 .D6_v5_s2 {
752 font-size: 14px; 759 font-size: 14px;
753 } 760 }
754 } 761 }
755 } 762 }
756 .botton { 763 .botton {
757 position: fixed; 764 position: fixed;
758 bottom: 0; 765 bottom: 0;
759 height: 74px; 766 height: 74px;
760 width: 100%; 767 width: 100%;
761 background: #ffffff; 768 background: #ffffff;
762 padding: 20px 20px 8px 20px; 769 padding: 20px 20px 8px 20px;
763 font-family: "PingFangSC-Regular"; 770 font-family: "PingFangSC-Regular";
764 box-sizing: border-box; 771 box-sizing: border-box;
765 display: flex; 772 display: flex;
766 justify-content: space-between; 773 justify-content: space-between;
767 align-content: center; 774 align-content: center;
768 .botton_1 { 775 .botton_1 {
769 width: 20%; 776 width: 20%;
770 height: 100%; 777 height: 100%;
771 text-align: center; 778 text-align: center;
772 color: #989898; 779 color: #989898;
780 .cart_icon {
781 position: relative;
782 image {
783
784 }
785 text {
786 position: absolute;
787 color: white;
788 font-size: 17px;
789 background-color: red;
790 min-height: 24px;
791 min-width:24px;
792 line-height: 24px;
793 right: -12%;
794 top: -12px;
795 text-align: center;
796 border-radius: 24px;
797 padding:2px;
798 }
799 }
773 } 800 }
774 image { 801 image {
775 width: 60%; 802 width: 60%;
776 height: 30px; 803 height: 30px;
777 } 804 }
778 .botton_image { 805 .botton_image {
779 font-size: 12px; 806 font-size: 12px;
780 text-align: center; 807 text-align: center;
781 } 808 }
782 .botton_2 { 809 .botton_2 {
783 width: 74%; 810 width: 74%;
784 height: 86%; 811 height: 86%;
785 display: grid; 812 display: grid;
786 grid-template-columns: 50% 50%; 813 grid-template-columns: 50% 50%;
787 } 814 }
788 .botton_input { 815 .botton_input {
789 display: inline-flex; 816 display: inline-flex;
790 align-items: center; 817 align-items: center;
791 justify-content: space-around; 818 justify-content: space-around;
792 background: #fff0ec; 819 background: #fff0ec;
793 font-size: 16px; 820 font-size: 16px;
794 color: #ff6b4a; 821 color: #ff6b4a;
795 border-radius: 20px 0 0 20px; 822 border-radius: 20px 0 0 20px;
796 } 823 }
797 .botton_now { 824 .botton_now {
798 display: inline-flex; 825 display: inline-flex;
799 align-items: center; 826 align-items: center;
800 justify-content: space-around; 827 justify-content: space-around;
801 background: #ff6b4a; 828 background: #ff6b4a;
802 font-size: 16px; 829 font-size: 16px;
803 color: #ffffff; 830 color: #ffffff;
804 border-radius: 0 20px 20px 0; 831 border-radius: 0 20px 20px 0;
805 } 832 }
806 } 833 }
807 </style> 834 </style>
808 835
src/static/tab-cart.png
Diff comments   View file @b38a27f

2.85 KB | W: | H:

1.47 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/address.js
Diff comments   View file @b38a27f
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias 4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias
5 5
6 const state = { list: [], detail: {}, defaultInfo: {} } 6 const state = { list: [], detail: {}, defaultInfo: {} }
7 7
8 const mutations = { 8 const mutations = {
9 LIST: (state, list) => { 9 LIST: (state, list) => {
10 state.list = list 10 state.list = list
11 }, 11 },
12 DETAILS: (state, details) => { 12 DETAILS: (state, details) => {
13 state.details = details 13 state.details = details
14 }, 14 },
15 DEFAULT: (state, data) => { 15 DEFAULT: (state, data) => {
16 state.defaultInfo = data 16 state.defaultInfo = data
17 } 17 },
18 } 18 }
19 19
20 const actions = { 20 const actions = {
21 edit(mutations, param, success) { 21 edit(mutations, param, success) {
22 return new Promise((resolve) => request({ 22 return new Promise((resolve) => request({
23 url: editAddress, 23 url: editAddress,
24 data: param, 24 data: param,
25 success: () => { 25 success: () => {
26 resolve() 26 resolve()
27 }, 27 },
28 fail: () => { 28 fail: () => {
29 uni.showModal({ 29 uni.showModal({
30 content: '编辑失败', 30 content: '编辑失败',
31 showCancel: false 31 showCancel: false,
32 }) 32 })
33 }, 33 },
34 complete: (res) => { 34 complete: (res) => {
35 console.log('complete status === > ', res) 35 console.log('complete status === > ', res)
36 } 36 },
37 })) 37 }))
38 }, 38 },
39 list({ commit }) { 39 list({ commit }) {
40 request({ 40 request({
41 url: addressList, 41 url: addressList,
42 success: (res) => { 42 success: (res) => {
43 commit('LIST', res.data.data) 43 commit('LIST', res.data.data)
44 }, 44 },
45 fail: () => { 45 fail: () => {
46 uni.showModal({ 46 uni.showModal({
47 content: '获取地址列表失败', 47 content: '获取地址列表失败',
48 showCancel: false 48 showCancel: false,
49 }) 49 })
50 } 50 },
51 }) 51 })
52 }, 52 },
53 details({ commit }, param) { 53 details({ commit }, param) {
54 return new Promise((resolve, reject) => request({ 54 return new Promise((resolve, reject) => request({
55 url: getAddress, 55 url: getAddress,
56 data: param, 56 data: param,
57 success: (res) => { 57 success: (res) => {
58 commit('DETAILS', res.data.data) 58 commit('DETAILS', res.data.data)
59 resolve({ 59 resolve({
60 code: res.data.code, 60 code: res.data.code,
61 data: res.data.data 61 data: res.data.data,
62 }) 62 })
63 }, 63 },
64 fail: () => { 64 fail: () => {
65 uni.showModal({ 65 uni.showModal({
66 content: '获取地址信息失败', 66 content: '获取地址信息失败',
67 showCancel: false 67 showCancel: false,
68 }) 68 })
69 } 69 },
70 })) 70 }))
71 }, 71 },
72 default({ commit }, param) { 72 default({ commit }, param) {
73 return new Promise((resolve, reject) => request({ 73 return new Promise((resolve, reject) => request({
74 url: getDefaultAddress, 74 url: getDefaultAddress,
75 data: param, 75 data: param,
76 success: (res) => { 76 success: (res) => {
77 resolve({ 77 resolve({
78 code: res.data.code, 78 code: res.data.code,
79 data: res.data.data 79 data: res.data.data,
80 }) 80 })
81 }, 81 },
82 fail: () => { 82 fail: () => {
83 uni.showModal({ 83 uni.showModal({
84 content: '获取默认地址信息失败', 84 content: '获取默认地址信息失败',
85 showCancel: false 85 showCancel: false,
86 }) 86 })
87 } 87 },
88 })) 88 }))
89 } 89 },
90 } 90 }
91 91
92 export default { 92 export default {
93 namespaced: true, 93 namespaced: true,
94 state, 94 state,
95 mutations, 95 mutations,
96 actions 96 actions,
97 } 97 }
98 98
src/store/modules/cart.js
Diff comments   View file @b38a27f
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5
6 const state = { 6 const state = {
7 cartList: [] 7 cartList: [],
8 } 8 }
9 9
10 const mutations = { 10 const mutations = {
11 INIT: (state, cartList) => { 11 INIT: (state, cartList) => {
12 state.cartList = cartList 12 state.cartList = cartList
13 }, 13 },
14 DEL: (state, index) => { 14 DEL: (state, index) => {
15 console.log('mutations====>', state.cartList) 15 console.log('mutations====>', state.cartList)
16 state.cartList.splice(index, 1) 16 state.cartList.splice(index, 1)
17 console.log('mutations====>index', index) 17 console.log('mutations====>index', index)
18 // state.cartList=delList 18 // state.cartList=delList
19 }, 19 },
20 MODI: (state, args) => { 20 MODI: (state, args) => {
21 console.log('the num', state.cartList[args.index].num) 21 console.log('the num', state.cartList[args.index].num)
22 console.log('mutations====>isadd', args) 22 console.log('mutations====>isadd', args)
23 state.cartList[args.index].num = args.num 23 state.cartList[args.index].num = args.num
24 console.log('the num', state.cartList[args.index].num) 24 console.log('the num', state.cartList[args.index].num)
25 } 25 },
26 26
27 } 27 }
28 28
29 const actions = { 29 const actions = {
30 // 获取购物车列表
30 getCartList({ commit }, param) { 31 getCartList({ commit }, param) {
31 request({ 32 request({
32 url: cartList, 33 url: cartList,
33 data: param, 34 data: param,
34 success: (res) => { 35 success: (res) => {
35 console.log('cart===>接口数据', res.data.data) 36 console.log('cart===>接口数据', res.data.data)
36 commit('INIT', res.data.data) 37 commit('INIT', res.data.data)
37 }, 38 },
38 fail: (res) => { 39 fail: (res) => {
39 console.log('fail status === > ', res) 40 console.log('fail status === > ', res)
40 }, 41 },
41 complete: (res) => { 42 complete: (res) => {
42 console.log('complete status === > ', res) 43 console.log('complete status === > ', res)
43 } 44 },
44 }) 45 })
45 }, 46 },
46 47 // 修改购物车数量
47 modiCart({ commit }, param) { 48 modiCart({ commit }, param) {
48 const arg = Object.assign({ num: param.num }, param.args) 49 const arg = Object.assign({ num: param.num }, param.args)
49 delete param.args 50 delete param.args
50 request({ 51 request({
51 url: cartModi, 52 url: cartModi,
52 data: param, 53 data: param,
53 success: (res) => { 54 success: (res) => {
54 console.log('modiCart-res=====>', res.data) 55 console.log('modiCart-res=====>', res.data)
55 console.log('modi-parm', param) 56 console.log('modi-parm', param)
56 commit('MODI', arg) 57 commit('MODI', arg)
57 }, 58 },
58 fail: (res) => { 59 fail: (res) => {
59 console.log('fail status === > ', res) 60 console.log('fail status === > ', res)
60 }, 61 },
61 complete: (res) => { 62 complete: (res) => {
62 console.log('complete status === > ', res) 63 console.log('complete status === > ', res)
63 } 64 },
64 }) 65 })
65 }, 66 },
66 67 // 删除购物车商品
67 delCart({ commit }, param) { 68 delCart({ commit }, param) {
68 const arg = param.arg 69 const arg = param.arg
69 delete param.arg 70 delete param.arg
70 request({ 71 request({
71 url: cartDel, 72 url: cartDel,
72 data: param, 73 data: param,
73 success: (res) => { 74 success: (res) => {
74 console.log('del-parm', param) 75 console.log('del-parm', param)
75 console.log('del-myparms==>', arg) 76 console.log('del-myparms==>', arg)
76 commit('DEL', arg) 77 commit('DEL', arg)
77 }, 78 },
78 fail: (res) => { 79 fail: (res) => {
79 console.log('fail status === > ', res) 80 console.log('fail status === > ', res)
80 }, 81 },
81 complete: (res) => { 82 complete: (res) => {
82 console.log('complete status === > ', res) 83 console.log('complete status === > ', res)
83 } 84 },
84 }) 85 })
85 }, 86 },
86 87 // 添加到购物车
87 addCart({ commit }, param) { 88 addCart({ commit }, param) {
88 console.log('请求接口开始') 89 console.log('请求接口开始')
89 request({ 90 request({
90 url: cartAdd, 91 url: cartAdd,
91 data: param, 92 data: param,
92 success: (res) => { 93 success: (res) => {
93 console.log('add-parm', param) 94 console.log('add-parm', param)
94 console.log('addcart===>res.data===>', res.data) 95 console.log('addcart===>res.data===>', res.data)
95 // commit('INIT', res.data.data) 96 // commit('INIT', res.data.data)
96 }, 97 },
97 fail: (res) => { 98 fail: (res) => {
98 console.log('fail status === > ', res) 99 console.log('fail status === > ', res)
99 }, 100 },
100 complete: (res) => { 101 complete: (res) => {
101 console.log('complete status === > ', res) 102 console.log('complete status === > ', res)
102 } 103 },
103 }) 104 })
104 } 105 },
105
106 } 106 }
107 107
108 export default { 108 export default {
109 namespaced: true, 109 namespaced: true,
110 state, 110 state,
111 mutations, 111 mutations,
112 actions 112 actions,
113 } 113 }

2.85 KB