233 lines
5.4 KiB
Vue
233 lines
5.4 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-row group">
|
||
<view class=" ">
|
||
<image
|
||
class="flex-col justify-start items-end shrink-0 self-start image-wrapper"
|
||
:src="productBrief.goodImg"
|
||
/>
|
||
</view>
|
||
<view class="flex-row flex-1 ml-23">
|
||
<view class="flex-col flex-1 self-start group_2">
|
||
<view class="self-start group_3">
|
||
<text class="text_2">￥</text>
|
||
<text class="text">{{ productBrief.price }}</text>
|
||
</view>
|
||
<view class="mt-14 flex-col items-start self-stretch">
|
||
<text class="text_3">{{productBrief.name}}</text>
|
||
<!-- <text class="text_4 mt-9">{{已选：蓝色发簪}}</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="flex-col shrink-0 ml-5">
|
||
<image
|
||
class="self-end image"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png"
|
||
@click="close()"
|
||
/>
|
||
<view class="flex-row self-stretch mt-104">
|
||
<view class="flex-col justify-start items-center image-wrapper_2">
|
||
<image
|
||
class="image_3"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FosWvYyNx-short1.png"
|
||
@click="decrease"
|
||
/>
|
||
</view>
|
||
<view class="ml-2 flex-col justify-start items-center text-wrapper"><text class="text_5">{{ quantity }}</text></view>
|
||
<view class="ml-2 flex-col justify-start items-center image-wrapper_3">
|
||
<image
|
||
class="image_3"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGbdSQDul-add1.png"
|
||
@click="increase"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper_2" @click="addCart"><text class="text_6">加入购物车</text></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted , ref } from 'vue';
|
||
import emitter from '../../../utils/emitter';
|
||
import { onLoad , onShow } from "@dcloudio/uni-app";
|
||
import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
|
||
const productBrief = ref({}) //商品简要对象
|
||
const quantity = ref(1)
|
||
const userInfo = ref({})
|
||
onMounted(()=>{
|
||
emitter.on('product',(val)=>{
|
||
// console.log(val);
|
||
productBrief.value = val
|
||
})
|
||
})
|
||
onShow(()=>{
|
||
userInfo.value = wx.getStorageSync('userInfo') //获取用户信息
|
||
})
|
||
const close =()=>{
|
||
emitter.emit('close')
|
||
}
|
||
const addCart = async()=>{
|
||
console.log('商品brief-->',productBrief.value);
|
||
console.log('用户信息-->',userInfo.value);
|
||
const res = await uni.request({
|
||
url: baseUrl + '/cart/add',
|
||
method: 'POST',
|
||
data: {
|
||
userId: userInfo.value.id,
|
||
goodId: productBrief.value.id,
|
||
quantity: quantity.value,
|
||
subtotal: productBrief.value.price * quantity.value,
|
||
isGoodType: productBrief.value.isGoodType
|
||
}
|
||
})
|
||
if(res.data.code === 1) {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: "加入购物车成功"
|
||
})
|
||
close()
|
||
}else{
|
||
console.log('失败原因-->',res.data);
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: "请求失败"
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
//减少商品
|
||
const decrease =()=>{
|
||
// console.log('index-->',index);
|
||
if(quantity.value > 0) {
|
||
quantity.value -= 1
|
||
}
|
||
}
|
||
//这里应该结合库存有多少 11.8
|
||
const increase = () =>{
|
||
if(quantity.value <= productBrief.value.inventory) {
|
||
quantity.value += 1
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ml-23 {
|
||
margin-left: 43.13rpx;
|
||
}
|
||
.mt-9 {
|
||
margin-top: 16.88rpx;
|
||
}
|
||
.ml-5 {
|
||
margin-left: 9.38rpx;
|
||
}
|
||
.mt-104 {
|
||
margin-top: 195rpx;
|
||
}
|
||
.page {
|
||
padding: 0 31.88rpx 31.88rpx 45rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.group {
|
||
padding: 28.13rpx 0 37.5rpx 11.25rpx;
|
||
}
|
||
.image-wrapper {
|
||
margin-top: 76.88rpx;
|
||
// padding-bottom: 151.88rpx;
|
||
border-radius: 5.63rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 191.25rpx;
|
||
height: 189.38rpx;
|
||
}
|
||
.image_2 {
|
||
border-radius: 5.63rpx;
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.group_2 {
|
||
margin-top: 112.5rpx;
|
||
}
|
||
.group_3 {
|
||
margin-left: 3.75rpx;
|
||
}
|
||
.text_2 {
|
||
color: #ff0000;
|
||
font-size: 26.25rpx;
|
||
font-family: STZhongsong;
|
||
line-height: 18.13rpx;
|
||
}
|
||
.text {
|
||
color: #ff0000;
|
||
font-size: 37.5rpx;
|
||
font-family: STZhongsong;
|
||
line-height: 26.92rpx;
|
||
}
|
||
.text_3 {
|
||
color: #000000;
|
||
font-size: 28.13rpx;
|
||
font-family: Open Sans;
|
||
line-height: 26.21rpx;
|
||
}
|
||
.text_4 {
|
||
color: #000000;
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.34rpx;
|
||
}
|
||
.image {
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.image-wrapper_2 {
|
||
padding: 11.25rpx 0;
|
||
background-color: #f5f5dc;
|
||
border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.image_3 {
|
||
width: 33.75rpx;
|
||
height: 33.75rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 15rpx 0 11.25rpx;
|
||
background-color: #f5f5dc;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.text_5 {
|
||
color: #000000;
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 21.41rpx;
|
||
}
|
||
.image-wrapper_3 {
|
||
padding: 11.25rpx 0;
|
||
background-color: #f5f5dc;
|
||
border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
|
||
width: 52.5rpx;
|
||
height: 52.5rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
margin-right: 15rpx;
|
||
padding: 22.5rpx 0;
|
||
background-color: #ffd45a;
|
||
border-radius: 93.75rpx;
|
||
}
|
||
.text_6 {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-family: Inter;
|
||
font-weight: 700;
|
||
line-height: 28.2rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style>
|