商城下单购买，品类接口，钱包依赖

pages/store/buy.vue

@@ -1,52 +1,97 @@
 <template>
 	<view class="content">
 		<!-- address -->
-		<view class="block address">
-			<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
-			<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
-			<view class="user"><text>唐明阳</text>18245180131</view>
-			<view class="city">黑龙江省哈尔滨市南岗区汉水路265号</view>
-		</view>
+		<block v-if="address != ''">
+			<view class="block address" @click="$Router.push({name: 'Address'})">
+				<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
+				<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
+				<view class="user"><text>{{address.name}}</text>{{address.phone}}</view>
+				<view class="city">{{address.address}}{{address.city}}</view>
+			</view>
+		</block>
+		<block v-else>
+			<view class="block address-new" @click="$Router.push({name: 'Address'})">
+				<uni-icons class="icon" type="plus" size="26" color="#34CE98"></uni-icons>添加收货地址
+			</view>
+		</block>
 		<!-- 订单产品 -->
 		<view class="block goods-box">
-			<view class="goods-item">
-				<image class="order-cover" src="https://yanxuan-item.nosdn.127.net/6d48e6ea51a06b1356ccda21497fdb14.png" mode="aspectFill"></image>
-				<view class="order-title">茅台王子酒 金王子 53度 500毫升</view>
-				<view class="order-count">
-					<view class="order-price"><text>￥</text>275.00</view>
-					<view class="order-sum">共1件</view>
+			<block v-for="(item, index) in goodsInfo" :key="index">
+				<view class="goods-item">
+					<image class="order-cover" :src="item.items[0].cover" mode="aspectFill"></image>
+					<view class="order-title">{{item.items[0].title}}</view>
+					<view class="order-count">
+						<view class="order-price"><text>￥</text>{{item.items[0].price}}</view>
+					</view>
 				</view>
-			</view>
+			</block>
 		</view>
 		<!-- 订单信息 -->
 		<view class="block info-box">
+			<view class="info-item">
+				<view class="label">购买数量</view>
+				<uni-number-box class="info-number" :value="qty" :min="1" :max="999" @change="numberChange" />
+			</view>
 			<view class="info-item">
 				<view class="label">配送方式</view>
 				<view class="nowrap">快递</view>
 			</view>
 			<view class="info-item">
-				<view class="label">优惠金额</view>
-				<view class="nowrap">无优惠</view>
+				<view class="label">配送费用</view>
+				<view class="nowrap">{{freight <= 0 ? '免费': freight}}</view>
 			</view>
 		</view>
 		<!-- footer -->
 		<view class="order-footer">
-		    <view class="total">总计：<text>￥1399.00</text></view>
+		    <view class="total">总计：<text>￥{{total}}</text></view>
 		    <button class="btn">确认订单</button>
 		</view>
 	</view>
 </template>
 
 <script>
+	import { buy, verify } from '@/apis/interfaces/store'
 	export default {
 		data() {
 			return {
-				goodsInfo			: {},
-				expressPickerValue  : 0,
-				addressId           : '',
-				paramsId            : '',
-				goodsNumber         : ''
+				qty		  : 1,
+				goodsInfo : [],
+				total	  : 0,
+				freight	  : 0,
+				address	  : ""
 			};
+		},
+		computed:{
+			
+		},
+		onShow(){
+			if(JSON.stringify(this.$store.getters.getAddress) !== '{}') this.address = this.$store.getters.getAddress
+		},
+		mounted() {
+			console.log(this.$Route.query)
+			this.getBuy()
+		},
+		methods:{
+			getBuy(){
+				buy({
+					goods_sku_id: this.$Route.query.skuId,
+					qty: this.qty
+				}).then(res => {
+					this.address   = res.address
+					this.freight   = res.freight
+					this.total     = res.total
+					this.goodsInfo = res.detail
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			},
+			numberChange(e){
+				this.qty = e
+				this.getBuy()
+			}
 		}
 	}
 </script>
@@ -99,6 +144,18 @@
 			}
 		}
 	}
+	.address-new{
+		padding: $padding;
+		text-align: center;
+		height: 90rpx;
+		line-height: 90rpx;
+		color: $main-color;
+		.icon{
+			vertical-align: middle;
+			margin-bottom: 8rpx;
+			margin-right: 10rpx;
+		}
+	}
 	// 订单列表
 	.goods-item{
 		display: flex;
@@ -130,8 +187,8 @@
 				}
 			}
 			.order-sum{
-				font-size: 26rpx;
-				color: #777;
+				font-size: $title-size-sm;
+				color: $text-gray;
 			}
 		}
 	}

pages/store/goods.vue

@@ -23,11 +23,13 @@
 				</view>
 				<view class="sales">销量{{goods.sales}}</view>
 			</view>
-			<view class="hr">
+			<!-- <view class="hr">
 				<text>详情</text>
-			</view>
+			</view> -->
 			<view class="imgs">
-				<rich-text :nodes="goods.content"></rich-text>
+				<block v-for="(item, index) in goods.content" :key="index">
+					<image :src="item" mode="widthFix"></image>
+				</block>
 			</view>
 		</view>
 		<!-- 立即购买 -->
@@ -65,7 +67,12 @@
 				})
 			},
 			buy(){
-				console.log(buy)
+				this.$Router.push({
+					name: 'StoreBuy',
+					params: {
+						skuId: this.goods.skus[0].sku_id
+					}
+				})
 			}
 		}
 	}

pages/store/index.vue

@@ -17,7 +17,7 @@
 		</view>
 		<!-- 健康产品分类 -->
 		<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
-			<view v-for="(item, index) in goodTabs" :key="index" class="classify-item">
+			<view v-for="(item, index) in goodTabs" :key="index" class="classify-item" @click="$Router.push({name: 'StoreList', params: {id: item.category_id, title: item.name}})">
 				<view class="classify-item-nav">
 					<image class="classify-item-cover" :src="item.cover"></image>
 					<view class="classify-item-title">{{item.name}}</view>
@@ -40,7 +40,7 @@
 		<!-- 推荐品类 -->
 		<view class="card-box">
 			<block v-for="(item, index) in meals" :key="index">
-				<view class="card-box-item" :style="{'backgrond': item.color}" @click="$Router.push({name: 'StoreList', params: {id: item.meal_id}})">
+				<view class="card-box-item" :style="{'backgrond': item.color}" @click="$Router.push({name: 'StoreMeals', params: {id: item.meal_id}})">
 					<view class="card-title">{{item.title}}</view>
 					<view class="card-subtitle">{{item.subtitle}}</view>
 					<image class="card-cover" :src="item.cover" mode="aspectFill"></image>
@@ -78,15 +78,12 @@
 		methods:{
 			getMall(){
 				mall().then(res => {
-					console.log(res)
 					this.banners 	= res.banners
 					this.goodsArr 	= res.goods
 					this.newGood 	= res.news
 					this.goodTabs 	= res.categories
 					this.meals	  	= res.meals
 					uni.stopPullDownRefresh()
-				}).catch(err => {
-					console.log(err)
 				})
 			}
 		},

pages/store/list.vue

@@ -1,5 +1,10 @@
 <template>
-	<view>
+	<view class="content">
+		<!-- 分类 -->
+		<u-sticky bgColor="#fff" zIndex="99">
+			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs()"></u-tabs>
+		</u-sticky>
+		<!-- 分类商品 -->
 		<oct-goods
 			:lists="goodsArr"
 			color="#e6576b"
@@ -9,24 +14,52 @@
 </template>
 
 <script>
-	import { meals } from "@/apis/interfaces/store"
+	import { lists } from "@/apis/interfaces/store"
 	export default {
 		data() {
 			return {
-				goodsArr: []
+				goodsArr: [],
+				classify: [
+					{ name: "全部" },
+					{ name: "21天盒子" },
+					{ name: "7天盒子" },
+					{ name: "3天盒子" },
+					{ name: "复食餐" },
+				]
 			};
 		},
 		mounted(){
-			meals(this.$Route.query.id).then(res => {
-				uni.setNavigationBarTitle({
-					title: res.title
-				})
-				this.goodsArr = res.items
+			uni.setNavigationBarTitle({
+				title: this.$Route.query.title
 			})
+			this.getLists()
+		},
+		methods:{
+			// 商品列表
+			getLists() {
+				// {
+				// 	this.$Route.query.id
+				// }
+				lists({}).then(res => {
+					this.goodsArr = res.data
+					uni.stopPullDownRefresh()
+				})
+			},
+			// 二级分类筛选
+			onTabs(){
+				this.goodsArr = []
+				this.getLists()
+			}
+		},
+		onPullDownRefresh() {
+			this.getLists()
 		}
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+	.content{
+		background: $window-color;
+		min-height: 100vh;
+	}
 </style>

pages/store/meals.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="content">
+		<!-- banner -->
+		<view class="banner">
+			<image v-if="banner.length > 0" class="banner-cover" :src="banner[0].cover || ''" mode="aspectFill"></image>
+		</view>
+		<!-- 套餐列表 -->
+		<oct-goods
+			:lists="goodsArr"
+			color="#e6576b"
+			@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
+		/>
+	</view>
+</template>
+
+<script>
+	import { meals } from "@/apis/interfaces/store"
+	export default {
+		data() {
+			return {
+				banner  : [],
+				goodsArr: []
+			};
+		},
+		mounted(){
+			this.getMeals()
+		},
+		methods:{
+			getMeals(){
+				meals(this.$Route.query.id).then(res => {
+					console.log(res)
+					uni.setNavigationBarTitle({
+						title: res.meal.subtitle
+					})
+					this.banner   = res.banner
+					this.goodsArr = res.meal.goods
+					uni.stopPullDownRefresh()
+				})
+			},
+			click(){
+				console.log('筛选')
+			}
+		},
+		onPullDownRefresh() {
+			this.getMeals()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		background: $window-color;
+		min-height: 100vh;
+	}
+	// banner
+	.banner{
+		position: relative;
+		width: 100%;
+		background-color: white;
+		padding-top: 40%;
+		&-text,
+		&-cover{
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: 100%;
+		}
+	}
+	// 筛选
+	.classify-tabs{
+		background: white;
+	}
+</style>