youdas/pages/mall/product-detail.vue

<template>
	<z-paging ref="paging" refresher-only @onRefresh="onRefresh">

		<!-- 返回 -->
		<image src="/static/ic_back.png" @click="toBack()"
			style="width: 41.98rpx; height: 41.98rpx; position: fixed; left: 30rpx; top: 137rpx;z-index: 1000;" mode="">
		</image>
		<image :src="favorite_src" @click.stop="favoriteAction()"
			style="width:64rpx; height: 64rpx;position: fixed;top: 137rpx;right: 30rpx;z-index: 1000;"></image>

		<swiper v-if="productDetail" :duration="500" circular :autoplay="true" :interval="3000"
			style="width: 100%; height: 715.65rpx; background-color: #D8D8D8;">
			<swiper-item v-for="(item, i) in productDetail.detail_image" :key="i">
				<image :src="item" style="width: 100%; height: 100%;"></image>
			</swiper-item>
		</swiper>

		<view v-if="productDetail" class=""
			style="width: 100%; height: 244.27rpx; background-color: white; position: relative;">

			<view class="item-price">
				<text class="price-symbol-small">￥</text>
				<text class="price-value-small">{{ productDetail.price }}</text>
			</view>

			<view class="" style="position: absolute; left: 30.53rpx; top: 95.42rpx; font-size: 26.72rpx;">
				{{ productDetail.title }}
			</view>

			<view class="" style="position: absolute; left: 30.53rpx; bottom: 21rpx; font-size: 22.9rpx;">
				商品详情
			</view>

			<view class="product-count">
				<text class="count-text">{{ productDetail.sales }}/{{ productDetail.stock }}</text>
				<image src="/static/ic_box.png" class="box-icon" mode="aspectFit"></image>
			</view>

		</view>

		<!-- 详情列表 -->
		<view v-if="productDetail" class="" style="width: 100%;">
			<rich-text :nodes="productDetail.detail_html"></rich-text>
		</view>

		<view class="" style="width: 100%; height:400rpx; background-color: white;"></view>

		<view class="" style="width: 100%; height: 188.94rpx; position: fixed; bottom: 0; background-color: white;">

			<view class="" @click="bayOpen"
				style="width: 654.58rpx; height: 80.15rpx; margin: 33rpx auto; background-color: #333333; display: flex; align-items: center; justify-content: center; border-radius: 15.27rpx;">
				<text style="color: #CDEF27; font-size: 22.9rpx;">立即购买</text>
			</view>

		</view>

		<!-- 使用支付弹窗组件 -->
		<payment-popup ref="paymentPopup_ref" :onSuccess="onPaymentSuccess" />
	</z-paging>
</template>

<script setup>
import { ref } from 'vue';
import { getProductDetail, addFavorite, cancelFavorite } from '@/common/server/product';
import { pay_by_order } from '@/common/server/order';
import paymentPopup from '@/components/youdas-container/payment-popup.vue';
let is_favorite = ref(false);
let productDetail = ref(null);
let paging = ref(null);
let productId = null;
let paymentPopup_ref = ref(null);
let favorite_src = computed(() => {
	return is_favorite.value ? "/static/app-plus/user/sc1.png" : "/static/app-plus/user/sc2.png";
})
onLoad(async (options) => {
	const id = options.id;
	productId = id;
	queryProductDetail();
});

const onRefresh = () => {
	console.log("onRefresh");
	queryProductDetail().then(() => {
		paging.value.complete();
	});
};
const favoriteAction = async () => {
	if (!yds.userInfo.isAccountLogin()) {
		yds.showToast("未登录，请先登录");
		return;
	}
	if (is_favorite.value) {
		await cancelFavorite(productId);
		yds.showToast("取消收藏成功");
		is_favorite.value = false;

	} else {
		await addFavorite(productId);
		yds.showToast("收藏成功");
		is_favorite.value = true;
	}
};
const queryProductDetail = async () => {
	const res = await getProductDetail(productId);
	if (res) {
		productDetail.value = res;
		console.log(productDetail.value);
		if (res.is_favorite != null) {
			is_favorite.value = res.is_favorite;
		}
	}
};

// 方法
const toBack = () => {
	console.log("777777");
	uni.navigateBack();
};

const bayOpen = () => {
	paymentPopup_ref.value.open(productId);
};

const onPaymentSuccess = () => {
	uni.showToast({
		title: '支付成功',
		icon: 'success'
	});
	paymentPopup_ref.value.close();
	queryProductDetail();
	// 可以在这里添加支付成功后的处理逻辑，比如跳转到订单页面等
};
</script>

<style lang="scss">
.item-price {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	left: 30.53rpx;
	top: 26.72rpx;
}

.price-symbol-small {
	font-size: 19.08rpx;
	margin-top: 10rpx;
	color: #FF6A6A;
}

.price-value-small {
	font-size: 41.98rpx;
	font-weight: bold;
	color: #FF6A6A;
}


.product-count {
	position: absolute;
	display: flex;
	flex-direction: row;
	right: 30.53rpx;
	top: 40rpx;
	align-items: center;

	.count-text {
		font-size: 15.27rpx;
		color: #6C6C6C;
	}

	.box-icon {
		width: 17.39rpx;
		height: 17.39rpx;
		margin-left: 7rpx;
	}
}

.arrow-icon {
	width: 10.67rpx;
	height: 19.66rpx;
	right: 25rpx;
	position: absolute;
}

//设置图片样式
::v-deep rich-text img {
	max-width: 95% !important;
	// border-radius: 10rpx;
	height: auto !important;
	display: block !important;
	margin: 0 auto;
}
</style>