商品详情页 - 购买商品
<template>
<view class='product-detail'>
<image :src='product.masterImage' mode='widthFix' class='img'></image>
<view class='product-desc'>
<view class='title'>{{product.name}}</view>
<view class='sub-title'>{{product.subTitle}}</view>
<view class='price-all'>
<view class='price'>
<text class='price-now'><text>￥</text>{{product.minPrice}}</text>
<!-- <text class='price-initial'>原价￥<text>999.99</text></text> -->
</view>
<!-- <view class='stock'>库存：10件</view> -->
</view>
<uni-list>
<!-- <uni-list-item title='赠送V值' :rightText='product.userQtRate*100'/> -->
<!-- <uni-list-item title='商品评价' :rightText='product.commentVolume' @click='toUrl('/pages/product/evaluateList?spuId='+product.id)'/>-->
<uni-list-item clickable :showArrow='true' title='商品评价' @click='toUrl('/pages/product/evaluateList?spuId='+product.id)'/>
</uni-list>
<!-- <view class='price-quan'>
<text class='quan'>券</text>96.62 + <text class='fh'>￥</text> 96.62
</view> -->
</view>
<!-- <view class='ad'>
<view class='ad-item'>厂家直供</view>
<view class='ad-item'>全新无拆封</view>
<view class='ad-item'>全国包邮</view>
</view> -->
<view class='pics'>
<image :src='item' mode='widthFix' v-for='item in product.detailsImages' key='{{item}}'></image>
<!-- <image src='../../static/index_img3.png' mode='widthFix'></image> -->
</view>
<view class='goods-carts'>
<uni-goods-nav :fill='true' :options='options' :button-group='buttonGroup' @click='onClick' @buttonClick='buttonClick' />
</view>
<!-- 商品选择弹框 -->
<uni-popup id='popup' ref='popup' type='bottom' :animation='true' class='product-popup'>
<view class='popup-content'>
<view class='product'>
<image :src='product.masterImage||'../../static/index_img1.png'' mode='' class='img'></image>
<!-- 显示默认选择的商品价格 -->
<view class='price'>￥{{product.minPrice}}</view>
<view class='close' @click='onClosePopup'>关闭</view>
</view>
<view class='specs'>
<view class='spec' v-for='(item,idx) in product.specialSpec' key='{{idx}}'>
<view class='title'>{{item.title}}</view>
<uni-tag :inverted='true' :text='spec' :disabled='item.disabled[specIdx]' :type='getSpecType(item.title,spec)'
class='tag' :highlight='item.highlighted' v-for='(spec,specIdx) in item.option' @click='onClickSpec(item.title,idx,spec)' />
</view>
</view>
<view class='product-num'>
<view class='text'>购买数量</view>
<uni-number-box :min='minNumber' :value='info.number' @change='onClickNum' />
</view>
<button type='default' class='btn-common' @click='onOk'>确定</button>
</view>
</uni-popup>
</view>
</template>
<script>
import _ from "lodash"
export default {
data() {
return {
minNumber: 1,
product: {},
specs: [], //所选商品规格
skuVo: {}, //选择的商品
defaultSkuIndex: 0,//用于存储默认选中的商品规格索引值
info: {
number: 1,
skuId: '',
cartType:1//用户购物车
}, //传给订单页的数据
options: [{
icon: 'cart',
text: '购物车',
info: 0 //购物车中的数量
}],
type: '', //0 购物车 1立即购买
levelType: 0,
specDisabled: false,
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ffa200',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ff0000',
color: '#fff'
}
],
};
},
onLoad(option) {
if (option.number != undefined && option.number != null) {
this.minNumber = Number(option.number);
this.info.number = Number(option.number);
}
if (option.levelType != undefined && option.levelType != null) {
this.levelType = option.levelType;
}
if (option.type != null && option.type == "banner") {
this.ajax.get(`${this.jk.bannerProductDetail}?bannerId=${option.id}`).then(res => {
this.product = res.data;
this.product.specialSpec = res.data.specialSpec.map((item, idx) => {
item.disabled = item.option.map(spec => {
return _.indexOf(this.getAllSpecs()[idx], spec) == -1;
});
return item;
});
this.defaultSkuIndex = 0; // 设置为默认选择第一个商品规格
this.skuVo = this.product.skuVos[this.defaultSkuIndex]; // 选择对应索引的商品规格
this.info.skuId = this.skuVo.id; // 更新info中的skuId
});
} else {
this.ajax.get(`${this.jk.productDetail}?spuId=${option.id}`).then(res => {
this.product = res.data;
this.product.specialSpec = res.data.specialSpec.map((item, idx) => {
item.disabled = item.option.map(spec => {
return _.indexOf(this.getAllSpecs()[idx], spec) == -1;
});
return item;
});
this.defaultSkuIndex = 0; // 设置为默认选择第一个商品规格
this.skuVo = this.product.skuVos[this.defaultSkuIndex]; // 选择对应索引的商品规格
this.info.skuId = this.skuVo.id; // 更新info中的skuId
});
}
this.ajax.get(this.jk.cartList).then(res => {
this.options[0].info = res.data.total;
})
},
onShow() {
uni.removeStorageSync('address');
uni.removeStorageSync('order-products');
},
methods: {
//购物车点击
onClick(e) {
if (e.index == 0) this.common.UswitchTab('/pages/tab/shopcart');
},
//加入购物车、立即购买点击
buttonClick(e) {
this.type = e.index;
this.$refs.popup.open()
},
//从所有商品中提出来所有规格，判断初始哪些规格不能选择
getAllSpecs() {
let specLen = this.product.specialSpec.length;
return _.flatten(_.range(0, specLen).map(idx => {
return [this.product.skuVos.map(sku => {
return _.split(sku.specialSpec, ',')[idx]
})]
}))
// [['金色'],['64G']]
},
//根据当前所选规格，判断下级规格哪些可选择
getClickAllSpecs(idx, spec, type) {
return _.compact(this.product.skuVos.map(sku => {
let arr = _.split(sku.specialSpec, ',')
let value = type == '+' ? arr[idx + 1] : arr[idx - 1];
return arr[idx] == spec ? value : '';
}))
// ['金色','白色']
},
//从商品规格中选择 确定的商品->即当前选择的商品
filterSkuVos() {
let specValues = this.specs.map(item => item.value);
this.skuVo = this.product.skuVos.filter(item => {
return _.difference(_.split(item.specialSpec, ','), specValues).length == 0
})[0];
this.info.skuId = this.skuVo.id;
//新加的
// 设置默认选中的商品规格为高亮状态
this.specs = this.specs.map(item => {
item.highlighted = item.value == this.skuVo[item.title];
return item;
});
},
//选择商品规格 [{title:'颜色',value:'金色'},{title:'版本',value:'64G'}]
onClickSpec(title, specIdx, spec) {
let sspec = this.product.specialSpec;
//当前规格的下一个规格
if (specIdx + 1 <= this.product.specialSpec.length - 1) {
sspec[specIdx + 1].disabled = sspec[specIdx + 1].option.map(item => {
return _.indexOf(this.getClickAllSpecs(specIdx, spec, '+'), item) == -1
})
}
//当前规格的上一个规格
if (specIdx - 1 >= 0) {
sspec[specIdx - 1].disabled = sspec[specIdx - 1].option.map(item => {
return _.indexOf(this.getClickAllSpecs(specIdx, spec, '-'), item) == -1
})
}
if (_.findIndex(this.specs, item => item.title == title) == -1) { //sepcs中没有title
this.specs.push({
title: title,
value: spec
})
} else {
this.specs = this.specs.map(item => {
item.value = item.title == title ? spec : item.value;
return item;
})
}
console.log('this', this.specs)
if (this.specs.length == this.product.specialSpec.length) this.filterSkuVos();
},
// getSpecType(title, spec) {
// let clickSpec = _.find(this.specs, item => item.title == title);
// return _.get(clickSpec, 'value') == spec ? 'error' : 'default';
// },
getSpecType(title, spec) {
let clickSpec = _.find(this.specs, item => item.title == title);
return clickSpec && clickSpec.value == spec ? 'error' : 'default';
},
onClickNum(num) {
this.info.number = num;
},
onOk() {
if (!this.info.skuId) {
this.common.UshowToast('请选择商品属性');
} else {
//加入购物车
if (this.type == 0) {
this.ajax.post(this.jk.cartAdd, this.info).then(res => {
this.options[0].info = Number(this.options[0].info) + Number(this.info.number)
})
} else { //立即购买
this.common.UsetStorage('order-products',[{skuvo:this.skuVo,info:this.info,masterImage:this.product.masterImage}]);
this.common.UnavigateTo(`/pages/product/order?type=detail&levelType=${this.levelType}`);
}
this.$refs.popup.close()
}
},
onClosePopup() {
this.$refs.popup.close()
},
toUrl(url){
this.common.UnavigateTo(url);
}
}
}
</script>
<style lang='less'>
@theme-color: #FF9800;
@font-color: #FF1616;
.product-detail {
font-size: 28rpx;
color: #888888;
image {
width: 100%;
height: auto;
}
.product-desc {
padding: 0 20rpx 20rpx 20rpx;
background-color: #FFFFFF;
.title {
font-size: 32rpx;
color: #101010;
line-height: 46rpx;
font-weight: bold;
}
.sub-title{
font-size: 28rpx;
color: #999999;
line-height: 46rpx;
}
.price-all {
display: flex;
justify-content: space-between;
.price {
.price-now {
font-size: 44rpx;
color: #FF1616;
margin-right: 10rpx;
text {
font-size: 28rpx;
}
}
.price-initial {
text {
text-decoration: line-through;
}
}
}
.stock {
margin-top: 16rpx;
}
}
}
.price-quan {
font-size: 44rpx;
color: #FF1616;
.quan {
background-color: #FF1616;
color: #FFFFFF;
border-radius: 6rpx;
font-size: 28rpx;
padding: 2rpx 6rpx;
margin-right: 6rpx;
}
.fh {
font-size: 28rpx;
}
}
.ad {
display: flex;
margin: 10rpx 60rpx;
.ad-item {
width: 33.3%;
text-align: center;
}
}
.pics {
image {
margin-bottom: 10rpx;
}
}
.goods-carts {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.product-popup {
.popup-content {
background-color: #FFFFFF;
font-size: 28rpx;
color: #333333;
padding: 40rpx 0;
.product {
position: relative;
top: -80rpx;
display: flex;
padding: 0 40rpx;
.img {
width: 160rpx;
height: 160rpx;
}
.price {
color: @font-color;
margin: 100rpx 0 0 20rpx;
}
.close {
color: #2F94F8;
position: absolute;
top: 60rpx;
right: 40rpx;
}
}
.specs {
padding: 0 40rpx;
margin-top: -40rpx;
height: 120px;
overflow-y: scroll;
.spec {
margin-bottom: 20rpx;
.title {
margin-bottom: 20rpx;
}
.tag {
display: inline-block;
font-size: 24rpx;
margin: 0 20rpx 20rpx 0;
}
}
}
.product-num {
display: flex;
justify-content: space-between;
border-width: 1px 0;
border-style: solid;
border-color: #EEEEEE;
padding: 20rpx 40rpx;
margin-top: 20rpx;
.text {
line-height: 65rpx;
}
}
.btn-common {
margin: 100rpx 40rpx 0 40rpx;
}
}
}
}
</styl
原文地址: https://www.cveoy.top/t/topic/Ac0 著作权归作者所有。请勿转载和采集!