439 lines
12 KiB
Vue
439 lines
12 KiB
Vue
<script setup>
|
||
// 引入
|
||
import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
|
||
import {ref,onMounted,nextTick,reactive,watch} from "vue"
|
||
import myButton from "@/components/myButton.vue"
|
||
import { useStore } from '@/store'
|
||
import api from "@/api/index"
|
||
const store = useStore()
|
||
/*
|
||
！！！！！注意区分：show_status-按钮是否有效；show_state-是否展示本组件
|
||
show_type如果是团购或秒杀，无法添加到购物车
|
||
*/
|
||
const props = defineProps(['show_type','goods_info','btn_text','show_state','show_status','payBtn']);// goods_info:商品详情(goodsDetail页面的info变量)
|
||
const emits = defineEmits(['choosedOk','choosedDeliveryOk'])
|
||
onLoad((e) => {
|
||
console.log('规格！！！',props)
|
||
// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
|
||
// console.log("组件:",styleObject.value)
|
||
getDelivery()
|
||
})
|
||
onShow(() =>{
|
||
// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
|
||
})
|
||
watch(
|
||
() => props.goods_info,
|
||
(newVal, oldVal) => {
|
||
info.value = newVal
|
||
console.log('监听参数',info.value)
|
||
goods_type.value = info.value.type
|
||
handleFunc()
|
||
}
|
||
)
|
||
watch(()=>props.show_state,(newVal, oldVal) => {
|
||
// console.log(11111,props.show_type)
|
||
if(newVal && !deliveryInfo.value) {
|
||
getDelivery()
|
||
}
|
||
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||
popup.value.open('bottom')
|
||
// console.log(deliveryInfo.value)
|
||
// console.log("组件:",props.show_state)
|
||
})
|
||
// 变量
|
||
const goods_type = ref(null)
|
||
const update_fields = ref(['cost_price','createtime','market_price','sales','sell_price','stock','weight']) // 需要更新的商品字段
|
||
const styleObject = ref({
|
||
height: '',
|
||
})
|
||
const info = ref(null)
|
||
const total_num = ref(1)
|
||
const popup = ref()
|
||
const info_text = ref('')
|
||
const deliveryInfo = ref(null)
|
||
// 函数
|
||
async function getDelivery(){ // 获取配送相关的选项
|
||
const res = await api.getDelivery()
|
||
// console.log(res)
|
||
if(res.code === 1) {
|
||
deliveryInfo.value = res.data
|
||
// console.log(deliveryInfo.value)
|
||
}
|
||
}
|
||
function chooseFunc(type){
|
||
// type.value = type
|
||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
||
popup.value.open(type)
|
||
}
|
||
function change(e) {
|
||
// console.log('当前模式：' + e.type + ',状态：' + e.show);
|
||
}
|
||
function handleFunc() {
|
||
if(info.value.specs && info.value.specs.length>0) {
|
||
choosed_list.value = new Array(info.value.specs.length);
|
||
// console.log("choosed_list:",choosed_list.value)
|
||
}
|
||
}
|
||
const choosed_list = ref([])
|
||
function choosePopFunc2(i,i2) { // 规格选择函数
|
||
choosed_list.value[i] = i2
|
||
let str = choosed_list.value.join()
|
||
getNewinfo(i,i2,str)
|
||
}
|
||
const current_specs_id = ref(null)
|
||
const emitParams = ref({total_num:1})
|
||
async function getNewinfo(i,i2,str) {
|
||
// console.log(str)
|
||
const res = await api.getNewinfo({
|
||
goods_id:info.value.id,
|
||
ks:str
|
||
})
|
||
if(res.code === 1) {
|
||
info.value.specs[i].choosed_val = i2
|
||
// 更新对应数据
|
||
for(let prop in update_fields.value) {
|
||
info.value[update_fields.value[prop]] = res.data[update_fields.value[prop]]
|
||
}
|
||
info_text.value = res.data.name
|
||
// console.log(info.value)
|
||
current_specs_id.value = res.data.id
|
||
emitParams.value.current_specs_id = res.data.id
|
||
emitParams.value.flag_res = checkFunc()
|
||
emits('choosedOk',emitParams.value)
|
||
}
|
||
else{
|
||
// res.msg
|
||
uni.showToast({
|
||
duration:2000,
|
||
title:res.msg,
|
||
icon:'error'
|
||
})
|
||
}
|
||
}
|
||
function changeNumFunc(value){
|
||
if(value<info.value.stock && value>0) {
|
||
// info.value.sell_price = parseFloat(info.value.sell_price) ++
|
||
total_num.value = value
|
||
}
|
||
else if(value<1) {
|
||
total_num.value = 1
|
||
}
|
||
else{ // 超过库存
|
||
uni.showToast({
|
||
title:"超出库存了",
|
||
icon:"error"
|
||
})
|
||
return
|
||
}
|
||
emitParams.value.total_num = total_num.value
|
||
emitParams.value.flag_res = checkFunc()
|
||
emits("choosedOk",emitParams.value)
|
||
// console.log(value)
|
||
}
|
||
async function ofunc(type) { // 加入购物车
|
||
if(['group','limited'].includes(props.show_type)){ // 秒杀和团购 无法添加购物车
|
||
return
|
||
}
|
||
let flag_res = checkFunc()
|
||
let iocn_flag = 'success',title = '已加入购物车！'
|
||
// console.log(flag_res)
|
||
if(!flag_res.flag) {
|
||
iocn_flag = 'error',
|
||
title = flag_res.text
|
||
}
|
||
else{
|
||
if(goods_type==1) {
|
||
// 检查配送相关
|
||
let warning_text = checkDeliveryInfo()
|
||
if(warning_text) {
|
||
uni.showToast({
|
||
title:warning_text,
|
||
icon:"error"
|
||
})
|
||
return
|
||
}
|
||
}
|
||
let add_res = await addCart()
|
||
if(add_res.state) {
|
||
popup.value.close()
|
||
emitParams.value.state = 1
|
||
emitParams.value.flag_res = checkFunc()
|
||
store.cartChange = !store.cartChange
|
||
emits('choosedOk',emitParams.value)
|
||
}
|
||
else{
|
||
iocn_flag = 'error'
|
||
}
|
||
title = add_res.msg
|
||
|
||
}
|
||
uni.showToast({
|
||
title,
|
||
icon:iocn_flag,
|
||
duration: 2000,
|
||
// mask:true
|
||
});
|
||
}
|
||
async function addCart() {
|
||
// let add_res = false
|
||
let add_res = {
|
||
state:false,
|
||
msg:''
|
||
}
|
||
let params = {
|
||
goods_id:info.value.id,
|
||
spec_id:current_specs_id.value?current_specs_id.value:-1,
|
||
num:total_num.value,
|
||
frequency:deliveryInfo.value.frequency[deliveryInfo.value.frequency_index],
|
||
delivery_start_time:deliveryInfo.value.start_time[deliveryInfo.value.start_time_index],
|
||
need_milk_box:deliveryInfo.value.need_milk_box[deliveryInfo.value.need_milk_box_index]
|
||
}
|
||
const res = await api.addCart(params)
|
||
if(res.code === 1) {
|
||
add_res.state = true
|
||
}
|
||
add_res.msg = res.msg
|
||
return add_res
|
||
}
|
||
function checkDeliveryInfo() { // 检查配送相关
|
||
if(!deliveryInfo.value) {
|
||
return '请选择配送频率'
|
||
}
|
||
let c_arr = [
|
||
{
|
||
prop:'frequency_index',
|
||
title:'请选择配送频率'
|
||
},
|
||
{
|
||
prop:'start_time_index',
|
||
title:'请选择起送时间'
|
||
},
|
||
{
|
||
prop:'need_milk_box_index',
|
||
title:'请选择是否需要奶箱'
|
||
}
|
||
]
|
||
// deliveryInfo.value.
|
||
for(let i = 0;i<c_arr.length;i++) {
|
||
if(!deliveryInfo.value.hasOwnProperty(c_arr[i].prop)) {
|
||
return c_arr[i].title
|
||
}
|
||
}
|
||
}
|
||
function checkFunc() {
|
||
let flag = true
|
||
let res_flag = {
|
||
flag:true,
|
||
text:''
|
||
}
|
||
if(info.value.specs && info.value.specs.length>0) {
|
||
for(let item of info.value.specs) {
|
||
if(!item.hasOwnProperty('choosed_val')) {
|
||
res_flag.flag = false
|
||
res_flag.text = '请选择'+item.title
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
// console.log(info.value)
|
||
return res_flag
|
||
}
|
||
function chooseDeliveryFunc(prop,title) {
|
||
// console.log(prop,title)
|
||
deliveryInfo.value[prop] = title
|
||
emits('choosedDeliveryOk',{info:deliveryInfo.value})
|
||
}
|
||
function determine(func) {
|
||
emits('payOk')
|
||
}
|
||
</script>
|
||
<template>
|
||
<view class="goodsSpecsBox">
|
||
<!-- <view class="g-cart btn-css" @tap="chooseFunc('bottom')">
|
||
选择
|
||
</view> -->
|
||
<uni-popup ref="popup" @change="change">
|
||
<view class="popup-content" :style="styleObject" >
|
||
<!-- 产品主信息 -->
|
||
<view class="pc-row main-info">
|
||
<view class="pcr-left">
|
||
<view class="pcrl-img-box">
|
||
<image :src="info?.goods_image" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="pcr-right">
|
||
<view class="pcrr-row bold-text">
|
||
{{info?.goods_name}}
|
||
</view>
|
||
<view class="pcrr-row small-text">
|
||
产品描述
|
||
</view>
|
||
<view class="pcrr-row small-text">
|
||
{{info?.sellpoint}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 规格 -->
|
||
<view class="pc-row" v-for="(item,i) in info?.specs">
|
||
<view class="pcr-title">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="pc-choose-card-box">
|
||
<view @tap="choosePopFunc2(i,i2)" :class="{choosedCard:item.choosed_val==i2}" class="pc-choose-card" v-for="(item2,i2) in item.items">
|
||
{{item2.title}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="small-text">
|
||
温馨提示:配送区域为重庆市南岸区四公里到六公里
|
||
</view> -->
|
||
</view>
|
||
<!-- 配送相关选项 -->
|
||
<!-- deliveryInfo -->
|
||
<template v-if="goods_type == 1">
|
||
<view class="pc-row">
|
||
<view class="pcr-title">
|
||
配送频率
|
||
</view>
|
||
<view class="pc-choose-card-box">
|
||
<view @tap="chooseDeliveryFunc('frequency_index',i2)" :class="{choosedCard:deliveryInfo?.frequency_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.frequency">
|
||
{{item2}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pc-row">
|
||
<view class="pcr-title">
|
||
起送时间
|
||
</view>
|
||
<view class="pc-choose-card-box">
|
||
<view @tap="chooseDeliveryFunc('start_time_index',i2)" :class="{choosedCard:deliveryInfo?.start_time_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.start_time">
|
||
{{item2}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pc-row">
|
||
<view class="pcr-title">
|
||
是否需要奶箱
|
||
</view>
|
||
<view class="pc-choose-card-box">
|
||
<view @tap="chooseDeliveryFunc('need_milk_box_index',i2)" :class="{choosedCard:deliveryInfo?.need_milk_box_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.need_milk_box">
|
||
{{item2}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 数量 -->
|
||
<view class="pc-row total-info-box">
|
||
<view class="tib-left">
|
||
<view class="tib-left-row">
|
||
<text class="total-price bold-text">￥{{parseFloat(info?.sell_price) * total_num}}</text>
|
||
<text class="small-text">（库存{{info?.stock}}）</text>
|
||
</view>
|
||
<view class="tib-left-row small-text">
|
||
{{info_text}}
|
||
</view>
|
||
</view>
|
||
<view class="tib-right">
|
||
<uni-number-box :value="total_num" @change="changeNumFunc" />
|
||
</view>
|
||
</view>
|
||
<!-- 按钮 -->
|
||
<view class="pc-row total-info-box">
|
||
<myButton :invalid="['group','limited'].includes(show_type)" showType="plain" style="width: 100%;" class="op-right" :type="2" @tap="ofunc(3)">
|
||
加入购物车
|
||
</myButton>
|
||
<myButton @tap="determine(1)" v-if="['group','limited'].includes(show_type) && payBtn" style="width: 100%;" class="op-right" :type="2">
|
||
{{btn_text}}
|
||
</myButton>
|
||
<myButton v-else-if="payBtn" style="width: 100%;" class="op-right" :type="2" @tap="determine(1)">
|
||
去结算
|
||
</myButton>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<style scoped lang="scss">
|
||
// .invalidCss .add-btn-part .add-btn {
|
||
// color: white !important;
|
||
// background-color: #d7d7d7 !important;
|
||
// border: 2rpx solid #d7d7d7 !important;
|
||
// }
|
||
.btn-css{
|
||
background: #7CC4E8;
|
||
color: white;
|
||
padding: 6rpx 40rpx;
|
||
border-radius: 20px;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
margin-left: 10rpx;
|
||
position: relative;
|
||
}
|
||
// 数量
|
||
.total-info-box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.tib-left{
|
||
margin-right: 20rpx;
|
||
.tib-left-row{
|
||
color: red;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
// 选择区域
|
||
.choosedCard{
|
||
background-color: rgb(124, 196, 232) !important;
|
||
color: white !important;
|
||
}
|
||
.goodsSpecsBox{
|
||
.popup-content{
|
||
padding-top: 40rpx;
|
||
background-color: white;
|
||
border-radius: 10px 10px 0 0;
|
||
overflow: scroll;
|
||
.pc-row{
|
||
padding:0 40rpx;
|
||
padding-bottom: 40rpx;
|
||
.pcr-title{
|
||
color: gray;
|
||
font-size: 30rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
.pc-choose-card-box{
|
||
.pc-choose-card{
|
||
display: inline-block;
|
||
background: #f1f1f1;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
// font-weight: bolder;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
.main-info{
|
||
display: flex;
|
||
// align-items:;
|
||
.pcr-left{
|
||
margin-right: 40rpx;
|
||
.pcrl-img-box{
|
||
border: 2rpx solid #dadada;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
image{
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
}
|
||
.pcr-right{
|
||
.pcrr-row{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |