<template>
<view class="spec-content">
<view class="uni-margin-wrap">
<swiper class="swiper" circular autoplay>
<swiper-item v-for="item in goodInfo.pics.introImages">
<view class="swiper-item">
<image class="swiper-spec-content-item-img" :src="item" mode="widthFix"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- <scroll-view scroll-x="true">
<view class="spec-banner-wrap" scroll-x="true">
<view class="spec-banner-wrap-item" v-for="item in goodInfo.pics.introImages">
<image class="spec-banner-wrap-item-img" :src="item" mode="widthFix"></image>
</view>
</view>
</scroll-view> -->
<view class="good spec-info-left">
<text class="good-name">{{goodInfo.name}}</text>
<view v-for="specItem in goodInfo.specs">
<text class="good-spec-name">{{specItem.specName}}</text>
<view class="good-spec-rule">
<view v-for="specItemRule in specItem.rules">
<text class="good-spec-rule-item">{{specItemRule.ruleName}}</text>
</view>
</view>
</view>
</view>
<view class="spec-detail">
<text class="spec-detail-title spec-info-left">商品详情</text>
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImages">
<image class=".spec-detail-img-item " :src="item" mode="widthFix"></image>
</view>
<view class="good-select-height">
</view>
</view>
<view class="good-select good-select-height">
<view class="good-select-price">
<text class="good-select-price-normal">￥100</text>
<text class="good-select-price-small">￥10</text>
</view>
<view class="good-select-cont">
<button class="good-select-btn" type="default" >立即购买</button>
<button class="good-select-btn" type="default" >加入购物袋</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello1',
imglist:[{img:"/static/logo.png"},{img:"/static/ggxz01.png"}],
goodInfo:{
"goodId": 100,
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"https://cdn.uviewui.com/uview/album/1.jpg",
"https://cdn.uviewui.com/uview/album/2.jpg",
"https://cdn.uviewui.com/uview/album/3.jpg"
],
"detailImages": [
"https://cdn.uviewui.com/uview/album/4.jpg",
"https://cdn.uviewui.com/uview/album/5.jpg",
"https://cdn.uviewui.com/uview/album/6.jpg"
]
},
"desc": "",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"rules": [
{
"isDefault": "1",
"isRecommend": "0",
"price": "2",
"ruleId": "51",
"ruleName": "冰"
},
{
"isDefault": "0",
"isRecommend": "0",
"price": "1",
"ruleId": "52",
"ruleName": "热"
}
],
"specId": "44",
"specName": "温度"
},
{
"rules": [
{
"isDefault": "1",
"isRecommend": "0",
"price": "0",
"ruleId": "53",
"ruleName": "不加奶"
},
{
"isDefault": "0",
"isRecommend": "0",
"price": "1",
"ruleId": "54",
"ruleName": "正常奶"
}
],
"specId": "45",
"specName": "加奶"
},
{
"rules": [
{
"isDefault": "1",
"isRecommend": "0",
"price": "0",
"ruleId": "55",
"ruleName": "不加糖"
},
{
"isDefault": "0",
"isRecommend": "0",
"price": "1",
"ruleId": "56",
"ruleName": "半塘"
},
{
"isDefault": "0",
"isRecommend": "0",
"price": "2",
"ruleId": "57",
"ruleName": "标准糖"
}
],
"specId": "46",
"specName": "糖度"
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.uni-margin-wrap {
height: 444rpx;
width: 100%;
background: #ff00f0;
}
.swiper-spec-content {
height: 300rpx;
width: 100%;
}
.swiper-spec-content-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-spec-content-item-img {
height: 100%;
width: 100%;
}
.spec-content {
}
.spec-info-left{
padding:22rpx 34rpx;
}
.good {
display: block;
width: 100%;
text-align: left;
margin-bottom:28rpx;
.good-name {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 44rpx;
margin-top: 24rpx;
}
.good-spec-name {
margin-top:22rpx;
color: rgba(0, 0, 0, 1);
font-size: 28rpx;
text-align: left;
line-height: 40rpx;
margin-top: 26rpx;
font-weight: bold;
}
.good-spec-rule {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-left: 8rpx;
}
}
.good-spec-rule-item {
font-size: 24rpx;
margin-right: 10rpx;
}
.spec-detail {
width: 100%;
height: 100%;
}
.spec-detail-title{
font-weight: bold;
}
.spec-detail-img {
display: flex;
flex-direction: column;
margin-top: 0rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 0rpx;
padding: 0rpx;
justify-content: center;
align-items: center;
}
.spec-detail-img-item {
width: 100%;
height: 100%;
}
.good-select-height{
height:200rpx;
}
.good-select{
width: 90%;
position: fixed;
bottom: 0rpx;
text-align: center;
}
.good-select-price{
display: flex;
margin-top: 20rpx;
justify-content: flex-start;
align-items: flex-end;
}
.good-select-price-normal{
font-size: 36rpx;
color: rgba(235, 95, 23, 1);
}
.good-select-price-small{
font-size: 20rpx;
text-decoration:line-through;
}
.good-select-cont{
margin-top: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.good-select-btn {
}
</style>