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

<script setup>
	// 店铺 客服 收藏 支付
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	// 
	import util from '@/common/js/util.js'

	import JyPopup from '@/components/public/jy-popup'
	// 地址
	import JyCommodityAddress from '@/components/public/jy-commodity-address'
	import {
		useStore
	} from 'vuex'
	const {
		proxy
	} = getCurrentInstance()
	const {
		userinfo
	} = useStore().state
	// 
	const props = defineProps({
		// 商品信息
		detail: {
			type: Object,
			default: () => ({})
		},
	})
	// 地址
	const address = reactive({})

	// 规格
	const spec = reactive([{
			name: '款型',
			option: [{
					name: '普通款',
				},
				{
					name: '升级款',
				},
			],
		},
		{
			name: '卡通形象',
			option: [{
					name: '熊',
				},
				{
					name: '狗',
				},
				{
					name: '猫',
				},
				{
					name: '河豚',
				},
			],
		}
	])
	// 已选择的规格下标
	const spaceIndex = reactive([])

	// 
	const menuFn = {
		// 店铺
		store() {
			util.checkLink('pages/shop/store/index')
		},
		// 客服
		customerService() {
			util.checkLink('pages/news/question-answer/index')
		},
		// 收藏
		heibianStar() {
			// 
		}
	}

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

	/**
	 * 选择规格
	 * @param {Object} index 选择规格下标
	 * @param {Object} secIndex
	 */
	function handleSpec(index, secIndex) {
		spaceIndex.splice(index, 1, secIndex)
	}
</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 mlr10">
				<image class="wh30" src="/static/store.png" mode="widthFix" />
				<view class="f24 c999 mt10">店铺</view>
			</view>
			<view class="option ver mlr10">
				<view class="wh30 fmid">
					<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="0" />
					<uni-icons type="star" size="45rpx" color="#666" v-else />
				</view>
				<view class="f24 c999 mt10">收藏</view>
			</view>
			<view class="option ver mlr10">
				<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.popup.open()">
			<text>立即购买</text>
		</view>
	</view>

	<uni-popup type="bottom" ref="popup">
		<view class="buy popBot plr20 bfff">
			<view class="address mtb40">
				<JyCommodityAddress :address="address"></JyCommodityAddress>
			</view>

			<!-- 商品图 价格 明细 数量 -->
			<view class="jy-card-commodity-content df mtb40">
				<!-- 商品图 -->
				<image class="wh200 br10"
					src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
					mode="aspectFill" />
				<!-- 价格 明细 数量 -->
				<view class="info f1 df fdc jcsb ml30">
					<!-- 价格 -->
					<view class="content-info-price">
						<text class="cFF9B27 f28">应付</text>
						<text class="cFF9B27 f24">￥</text>
						<text class="cFF9B27 f50">89</text>
					</view>
					<!-- 已选 -->
					<view class="content-info-num">
						<text class="f26 c333">已选 规格一 / 规格二</text>
					</view>
					<!-- 计数器 -->
					<view class="w200">
						<uni-number-box :value="1" :step="1" />
					</view>
				</view>
			</view>

			<!-- 规格 -->
			<view class="spec">
				<view class="item mtb20" v-for="(item, index) in spec">
					<!-- 标题 -->
					<view class="title f32">{{item.name}}</view>
					<!-- 选项 -->
					<view class="selection df">
						<!-- disabled 销量为零不能选 -->
						<view class="option mtb20 mr20" :class="{'active': spaceIndex[index] === secIndex}"
							v-for="(secItem,secIndex) in item.option" :key="secIndex"
							@click="handleSpec(index,secIndex)">
							<text class="txt">{{secItem.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="btn lg primary mtb30" @click="link('/pages/shop/continue-pay/index')">
				<text class="cfff">立即下单 ￥89</text>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="scss">
	// 规格
	.spec {

		// 可选菜单
		.selection {

			// 选项
			.option {
				padding: 5rpx 15rpx;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				transition: .3s;
				border: 2rpx solid #F7F7F7;

				.txt {
					color: #333;
					font-size: 26rpx;
					transition: .3s;
				}

				// 被选中
				&.active {
					background-color: #FFFBF8;
					border-color: #FF9B27;

					.txt {
						color: #FF9B27;
					}
				}

				// 不能选
				&.disabled {
					background-color: F7F7F7;

					.txt {
						color: #999;
					}
				}
			}
		}
	}
</style>