xiongmao/pages/index/gift-choice/gift-choice.vue

<!-- 礼品心选 -->
<template>
	<view class="wrap">
		<image src="../../../static/bg-11.png" mode="widthFix" class="bg"></image>
		<view class="top-module">
			<view class="top-module-item" @tap="giftChoiceList">
				<view class="top-module-item-name">送长辈</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="giftChoiceList">
				<view class="top-module-item-name">送晚辈</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="giftChoiceList">
				<view class="top-module-item-name">送朋友</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="customizeGift">
				<view class="top-module-item-name">礼品定制</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
		</view>
		<view class="product-list">
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="product-item" @tap="productDetails">
				<view class="product-item-column2">
					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
					<view class="product-item-column2-bottom">
						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 跳转礼品列表、送长辈
				giftChoiceList(){
					uni.navigateTo({
						url:'../gift-choice-list/gift-choice-list'
					})
				},
				// 跳转礼品定制
				customizeGift(){
					uni.navigateTo({
						url:'../customize-gift/customize-gift'
					})
				},
				// 跳转产品详情
				productDetails(){
					uni.navigateTo({
						url:'../product-details/product-details'
					})
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	@import "./gift-choice.css";
</style>