jiuyiUniapp/jiuyi2/pages/shop/commodity/components/jy-commodity-foot/index.vue

<script setup>
	// 店铺 客服 收藏 支付
	import {
		ref,
		reactive,
		getCurrentInstance,
		computed,
		defineEmits,
		onMounted
	} from 'vue'
	// 
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 
	import {
		useStore
	} from 'vuex'
	// 生成订单
	import makeOrder from '@/components/shop/detail/makeOrder.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 
	const store = useStore()
	// 
	const props = defineProps({
		// 商品信息
		detail: {
			type: Object,
			default: () => ({})
		},
	})
	// 
	const emit = defineEmits(['update'])
	// 已选择的规格下标
	const spaceIndex = ref(0)
	// 数量
	const payNum = ref(1)
	// 当前选择的规格
	const currentSpec = computed(() => {
		let spec = props.detail.specs || []
		return spec[spaceIndex.value] || {}
	})
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)
	// 应付总价
	const total = computed(() => {
		let price = parseFloat(props.detail.price) * 100
		let result = parseInt(price * payNum.value) / 100
		return result
	})
	// 
	const menuFn = {
		// 店铺
		store() {
			link('/pages/shop/store/index')
		},
		// 客服
		customerService() {
			link('/pages/news/question-answer/index')
		},
		// 收藏
		heibianStar() {
			// 
		}
	}

	/**
	 * 跳转
	 * @param {Object} url 跳转路径
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}

	// 切换收藏
	function handleCollect() {
		// 
		api.shop.addProductCollect({
			query: {
				productId: props.detail.id,
				type: {
					0: 1,
					1: 0,
				} [props.detail.isCollect]
			},
		}).then(res => {
			if (res.code === 200) {
				emit('update', {
					...props.detail,
					isCollect: {
						0: 1,
						1: 0,
					} [props.detail.isCollect]
				})
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 立即下单
	 */
	function handlePay(event) {
		// 产生待付款订单
		api.shop.addOrder({
			data: [{
				// 地址id
				addressId: event.address.id,
				// 产品id
				productId: props.detail.id,
				// 规格id
				attrValueId: event.spec.id,
				// 数量
				payNum: event.payNum,
				// 0-普通订单，1-视频号订单
				orderType: 0,
				// 分享人id
				// shareId: userinfo.id,
			}],
		}).then(rs => {
			if (rs.code === 200) {
				// 跳转
				if (rs.data && rs.data[0]) uni.navigateTo({
					url: util.setUrl('/pages/shop/commodity/payment', {
						orderId: rs.data[0].orderId,
					})
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<!-- 填充 -->
	<view class="fill" style="height: 180rpx;"></view>

	<!-- 底部 -->
	<view class="footer footerMneu rows plr20 shadow bfff">
		<view class="menu df fdr aic">
			<view class="option ver">
				<image class="wh30" src="/static/store.png" mode="widthFix" />
				<view class="f24 c999 mt10">店铺</view>
			</view>

			<view class="option ver " @click="handleCollect">
				<view class="wh30 fmid">
					<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="detail.isCollect == 1" />
					<uni-icons type="star" size="45rpx" color="#666" v-else />
				</view>
				<view class="f24 c999 mt10">
					<text v-if="detail.isCollect == 1">已</text>
					<text>收藏</text>
				</view>
			</view>

			<!-- <view class="option ver ">
				<image class="wh30" src="/static/customer-service.png" mode="widthFix" />
				<view class="f24 c999 mt10">客服</view>
			</view> -->
		</view>

		<!-- 下单 -->
		<view class="btn lg primary f1 ml30" @click="$refs.makeOrderRef.open()">
			<text>立即购买</text>
		</view>

		<!-- 立即支付 -->
		<makeOrder ref="makeOrderRef" :detail="detail" @confirm="handlePay" />
	</view>
</template>

<style scoped lang="scss">
	// 底部菜单
	.menu {

		// 选项
		.option {
			width: 80rpx;
		}
	}
</style>