<script setup>
|
import {ref,onMounted} from 'vue'
|
import { goodsGetByIdApi,integralConvertApi } from '../../../api/index.js'
|
import { onLoad } from '@dcloudio/uni-app'
|
import { BASE_URL } from '../../../config/baseUrl.js';
|
|
const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
|
const baseUrl = ref(BASE_URL)
|
|
const detailInfo = ref({})
|
async function getGoodsDetail(goodsId){
|
await goodsGetByIdApi(goodsId).then((res) =>{
|
detailInfo.value = res.data
|
console.log('detailInfo',detailInfo.value)
|
})
|
}
|
//积分兑换
|
async function confirm(){
|
await integralConvertApi({userId:userInfo.value.id,goodsId:detailInfo.value.id}).then(async(res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title:'兑换成功！',
|
duration:1000
|
})
|
setTimeout(() =>{
|
uni.navigateTo({
|
url:'/pages/pointsMall/pointsExchangeRecord/index'
|
})
|
},1000)
|
await getGoodsDetail(goodsId)
|
}
|
})
|
}
|
//打开确认弹窗
|
const alertDialog = ref()
|
async function integralConvert(){
|
if(detailInfo.value.useIntegral <= Number(userInfo.value.integral)){
|
alertDialog.value.open()
|
}else{
|
uni.showToast({
|
title:'积分余额不足！',
|
icon:'none'
|
})
|
}
|
}
|
let goodsId
|
onLoad(async(option) =>{
|
goodsId = option.goodsId
|
await getGoodsDetail(goodsId)
|
})
|
</script>
|
<template>
|
<view class="container">
|
<point-navbar title='商品详情'></point-navbar>
|
<view class="content">
|
<view class="image-box">
|
<image class="image" :src="baseUrl + '/upload'+ detailInfo.detailsUrl" mode="aspectFit"></image>
|
</view>
|
<view class="detail">
|
<view class="detail-info">
|
<view class="detail-info-text">
|
<view>
|
<text class="detail-info-text-title">【{{detailInfo.name}}】</text>
|
<text class="detail-info-text-decribe">商品描述性文字占位商品描述性文字占位商品描述性文字占位</text>
|
</view>
|
</view>
|
<view class="detail-info-price">
|
<text class="detail-info-price-text">价值：</text>
|
<text class="detail-info-price-num">{{detailInfo.price}}￥</text>
|
</view>
|
</view>
|
<view class="detail-exchange">
|
<view class="detail-exchange-points">
|
<image class="detail-exchange-points-image" src="../../../static/images/pointMall/advert/money1.svg"></image>
|
<text class="detail-exchange-points-num">{{detailInfo.useIntegral}}</text>
|
</view>
|
<view class="detail-exchange-points-btn" @click="integralConvert"><text>兑 换</text></view>
|
</view>
|
<view class="detail-stock">库存：{{detailInfo.stock}}</view>
|
<view class="detail-tips">
|
<view class="detail-tips-title"><text>温馨提示</text></view>
|
<view class="detail-tips-content">
|
<view class="detail-tips-content-text1">1、兑换后请凭兑换码到柜台领取商品。</view>
|
<view class="detail-tips-content-text2">2、兑换后的商品不可退换、积分不可退还。</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 提示窗 -->
|
<uni-popup ref="alertDialog" type="dialog">
|
<uni-popup-dialog type="info" title="提示" :showClose = 'true' content="确认兑换该商品!" @confirm="confirm"></uni-popup-dialog>
|
</uni-popup>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
|
.container{
|
width:100%;
|
height:100vh;
|
.content{
|
width:100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to bottom,#fef7da,#f7f7f7);
|
padding:50rpx 32rpx 100rpx;
|
box-sizing: border-box;
|
.image-box{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 550rpx;
|
background:linear-gradient(to bottom,#FFF,#fef7da);
|
border-radius:20rpx;
|
// margin-bottom:30rpx;
|
.image{
|
height:500rpx;
|
}
|
}
|
.detail{
|
padding:20rpx;
|
box-sizing: border-box;
|
width: 100%;
|
height: 500rpx;
|
background: #FFF;
|
border-radius:20rpx;
|
.detail-info{
|
width:100%;
|
color: #434139;
|
font-weight:500;
|
margin-bottom:10rpx;
|
.detail-info-text{
|
margin-bottom:10rpx;
|
.detail-info-text-decribe{
|
color: #545147;
|
}
|
}
|
.detail-info-price{
|
color:#d3481e;
|
}
|
}
|
.detail-exchange{
|
display: flex;
|
justify-content: space-between;
|
margin-bottom:10rpx;
|
.detail-exchange-points{
|
display: flex;
|
align-items: center;
|
}
|
.detail-exchange-points-image{
|
width: 50rpx;
|
height: 50rpx;
|
}
|
.detail-exchange-points-num{
|
color: #e6980f;
|
font-weight:600;
|
font-size:46rpx;
|
}
|
.detail-exchange-points-btn{
|
width:180rpx;
|
height:60rpx;
|
background:linear-gradient(to right,#ff9249,#ffb170);
|
border-radius:30rpx;
|
color: #fff;
|
font-size:32rpx;
|
font-weight:500;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.detail-stock{
|
color: #919191;
|
font-size:24rpx;
|
margin-bottom:50rpx;
|
}
|
.detail-tips{
|
.detail-tips-title{
|
color: #434139;
|
margin-bottom:30rpx;
|
}
|
.detail-tips-content{
|
display: flex;
|
flex-direction: column;
|
color: #74716c;
|
font-size:24rpx;
|
.detail-tips-content-text1{
|
margin-bottom:10rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
