You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
468 lines
10 KiB
468 lines
10 KiB
<template>
|
|
|
|
<!-- v-if="specificationList.length>0" -->
|
|
|
|
<view class="choose-detail" >
|
|
<view class="choose-top" >
|
|
<view class="marRight10">
|
|
<image v-if="specificationList[chooseIndex].showImg" :src="imageUrl+specificationList[chooseIndex].showImg" @click="perImage(chooseIndex,[imageUrl+specificationList[chooseIndex].showImg])" class="img choose-img " mode="aspectFill"></image>
|
|
</view>
|
|
<view class="choose-price marRight10">
|
|
<text class="" style="text-decoration: line-through;">原价¥{{specificationList[chooseIndex].originalPrice}}</text>
|
|
</view>
|
|
<view class="choose-less-price fontwig6 ">
|
|
<text class="">现价 ¥{{specificationList[chooseIndex].price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 地址 -->
|
|
<!-- <view class="select-address width100 mart10 " @click="goAddress">
|
|
<view v-if="true" class="address-left font14">
|
|
<view class=" " >
|
|
重庆市渝中区不是的聚钓具偶家
|
|
</view>
|
|
<view class="color999 mart3" >
|
|
<text class="address-name">明明</text>
|
|
<text class="address-phone margle10">13563256324</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="address-left font14">
|
|
<view class="paddtop10 color999 paddbotm10">
|
|
请选择地址
|
|
</view>
|
|
</view>
|
|
|
|
<view class="icon-ymt to-right"></view>
|
|
</view> -->
|
|
|
|
<!-- 选分类 -->
|
|
<view class="choose-bottom marb10">
|
|
<!-- 类型分类 -->
|
|
<view class="choose-bottom-title fontwig6 font14 mart10">
|
|
选择规格
|
|
</view>
|
|
<view class="choose-select">
|
|
<view v-for="(item,index) in specificationList" :key="index" :data-index="index" :class="'choose-item padleft10 mart10 '+ (chooseIndex == index ? 'choose-active':'')" @click="select(index)">
|
|
<image v-if="item.showImg" :src="imageUrl+item.showImg" @click.stop="perImage(0,[imageUrl+item.showImg])" class="img "></image>
|
|
<view class="padleft15 paddtright15 font13"> {{item.name}}</view>
|
|
<view class="padleft15 paddtright5 fontwig6 font13 fcor999">￥{{item.price}}</view>
|
|
<view class="padleft15 paddtright5 font13 ">库存{{item.stock}}</view>
|
|
<view v-if="item.stock==0" class="qh failureColor" style="">缺货</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 数量分类 -->
|
|
<view class="choose-bottom-title paddbotm10 fontwig6 font14 mart15 choose-num">
|
|
<view class="">购买数量</view>
|
|
<uni-number-box v-model="chooseNumber" :disabled="specificationList[chooseIndex].stock==0" :min="1" :max="specificationList[chooseIndex].stock || 9999999" @noMoreLess="noMoreLess" @noMore="noMore" @change="changeNumValue" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="choose-cart" v-if="specificationList[chooseIndex].stock==0">
|
|
<view class="choose-way" >
|
|
<view class="fcorfff way1 bgcolor-qh" @click="noStock">
|
|
暂无库存
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose-cart" v-else>
|
|
|
|
<view class="choose-way" v-if="status == 1">
|
|
<view class="fcorfff way bgcolor-left" @click="toCart">
|
|
加入购物车
|
|
</view>
|
|
<view class="fcorfff way bgcolor-ri" @click="toBuy">
|
|
立即购买
|
|
</view>
|
|
</view>
|
|
<view class="choose-way" v-if="status == 0">
|
|
<view class="fcorfff way1 bgcolor-left" @click="toCart">
|
|
加入购物车
|
|
</view>
|
|
</view>
|
|
<view class="choose-way" v-if="status == 2">
|
|
<view class="fcorfff way1 bgcolor-left" @click="toBuy">
|
|
立即购买
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
|
|
import {insertShoppingCart,getShoppingCartList} from '@/Utils/physicalObject.js'
|
|
const app = getApp();
|
|
export default {
|
|
data(){
|
|
return{
|
|
imageUrl: app.globalData.imgUrl,//图片地址
|
|
|
|
chooseIndex:0,
|
|
|
|
chooseNumber:1,//数量选择
|
|
// imgList:[],
|
|
}
|
|
},
|
|
props:{
|
|
specificationList:{
|
|
type:Array,
|
|
default() {
|
|
return []
|
|
},
|
|
},
|
|
// 0,加入购物车。1，加入购物车，领券购买
|
|
status:{
|
|
type:Number,
|
|
default:0,
|
|
},
|
|
goodsDetail:{
|
|
type:Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
specificationList:{
|
|
handler(n,o){
|
|
this.chooseNumber = 1;
|
|
this.chooseIndex = 0;
|
|
for(let i=0;i<n.length;i++){
|
|
if(n[i].stock>0){
|
|
this.chooseIndex = i;
|
|
// console.log(this.chooseIndex,"this.chooseIndex")
|
|
return
|
|
}
|
|
}
|
|
|
|
if(this.specificationList.length>0&&this.specificationList[this.chooseIndex].stock==0){
|
|
this.chooseNumber = 0;
|
|
}else{
|
|
this.chooseNumber = 1;
|
|
}
|
|
|
|
},
|
|
deep:true,
|
|
immediate: true, // 初始化监听
|
|
}
|
|
},
|
|
components:{
|
|
"uni-number-box":uniNumberBox
|
|
},
|
|
computed:{
|
|
imgList(){
|
|
|
|
if(this.specificationList.length>0){
|
|
let arr =[];
|
|
this.specificationList.map(item=>{
|
|
|
|
arr.push(this.imageUrl+item.showImg)
|
|
})
|
|
|
|
return arr;
|
|
}else{
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
//查看大图
|
|
perImage(index,imgList) {
|
|
|
|
uni.previewImage({
|
|
current: index, //预览图片的下标
|
|
urls: imgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
|
})
|
|
},
|
|
/* 暂无库存 */
|
|
noStock(){
|
|
uni.showToast({
|
|
title:'暂无库存哟,看看别的吧!',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
|
|
changeNumValue(v){
|
|
this.chooseNumber = v;
|
|
},
|
|
noMoreLess(){
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: "低于最少购买数量",
|
|
duration: 1000
|
|
});
|
|
},
|
|
noMore(){
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: "超出最大购买数量",
|
|
duration: 1000
|
|
});
|
|
},
|
|
//加入购物车
|
|
toCart(){
|
|
let params={
|
|
goodsId:this.specificationList[this.chooseIndex].goodsId,
|
|
num:this.chooseNumber,
|
|
sku:this.specificationList[this.chooseIndex].id,
|
|
whetherCheck:false
|
|
}
|
|
|
|
insertShoppingCart(params).then(async res=>{
|
|
let title ;
|
|
if (res.return_code == '000000') {
|
|
title = "加入购物车成功";
|
|
this.$emit("refreshCartNum")
|
|
|
|
}else{
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
|
|
this.chooseNumber = 1;
|
|
|
|
this.$emit("close")
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
//立即购买
|
|
toBuy(){
|
|
|
|
console.log(this.specificationList[this.chooseIndex],this.goodsDetail)
|
|
|
|
let _this = this
|
|
let obj =[{
|
|
goodsId:_this.specificationList[this.chooseIndex].goodsId,
|
|
img: _this.specificationList[this.chooseIndex].showImg,
|
|
num: _this.chooseNumber,
|
|
price: _this.specificationList[this.chooseIndex].price,
|
|
sku: _this.specificationList[this.chooseIndex].id,
|
|
skuName: _this.specificationList[this.chooseIndex].name,
|
|
title: _this.goodsDetail.name,
|
|
originalPrice:_this.specificationList[this.chooseIndex].originalPrice
|
|
}]
|
|
obj = JSON.stringify(obj)
|
|
|
|
uni.navigateTo({
|
|
url: '/physical-merchants/settleAccounts/settleAccounts?goodsList='+obj
|
|
})
|
|
|
|
// this.$emit("close")
|
|
},
|
|
//选择商品规格change事件
|
|
select(index){
|
|
this.chooseIndex = index;
|
|
if(this.specificationList[this.chooseIndex].stock==0){
|
|
this.chooseNumber = 0;
|
|
}else{
|
|
this.chooseNumber = 1;
|
|
}
|
|
},
|
|
|
|
// 去地址页
|
|
goAddress(){
|
|
uni.navigateTo({
|
|
url:"/physical-merchants/address/address"
|
|
})
|
|
},
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// 失效
|
|
.failureColor{
|
|
color: #c5c5c5;
|
|
}
|
|
|
|
/* 缺货 */
|
|
.qh{
|
|
position: absolute;
|
|
top: -15rpx;
|
|
right: -30rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
width: 60rpx;
|
|
height:30rpx;
|
|
line-height:30rpx ;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
// //地址
|
|
.select-address{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
.br{
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
}
|
|
.bg-white{
|
|
background-color: #fff;
|
|
}
|
|
|
|
.price-tag{
|
|
font-family:Arial;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.choose-detail {
|
|
position: relative;
|
|
padding: 20rpx 20rpx 100rpx 20rpx;
|
|
//选择
|
|
.choose-top {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 160rpx;
|
|
color: #666666;
|
|
.choose-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
.choose-price {
|
|
|
|
}
|
|
.choose-less-price {
|
|
display: inline-block;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
padding: 10rpx 20rpx;
|
|
color: white;
|
|
background-color: #F95100;
|
|
border-radius: 45rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.choose-bottom {
|
|
.choose-bottom-title{
|
|
|
|
}
|
|
.choose-select {
|
|
.choose-item{
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
border-radius: 20rpx;
|
|
// overflow: hidden;
|
|
background-color:#F6F6F6;
|
|
border:1px solid transparent;
|
|
width: fit-content;
|
|
.img{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.choose-active{
|
|
border-color: #F95100;
|
|
}
|
|
}
|
|
|
|
.choose-num{
|
|
display: flex;
|
|
height: 60rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.choose-change{
|
|
width: 240rpx;
|
|
background-color:#F4F4F4;
|
|
height: 100%;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
.number{
|
|
// width: 80rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
}
|
|
.width140{
|
|
width: 120rpx !important;
|
|
}
|
|
.wid25{
|
|
width: 60rpx !important;
|
|
background-color:#f8f8f8 ;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.choose-cart{
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: calc(100% - 40rpx);
|
|
padding-bottom: 20rpx;
|
|
.choose-way{
|
|
height: 80rpx;
|
|
width: 100%;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
.way{
|
|
width: 50%;
|
|
height:80rpx;
|
|
line-height:80rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.way1{
|
|
width: 100% ;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.bgcolor-ri{
|
|
background-color: #FD5100;
|
|
}
|
|
.bgcolor-left{
|
|
background-color: #FF8E01;
|
|
}
|
|
.bgcolor-qh{
|
|
background-color: #c5c5c5;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |