From 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 20 十一月 2024 17:19:57 +0800
Subject: [PATCH] 添加积分商品详情，替换首页海报，调整样式，添加积分规则
---
pages/pointsMall/pointsGoodsDetail/index.vue | 139 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 128 insertions(+), 11 deletions(-)
diff --git a/pages/pointsMall/pointsGoodsDetail/index.vue b/pages/pointsMall/pointsGoodsDetail/index.vue
index c165226..5199c4a 100644
--- a/pages/pointsMall/pointsGoodsDetail/index.vue
+++ b/pages/pointsMall/pointsGoodsDetail/index.vue
@@ -1,9 +1,10 @@
<script setup>
import {ref,onMounted} from 'vue'
- import { goodsGetByIdApi } from '../../../api/index.js'
+ 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({})
@@ -12,6 +13,25 @@
detailInfo.value = res.data
console.log('detailInfo',detailInfo.value)
})
+ }
+ //积分兑换
+ async function integralConvert(){
+ if(detailInfo.value.useIntegral <= Number(userInfo.value.integral)){
+ await integralConvertApi({userId:userInfo.value.id,goodsId:detailInfo.value.id}).then(async(res) =>{
+ if(res.code == 200){
+ uni.showToast({
+ title:'兑换成功！',
+ icon:'none'
+ })
+ await getGoodsDetail(goodsId)
+ }
+ })
+ }else{
+ uni.showToast({
+ title:'积分余额不足！',
+ icon:'none'
+ })
+ }
}
let goodsId
onLoad(async(option) =>{
@@ -23,25 +43,36 @@
<view class="container">
<point-navbar title='商品详情'></point-navbar>
<view class="content">
- <view class="image">
- <image :src="baseUrl + '/upload'+ detailInfo.detailsUrl"></image>
+ <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>【{{detailInfo.name}}】</view>
<view>
- <rich-text :nodes='detailInfo.describe'></rich-text>
+ <text class="detail-info-text-title">【{{detailInfo.name}}】</text>
+ <text class="detail-info-text-decribe">商品描述性文字占位商品描述性文字占位商品描述性文字占位</text>
</view>
</view>
- <text>价值{{detailInfo.price}}￥</text>
+ <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></image> -->
- <text>1000</text>
+ <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">兑换</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>
@@ -56,9 +87,95 @@
.content{
width:100%;
height:calc(100vh - 176rpx);
- background:linear-gradient(to bottom,#fef7da,#FFF);
+ background:linear-gradient(to bottom,#fef7da,#f7f7f7);
padding:50rpx 32rpx 100rpx;
- box-sizing: border-box;
+ 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>
--
Gitblit v1.9.3