Commit db0f29a7d96590fa7c31ec7037ea6a19b02f4ceb
1 parent
c206f223
积分商城商品详情页新增商品规格模块
Showing
2 changed files
with
55 additions
and
1 deletions
src/pages/goodDetails/goodDetails.less
| ... | ... | @@ -150,6 +150,50 @@ |
| 150 | 150 | margin-top:10px; |
| 151 | 151 | } |
| 152 | 152 | } |
| 153 | + /**商品规格*/ | |
| 154 | + .item_sku_box{ | |
| 155 | + margin-top:30px; | |
| 156 | + .item_sku{ | |
| 157 | + font-size: 26px; | |
| 158 | + font-weight: 300; | |
| 159 | + display: flex; | |
| 160 | + margin:0 30px; | |
| 161 | + .left{ | |
| 162 | + color: #777777; | |
| 163 | + margin-right:10px; | |
| 164 | + width: 204px; | |
| 165 | + height:72px; | |
| 166 | + line-height: 72px; | |
| 167 | + background: #FEF9F9; | |
| 168 | + text-align: center; | |
| 169 | + display: -webkit-box; | |
| 170 | + -webkit-line-clamp: 1; | |
| 171 | + /*! autoprefixer: off */ | |
| 172 | + -webkit-box-orient: vertical; | |
| 173 | + /*! autoprefixer: on */ | |
| 174 | + text-overflow: ellipsis; | |
| 175 | + overflow: hidden; | |
| 176 | + } | |
| 177 | + .right{ | |
| 178 | + width:435px; | |
| 179 | + height:72px; | |
| 180 | + line-height: 72px; | |
| 181 | + display: -webkit-box; | |
| 182 | + -webkit-line-clamp: 1; | |
| 183 | + /*! autoprefixer: off */ | |
| 184 | + -webkit-box-orient: vertical; | |
| 185 | + /*! autoprefixer: on */ | |
| 186 | + text-overflow: ellipsis; | |
| 187 | + overflow: hidden; | |
| 188 | + background: #FEF9F9; | |
| 189 | + flex: 1; | |
| 190 | + color:#333333; | |
| 191 | + span{ | |
| 192 | + margin-left: 60px; | |
| 193 | + } | |
| 194 | + } | |
| 195 | + } | |
| 196 | + } | |
| 153 | 197 | /**相似商品*/ |
| 154 | 198 | .column-list-box{ |
| 155 | 199 | margin-top:40px; | ... | ... |
src/pages/goodDetails/goodDetails.vue
| ... | ... | @@ -65,6 +65,16 @@ |
| 65 | 65 | <div v-else-if="goodsInfo && goodsInfo.content && goodsInfo.content.length && goodsInfo.shop_type ==1" class="good-desc html_box"> |
| 66 | 66 | <img v-for="(item,index) in goodsInfo.content" :key=" 't' + index" :src="item" alt="商品图片"/> |
| 67 | 67 | </div> |
| 68 | + <!-- 商品规格 --> | |
| 69 | + <div v-if="goodsInfo && goodsInfo.attr" class="good-title"> | |
| 70 | + <span class="left"></span>商品规格<span class="right"></span> | |
| 71 | + </div> | |
| 72 | + <div v-if="goodsInfo && goodsInfo.attr" class="item_sku_box"> | |
| 73 | + <div v-for="(item,index) in goodsInfo.attr" :key="index" class="item_sku"> | |
| 74 | + <div class="left">{{item.k}}</div> | |
| 75 | + <div class="right"><span>{{item.v}}</span></div> | |
| 76 | + </div> | |
| 77 | + </div> | |
| 68 | 78 | <div class="good-title"> |
| 69 | 79 | <span class="left"></span>兑换规则<span class="right"></span> |
| 70 | 80 | </div> |
| ... | ... | @@ -275,7 +285,7 @@ export default { |
| 275 | 285 | jumpToConfirmOrderPage (item) { |
| 276 | 286 | if ((parseInt(this.goodsInfo.stock) > -1 && parseInt(this.stepperValue) > parseInt(this.goodsInfo.stock)) || parseInt(this.stepperValue) > 999) { |
| 277 | 287 | Toast("数量超出库存范围~") |
| 278 | - }else{ | |
| 288 | + } else { | |
| 279 | 289 | // 判断APP内 |
| 280 | 290 | if (this.isCNLive.value) { |
| 281 | 291 | // （判断app内是否有该方法）type=2为积分加现金模式 | ... | ... |