panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

多规格图片选择业务功能开发

master
dy-hu 8 months ago
parent
d7e4d5d262
commit
40f3f77a28
2 changed files with 35 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      pages_category_page1/goodsModule/components/GoodSkuSelect.vue
  2. 20
      pages_category_page1/goodsModule/goodsDetails.vue

78
pages_category_page1/goodsModule/components/GoodSkuSelect.vue
View File

@ -39,7 +39,7 @@
class="fs26 font-color-333"
v-if="skuRowItem['nameCode']"
>{{ skuRowItem.skuName }}</label>
<view class="colorName-box">
<!-- <view class="colorName-box">
<view
class="pad-bot-30"
v-for="(skuColItem, skuColIndex) in skuRowItem.values"
@ -53,61 +53,14 @@
{{ skuColItem.skuValue }}
</view>
</view>
</view>
</view>-->
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">浅绿色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image-select" :src="imageUrl"/>
<label class="sku-name">深灰色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">黄色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">蓝色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">军绿色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">黑色</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">黑色1</label>
</view>
</view>
<view class="sku-box">
<view class="sku-image-item">
<image class="sku-image" :src="imageUrl"/>
<label class="sku-name">黑色2</label>
<view class="sku-box" v-for="(skuColItem, skuColIndex) in skuRowItem.values"
:key="skuColIndex">
<view class="sku-image-item" @click="handleClickSkuItem(skuRowItem['nameCode'], skuColItem.valueCode)">
<image class="sku-image" :class="{'sku-image-select' : selectedAttr[skuRowItem['nameCode']] === skuColItem.valueCode}"
:src="skuColItem.image ? skuColItem.image : defaultImageUrl" @error="onImageError"/>
<label class="sku-name" :class="{'sku-name-select' : selectedAttr[skuRowItem['nameCode']] === skuColItem.valueCode}"> {{ skuColItem.skuValue }}</label>
</view>
</view>
</scroll-view>
@ -284,7 +237,7 @@ export default {
disableSelectList: [true, true, true],
agingMoneyList: ["0.00", "0.00", "0.00"]
},
imageUrl: 'http://36.138.125.206:8081/ceres-local-file/file/2023/05/4237d7abe33d45a485a4b81c865e55bb_9344949001256.png'
defaultImageUrl: 'http://36.138.125.206:8081/ceres-local-file/image/sku_defualt.png'
}
},
props: {
@ -590,6 +543,10 @@ export default {
aliAgingObj.agingMoneyList[2] = (parseInt((skuPrice / 12 * 100) / 100 + '')).toFixed(2) + ""
}
},
onImageError(e) {
e.target.src = 'http://36.138.125.206:8081/ceres-local-file/image/sku_defualt.png';
}
}
}
</script>
@ -859,7 +816,7 @@ export default {
height: 86rpx;
border: 2px solid #252744;
border-radius: 20rpx;
margin-right: 30rpx;
//margin-right: 30rpx;
}
.sku-name{
@ -867,10 +824,17 @@ export default {
color: #595B6B;
margin-top: 8rpx;
}
.sku-name-select{
font-size: 24rpx;
color: #252744;
margin-top: 8rpx;
}
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
margin-top: 12rpx;
}
</style>

20
pages_category_page1/goodsModule/goodsDetails.vue
View File

@ -93,10 +93,11 @@
<view class="sku-image-box">
<!--规格图片遍历处理最大只显示4个-->
<image class="sku-image" :src="imageUrl"/>
<image class="sku-image" :src="imageUrl"/>
<image class="sku-image-select" :src="imageUrl"/>
<image class="sku-image" :src="imageUrl"/>
<block v-for="(skuImgItem,skuImgIndex) in productData.names[0].values" :key="skuImgIndex">
<image class="sku-image" :class="{'sku-image-select' : skuImgItem.valueCode === selectedSku.valueCodes}" @click="handleClickSku(productData.names[0].nameCode, skuImgItem.valueCode)"
:src="skuImgItem.image ? skuImgItem.image: defaultImageUrl" @error="onImageError"/>
</block>
<image class="sku-image-more" @click=" handleShowGoodsSkuSelect(6)" src="http://36.138.125.206:8081/ceres-local-file/image/prod_detail_sku_more.png"/>
</view>
@ -471,7 +472,7 @@ export default {
productIds: '',
}
},
imageUrl: 'http://36.138.125.206:8081/ceres-local-file/file/2023/05/4237d7abe33d45a485a4b81c865e55bb_9344949001256.png'
defaultImageUrl: 'http://36.138.125.206:8081/ceres-local-file/image/sku_defualt.png'
}
},
created() {
@ -826,8 +827,15 @@ export default {
*/
async flyToService() {
(await Services(this.shopId)).flyToService()
},
handleClickSku(nameCode, valueCode) {
this.$refs.skuSelect.handleClickSkuItem(nameCode,valueCode)
},
onImageError(e) {
e.target.src = 'http://36.138.125.206:8081/ceres-local-file/image/sku_defualt.png';
}
,
}
}

Write Preview
Loading…
Cancel
Save