2023.8.14

api/page.js

@@ -1,13 +1,13 @@
 import request from '@/utils/request'
 
 // api地址
-const apiUri = {
+const apiUrl = {
   detail: 'page/detail'
 }
 
 // 页面数据
 export function detail(pageId) {
-  return request.get(apiUri.detail, {
+  return request.get(apiUrl.detail, {
     pageId
   })
 }

config.js

@@ -5,8 +5,8 @@ module.exports = {
 
   // 必填: 后端api地址, 斜杠/结尾, 参照下面格式
   // 例如: https://www.你的域名.com/index.php?s=/api/
-  apiUrl: "https://www.你的域名.com/index.php?s=/api/",
-
+  // apiUrl: "http://121.36.73.159:807/prod-api/",
+	apiUrl: "http://10.16.4.7/index.php?s=/api/",
   /**
    * 是否启用商城设置缓存
    * 将减少用户端重复请求; 正式运营时请设为true, 开启后商城设置同步前端需10分钟缓存

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "萤火商城2.0",
-    "appid" : "",
+    "appid" : "__UNI__0D10373",
     "description" : "萤火商城V2.0，是2021年全新推出的一款轻量级、高性能、前后端分离的电商系统",
     "versionName" : "2.0.3",
     "versionCode" : 203,
@@ -70,25 +70,36 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx01443ede9e347dea",
         "setting" : {
-          // 是否检查安全域名和 TLS 版本
-          "urlCheck" : true,
-          // es6转es5
-          "es6" : false,
-          // 上传代码时自动压缩
-          "minified" : true,
-          // 调试器 wxml面板展示 shadow-root
-          "showShadowRootInWxmlPanel" : true,
-          // 上传代码时是否自动压缩样式文件
-          "minifyWXSS" : true,
-          // 上传代码时是否自动压缩wxml文件
-          // 因uniappp构建出来的wxml本身就是压缩好的, 如果再用微信开发工具压缩一次的话, 有可能会破坏到文件, 所以此处设为false
-          "minifyWXML" : false
+            // 是否检查安全域名和 TLS 版本
+            "urlCheck" : true,
+            // es6转es5
+            "es6" : true,
+            // 上传代码时自动压缩
+            "minified" : true,
+            // 调试器 wxml面板展示 shadow-root
+            "showShadowRootInWxmlPanel" : true,
+            // 上传代码时是否自动压缩样式文件
+            "minifyWXSS" : true,
+            // 上传代码时是否自动压缩wxml文件
+            // 因uniappp构建出来的wxml本身就是压缩好的, 如果再用微信开发工具压缩一次的话, 有可能会破坏到文件, 所以此处设为false
+            "minifyWXML" : false,
+            "postcss" : true
         },
         "usingComponents" : true,
         "lazyCodeLoading" : "requiredComponents",
-        "permission" : {}
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "需要获取位置"
+            }
+        },
+        "unipush" : {
+            "enable" : false
+        },
+        "secureNetwork" : {
+            "enable" : false
+        }
     },
     "mp-alipay" : {
         "usingComponents" : true
@@ -105,7 +116,7 @@
     "h5" : {
         "router" : {
             "mode" : "history",
-            "base" : "./"
+            "base" : "/"
         }
     }
 }

pages/category/index.vue

@@ -27,6 +27,7 @@
   import Primary from './components/primary'
   import Secondary from './components/secondary'
   import Commodity from './components/commodity'
+	import { cateList, Setting } from '@/common/mock.js'
 
   // 最后一次刷新时间
   let lastRefreshTime;
@@ -87,20 +88,25 @@
       getPageData() {
         const app = this
         app.isLoading = true
-        Promise.all([
-            // 获取分类模板设置
-            // 优化建议: 可以将此处的false改为true 启用缓存
-            SettingModel.data(false),
-            // 获取分类列表
-            CategoryApi.list()
-          ])
-          .then(result => {
-            // 初始化分类模板设置
-            app.initSetting(result[0])
-            // 初始化分类列表数据
-            app.initCategory(result[1])
-          })
-          .finally(() => app.isLoading = false)
+				// 初始化分类模板设置
+				app.initSetting(Setting.data.setting)
+				// 初始化分类列表数据
+				app.initCategory(cateList)
+				app.isLoading = false
+        // Promise.all([
+        //     // 获取分类模板设置
+        //     // 优化建议: 可以将此处的false改为true 启用缓存
+        //     SettingModel.data(false),
+        //     // 获取分类列表
+        //     CategoryApi.list()
+        //   ])
+        //   .then(result => {
+        //     // 初始化分类模板设置
+        //     app.initSetting(result[0])
+        //     // 初始化分类列表数据
+        //     app.initCategory(result[1])
+        //   })
+        //   .finally(() => app.isLoading = false)
       },
 
       /**

pages/goods/detail.vue

@@ -148,6 +148,7 @@
   import SkuPopup from './components/SkuPopup'
   import Comment from './components/Comment'
   import Service from './components/Service'
+	import { goodsDetail } from '@/common/mock.js'
 
   export default {
     components: {
@@ -197,14 +198,15 @@
       // 获取商品信息
       getGoodsDetail() {
         const app = this
-        return new Promise((resolve, reject) => {
-          GoodsApi.detail(app.goodsId)
-            .then(result => {
-              app.goods = result.data.detail
-              resolve(result)
-            })
-            .catch(reject)
-        })
+				return app.goods = goodsDetail.data.detail
+        // return new Promise((resolve, reject) => {
+        //   GoodsApi.detail(app.goodsId)
+        //     .then(result => {
+        //       app.goods = result.data.detail
+        //       resolve(result)
+        //     })
+        //     .catch(reject)
+        // })
       },
 
       // 获取购物车总数量

pages/goods/list.vue

@@ -1,463 +1,473 @@
 <template>
-  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
-    <!-- 页面头部 -->
-    <view class="header">
-      <search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
-      <!-- 切换列表显示方式 -->
-      <view class="show-view" @click="handleShowView">
-        <text class="iconfont icon-view-tile" v-if="showView"></text>
-        <text class="iconfont icon-view-list" v-else></text>
-      </view>
-    </view>
-
-    <!-- 排序标签 -->
-    <view class="store-sort">
-      <view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
-        <text>综合</text>
-      </view>
-      <view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
-        <text>销量</text>
-      </view>
-      <view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" @click="handleSortType('price')">
-        <text>价格</text>
-        <view class="price-arrow">
-          <view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }">
-            <text class="iconfont icon-arrow-up"></text>
-          </view>
-          <view class="icon down" :class="{ active: sortType === 'price' && sortPrice }">
-            <text class="iconfont icon-arrow-down"></text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 商品列表 -->
-    <view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
-      <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)">
-        <!-- 单列显示 -->
-        <view v-if="showView" class="dis-flex">
-          <!-- 商品图片 -->
-          <view class="goods-item_left">
-            <image class="image" :src="item.goods_image"></image>
-          </view>
-          <view class="goods-item_right">
-            <!-- 商品名称 -->
-            <view class="goods-name">
-              <text class="twoline-hide">{{ item.goods_name }}</text>
-            </view>
-            <view class="goods-item_desc">
-              <!-- 商品卖点 -->
-              <view class="desc-selling_point dis-flex">
-                <text class="oneline-hide">{{ item.selling_point }}</text>
-              </view>
-              <!-- 商品销量 -->
-              <view class="desc-goods_sales dis-flex">
-                <text>已售{{ item.goods_sales }}件</text>
-              </view>
-              <!-- 商品价格 -->
-              <view class="desc_footer">
-                <text class="price_x">¥{{ item.goods_price_min }}</text>
-                <text class="price_y col-9" v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-        <!-- 多列显示 -->
-        <view v-else class="">
-          <!-- 商品图片 -->
-          <view class="goods-image">
-            <image class="image" mode="aspectFill" :src="item.goods_image"></image>
-          </view>
-          <view class="detail">
-            <!-- 商品标题 -->
-            <view class="goods-name">
-              <text class="twoline-hide">{{ item.goods_name }}</text>
-            </view>
-            <!-- 商品价格 -->
-            <view class="detail-price oneline-hide">
-              <text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
-              <text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </mescroll-body>
+	<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
+		:up="upOption" @up="upCallback">
+		<!-- 页面头部 -->
+		<view class="header">
+			<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
+			<!-- 切换列表显示方式 -->
+			<view class="show-view" @click="handleShowView">
+				<text class="iconfont icon-view-tile" v-if="showView"></text>
+				<text class="iconfont icon-view-list" v-else></text>
+			</view>
+		</view>
+
+		<!-- 排序标签 -->
+		<view class="store-sort">
+			<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
+				<text>综合</text>
+			</view>
+			<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
+				<text>销量</text>
+			</view>
+			<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }"
+				@click="handleSortType('price')">
+				<text>价格</text>
+				<view class="price-arrow">
+					<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }">
+						<text class="iconfont icon-arrow-up"></text>
+					</view>
+					<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }">
+						<text class="iconfont icon-arrow-down"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商品列表 -->
+		<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
+			<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)">
+				<!-- 单列显示 -->
+				<view v-if="showView" class="dis-flex">
+					<!-- 商品图片 -->
+					<view class="goods-item_left">
+						<image class="image" :src="item.goods_image"></image>
+					</view>
+					<view class="goods-item_right">
+						<!-- 商品名称 -->
+						<view class="goods-name">
+							<text class="twoline-hide">{{ item.goods_name }}</text>
+						</view>
+						<view class="goods-item_desc">
+							<!-- 商品卖点 -->
+							<view class="desc-selling_point dis-flex">
+								<text class="oneline-hide">{{ item.selling_point }}</text>
+							</view>
+							<!-- 商品销量 -->
+							<view class="desc-goods_sales dis-flex">
+								<text>已售{{ item.goods_sales }}件</text>
+							</view>
+							<!-- 商品价格 -->
+							<view class="desc_footer">
+								<text class="price_x">¥{{ item.goods_price_min }}</text>
+								<text class="price_y col-9" v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<!-- 多列显示 -->
+				<view v-else class="">
+					<!-- 商品图片 -->
+					<view class="goods-image">
+						<image class="image" mode="aspectFill" :src="item.goods_image"></image>
+					</view>
+					<view class="detail">
+						<!-- 商品标题 -->
+						<view class="goods-name">
+							<text class="twoline-hide">{{ item.goods_name }}</text>
+						</view>
+						<!-- 商品价格 -->
+						<view class="detail-price oneline-hide">
+							<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
+							<text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</mescroll-body>
 </template>
 
 <script>
-  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
-  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
-  import * as GoodsApi from '@/api/goods'
-  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
-  import Search from '@/components/search'
-
-  const pageSize = 15
-  const showViewKey = 'GoodsList-ShowView';
-
-  export default {
-    components: {
-      MescrollBody,
-      Search
-    },
-
-    mixins: [MescrollMixin],
-
-    data() {
-      return {
-        showView: false, // 列表显示方式 (true列表、false平铺)
-        sortType: 'all', // 排序类型
-        sortPrice: false, // 价格排序 (true高到低 false低到高)
-        options: {}, // 当前页面参数
-        list: getEmptyPaginateObj(), // 商品列表数据
-
-        // 上拉加载配置
-        upOption: {
-          // 首次自动执行
-          auto: true,
-          // 每页数据的数量; 默认10
-          page: { size: pageSize },
-          // 数量要大于4条才显示无更多数据
-          noMoreSize: 4,
-        }
-      }
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-      // 记录options
-      this.options = options
-      // 设置默认列表显示方式
-      this.setShowView()
-    },
-
-    methods: {
-
-      /**
-       * 上拉加载的回调 (页面初始化时也会执行一次)
-       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
-       * @param {Object} page
-       */
-      upCallback(page) {
-        const app = this
-        // 设置列表数据
-        app.getGoodsList(page.num)
-          .then(list => {
-            const curPageLen = list.data.length
-            const totalSize = list.data.total
-            app.mescroll.endBySize(curPageLen, totalSize)
-          })
-          .catch(() => app.mescroll.endErr())
-      },
-
-      // 设置默认列表显示方式
-      setShowView() {
-        this.showView = uni.getStorageSync(showViewKey) || false
-      },
-
-      /**
-       * 获取商品列表
-       * @param {number} pageNo 页码
-       */
-      getGoodsList(pageNo = 1) {
-        const app = this
-        console.log(app.options)
-        const param = {
-          sortType: app.sortType,
-          sortPrice: Number(app.sortPrice),
-          categoryId: app.options.categoryId || 0,
-          goodsName: app.options.search || '',
-          page: pageNo
-        }
-        return new Promise((resolve, reject) => {
-          GoodsApi.list(param)
-            .then(result => {
-              // 合并新数据
-              const newList = result.data.list
-              app.list.data = getMoreListData(newList, app.list, pageNo)
-              resolve(newList)
-            })
-            .catch(reject)
-        })
-      },
-
-      // 切换排序方式
-      handleSortType(newSortType) {
-        const app = this
-        const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
-        app.sortType = newSortType
-        app.sortPrice = newSortPrice
-        // 刷新列表数据
-        app.list = getEmptyPaginateObj()
-        app.mescroll.resetUpScroll()
-      },
-
-      // 切换列表显示方式
-      handleShowView() {
-        const app = this
-        app.showView = !app.showView
-        uni.setStorageSync(showViewKey, app.showView)
-      },
-
-      // 跳转商品详情页
-      onTargetDetail(goodsId) {
-        this.$navTo('pages/goods/detail', { goodsId })
-      },
-
-      /**
-       * 商品搜索
-       */
-      handleSearch() {
-        const searchPageUrl = 'pages/search/index'
-        // 判断来源页面
-        let pages = getCurrentPages()
-        if (pages.length > 1 &&
-          pages[pages.length - 2].route === searchPageUrl) {
-          uni.navigateBack()
-          return
-        }
-        // 跳转到商品搜索页
-        this.$navTo(searchPageUrl)
-      }
-
-    },
-
-
-    /**
-     * 设置分享内容
-     */
-    onShareAppMessage() {
-      // 构建分享参数
-      return {
-        title: "全部分类",
-        path: "/pages/category/index?" + this.$getShareUrlParams()
-      }
-    },
-
-    /**
-     * 分享到朋友圈
-     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
-     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
-     */
-    onShareTimeline() {
-      // 构建分享参数
-      return {
-        title: "全部分类",
-        path: "/pages/category/index?" + this.$getShareUrlParams()
-      }
-    }
-
-  }
+	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+	import * as GoodsApi from '@/api/goods'
+	import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
+	import Search from '@/components/search'
+	import { goodsList } from '@/common/mock.js'
+
+	const pageSize = 15
+	const showViewKey = 'GoodsList-ShowView';
+
+	export default {
+		components: {
+			MescrollBody,
+			Search
+		},
+
+		mixins: [MescrollMixin],
+
+		data() {
+			return {
+				showView: false, // 列表显示方式 (true列表、false平铺)
+				sortType: 'all', // 排序类型
+				sortPrice: false, // 价格排序 (true高到低 false低到高)
+				options: {}, // 当前页面参数
+				list: getEmptyPaginateObj(), // 商品列表数据
+
+				// 上拉加载配置
+				upOption: {
+					// 首次自动执行
+					auto: true,
+					// 每页数据的数量; 默认10
+					page: { size: pageSize },
+					// 数量要大于4条才显示无更多数据
+					noMoreSize: 4,
+				}
+			}
+		},
+
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {
+			// 记录options
+			this.options = options
+			// 设置默认列表显示方式
+			this.setShowView()
+		},
+
+		methods: {
+
+			/**
+			 * 上拉加载的回调 (页面初始化时也会执行一次)
+			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+			 * @param {Object} page
+			 */
+			upCallback(page) {
+				const app = this
+				// const curPageLen = goodsList.data.length
+				// const totalSize = goodsList.data.total
+				// app.mescroll.endBySize(curPageLen, totalSize)
+				// app.mescroll.endErr()
+				// 设置列表数据
+				app.getGoodsList(page.num)
+					.then(list => {
+						const curPageLen = list.data.length
+						const totalSize = list.data.total
+						app.mescroll.endBySize(curPageLen, totalSize)
+					})
+					.catch(() => app.mescroll.endErr())
+			},
+
+			// 设置默认列表显示方式
+			setShowView() {
+				this.showView = uni.getStorageSync(showViewKey) || false
+			},
+
+			/**
+			 * 获取商品列表
+			 * @param {number} pageNo 页码
+			 */
+			getGoodsList(pageNo = 1) {
+				const app = this
+				console.log(app.options)
+				const param = {
+					sortType: app.sortType,
+					sortPrice: Number(app.sortPrice),
+					categoryId: app.options.categoryId || 0,
+					goodsName: app.options.search || '',
+					page: pageNo
+				}
+				// 合并新数据
+				const newList = goodsList.data.list
+				app.list.data = getMoreListData(newList, app.list, pageNo)
+				// return new Promise((resolve, reject) => {
+				//   GoodsApi.list(param)
+				//     .then(result => {
+				//       // 合并新数据
+				//       const newList = result.data.list
+				//       app.list.data = getMoreListData(newList, app.list, pageNo)
+				//       resolve(newList)
+				//     })
+				//     .catch(reject)
+				// })
+			},
+
+			// 切换排序方式
+			handleSortType(newSortType) {
+				const app = this
+				const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
+				app.sortType = newSortType
+				app.sortPrice = newSortPrice
+				// 刷新列表数据
+				app.list = getEmptyPaginateObj()
+				app.mescroll.resetUpScroll()
+			},
+
+			// 切换列表显示方式
+			handleShowView() {
+				const app = this
+				app.showView = !app.showView
+				uni.setStorageSync(showViewKey, app.showView)
+			},
+
+			// 跳转商品详情页
+			onTargetDetail(goodsId) {
+				this.$navTo('pages/goods/detail', { goodsId })
+			},
+
+			/**
+			 * 商品搜索
+			 */
+			handleSearch() {
+				const searchPageUrl = 'pages/search/index'
+				// 判断来源页面
+				let pages = getCurrentPages()
+				if (pages.length > 1 &&
+					pages[pages.length - 2].route === searchPageUrl) {
+					uni.navigateBack()
+					return
+				}
+				// 跳转到商品搜索页
+				this.$navTo(searchPageUrl)
+			}
+
+		},
+
+
+		/**
+		 * 设置分享内容
+		 */
+		onShareAppMessage() {
+			// 构建分享参数
+			return {
+				title: "全部分类",
+				path: "/pages/category/index?" + this.$getShareUrlParams()
+			}
+		},
+
+		/**
+		 * 分享到朋友圈
+		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
+		 */
+		onShareTimeline() {
+			// 构建分享参数
+			return {
+				title: "全部分类",
+				path: "/pages/category/index?" + this.$getShareUrlParams()
+			}
+		}
+
+	}
 </script>
 
 <style lang="scss" scoped>
-  // 页面头部
-  .header {
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-
-    // 搜索框
-    .search {
-      flex: 1;
-    }
-
-    // 切换显示方式
-    .show-view {
-      width: 60rpx;
-      height: 60rpx;
-      line-height: 60rpx;
-      font-size: 36rpx;
-      color: #505050;
-    }
-  }
-
-  // 排序组件
-  .store-sort {
-    position: sticky;
-    top: var(--window-top);
-    display: flex;
-    padding: 20rpx 0;
-    font-size: 28rpx;
-    background: #fff;
-    color: #000;
-    z-index: 99;
-
-    .sort-item {
-      flex-basis: 33.3333%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 50rpx;
-
-      &.active {
-        color: #e49a3d;
-      }
-    }
-
-    .sort-item-price .price-arrow {
-      margin-left: 20rpx;
-      font-size: 24rpx;
-      color: #000;
-
-      .icon {
-        &.active {
-          color: #e49a3d;
-        }
-
-        &.up {
-          margin-bottom: -16rpx;
-        }
-
-        &.down {
-          margin-top: -16rpx;
-        }
-      }
-
-    }
-
-  }
-
-  // 商品列表
-  .goods-list {
-    padding: 4rpx;
-    box-sizing: border-box;
-  }
-
-  // 单列显示
-  .goods-list.column-1 {
-    .goods-item {
-      width: 100%;
-      height: 280rpx;
-      margin-bottom: 12rpx;
-      padding: 20rpx;
-      box-sizing: border-box;
-      background: #fff;
-      line-height: 1.6;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .goods-item_left {
-      display: flex;
-      width: 300rpx;
-      background: #fff;
-      align-items: center;
-
-      .image {
-        display: block;
-        width: 240rpx;
-        height: 240rpx;
-      }
-    }
-
-    .goods-item_right {
-      position: relative;
-      // width: 450rpx;
-      flex: 1;
-
-      .goods-name {
-        margin-top: 10rpx;
-        min-height: 68rpx;
-        line-height: 1.3;
-        white-space: normal;
-        color: #484848;
-        font-size: 26rpx;
-      }
-    }
-
-    .goods-item_desc {
-      margin-top: 8rpx;
-    }
-
-    .desc-selling_point {
-      width: 400rpx;
-      font-size: 24rpx;
-      color: #e49a3d;
-    }
-
-    .desc-goods_sales {
-      color: #999;
-      font-size: 24rpx;
-    }
-
-    .desc_footer {
-      font-size: 24rpx;
-
-      .price_x {
-        margin-right: 16rpx;
-        color: #f03c3c;
-        font-size: 30rpx;
-      }
-
-      .price_y {
-        text-decoration: line-through;
-      }
-    }
-  }
-
-  // 平铺显示
-  .goods-list.column-2 {
-    .goods-item {
-      width: 50%;
-    }
-  }
-
-  .goods-item {
-    float: left;
-    box-sizing: border-box;
-    padding: 6rpx;
-
-    .goods-image {
-      position: relative;
-      width: 100%;
-      height: 0;
-      padding-bottom: 100%;
-      overflow: hidden;
-      background: #fff;
-
-      &:after {
-        content: '';
-        display: block;
-        margin-top: 100%;
-      }
-
-      .image {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        -o-object-fit: cover;
-        object-fit: cover;
-      }
-    }
-
-    .detail {
-      padding: 8rpx;
-      background: #fff;
-
-      .goods-name {
-        min-height: 68rpx;
-        line-height: 32rpx;
-        white-space: normal;
-        color: #484848;
-        font-size: 26rpx;
-      }
-
-      .detail-price {
-        .goods-price {
-          margin-right: 8rpx;
-        }
-
-        .line-price {
-          text-decoration: line-through;
-        }
-      }
-    }
-  }
-</style>
+	// 页面头部
+	.header {
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+
+		// 搜索框
+		.search {
+			flex: 1;
+		}
+
+		// 切换显示方式
+		.show-view {
+			width: 60rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			font-size: 36rpx;
+			color: #505050;
+		}
+	}
+
+	// 排序组件
+	.store-sort {
+		position: sticky;
+		top: var(--window-top);
+		display: flex;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+		background: #fff;
+		color: #000;
+		z-index: 99;
+
+		.sort-item {
+			flex-basis: 33.3333%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 50rpx;
+
+			&.active {
+				color: #e49a3d;
+			}
+		}
+
+		.sort-item-price .price-arrow {
+			margin-left: 20rpx;
+			font-size: 24rpx;
+			color: #000;
+
+			.icon {
+				&.active {
+					color: #e49a3d;
+				}
+
+				&.up {
+					margin-bottom: -16rpx;
+				}
+
+				&.down {
+					margin-top: -16rpx;
+				}
+			}
+
+		}
+
+	}
+
+	// 商品列表
+	.goods-list {
+		padding: 4rpx;
+		box-sizing: border-box;
+	}
+
+	// 单列显示
+	.goods-list.column-1 {
+		.goods-item {
+			width: 100%;
+			height: 280rpx;
+			margin-bottom: 12rpx;
+			padding: 20rpx;
+			box-sizing: border-box;
+			background: #fff;
+			line-height: 1.6;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.goods-item_left {
+			display: flex;
+			width: 300rpx;
+			background: #fff;
+			align-items: center;
+
+			.image {
+				display: block;
+				width: 240rpx;
+				height: 240rpx;
+			}
+		}
+
+		.goods-item_right {
+			position: relative;
+			// width: 450rpx;
+			flex: 1;
+
+			.goods-name {
+				margin-top: 10rpx;
+				min-height: 68rpx;
+				line-height: 1.3;
+				white-space: normal;
+				color: #484848;
+				font-size: 26rpx;
+			}
+		}
+
+		.goods-item_desc {
+			margin-top: 8rpx;
+		}
+
+		.desc-selling_point {
+			width: 400rpx;
+			font-size: 24rpx;
+			color: #e49a3d;
+		}
+
+		.desc-goods_sales {
+			color: #999;
+			font-size: 24rpx;
+		}
+
+		.desc_footer {
+			font-size: 24rpx;
+
+			.price_x {
+				margin-right: 16rpx;
+				color: #f03c3c;
+				font-size: 30rpx;
+			}
+
+			.price_y {
+				text-decoration: line-through;
+			}
+		}
+	}
+
+	// 平铺显示
+	.goods-list.column-2 {
+		.goods-item {
+			width: 50%;
+		}
+	}
+
+	.goods-item {
+		float: left;
+		box-sizing: border-box;
+		padding: 6rpx;
+
+		.goods-image {
+			position: relative;
+			width: 100%;
+			height: 0;
+			padding-bottom: 100%;
+			overflow: hidden;
+			background: #fff;
+
+			&:after {
+				content: '';
+				display: block;
+				margin-top: 100%;
+			}
+
+			.image {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				-o-object-fit: cover;
+				object-fit: cover;
+			}
+		}
+
+		.detail {
+			padding: 8rpx;
+			background: #fff;
+
+			.goods-name {
+				min-height: 68rpx;
+				line-height: 32rpx;
+				white-space: normal;
+				color: #484848;
+				font-size: 26rpx;
+			}
+
+			.detail-price {
+				.goods-price {
+					margin-right: 8rpx;
+				}
+
+				.line-price {
+					text-decoration: line-through;
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -1,132 +1,139 @@
 <template>
-  <view class="container">
-    <!-- 店铺页面组件 -->
-    <Page :items="items" />
-  </view>
+	<view class="container">
+		<!-- 店铺页面组件 -->
+		<Page :items="items" />
+	</view>
 </template>
 
 <script>
-  import { setCartTabBadge } from '@/core/app'
-  import * as Api from '@/api/page'
-  import Page from '@/components/page'
+	import { setCartTabBadge } from '@/core/app'
+	import * as Api from '@/api/page'
+	import Page from '@/components/page'
+	import { homePage } from '@/common/mock.js'
 
-  const App = getApp()
+	const App = getApp()
 
-  export default {
-    components: {
-      Page
-    },
-    data() {
-      return {
-        // 页面参数
-        options: {},
-        // 页面属性
-        page: {},
-        // 页面元素
-        items: []
-      }
-    },
+	export default {
+		components: {
+			Page
+		},
+		data() {
+			return {
+				// 页面参数
+				options: {},
+				// 页面属性
+				page: {},
+				// 页面元素
+				items: []
+			}
+		},
 
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-      // 当前页面参数
-      this.options = options
-      // 加载页面数据
-      this.getPageData();
-    },
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {
+			// 当前页面参数
+			this.options = options
+			// 加载页面数据
+			this.getPageData();
+		},
 
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-      // 更新购物车角标
-      setCartTabBadge()
-    },
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow() {
+			// 更新购物车角标
+			setCartTabBadge()
+		},
 
-    methods: {
+		methods: {
 
-      /**
-       * 加载页面数据
-       * @param {Object} callback
-       */
-      getPageData(callback) {
-        const app = this
-        const pageId = app.options.pageId || 0
-        Api.detail(pageId)
-          .then(result => {
-            // 设置页面数据
-            const { data: { pageData } } = result
-            app.page = pageData.page
-            app.items = pageData.items
-            // 设置顶部导航栏栏
-            app.setPageBar();
-          })
-          .finally(() => callback && callback())
-      },
+			/**
+			 * 加载页面数据
+			 * @param {Object} callback
+			 */
+			getPageData(callback) {
+				const app = this
+				const pageId = app.options.pageId || 0
+				// 设置页面数据
+				const { data: { pageData } } = homePage
+				app.page = pageData.page
+				app.items = pageData.items
+				// 设置顶部导航栏栏
+				app.setPageBar();
+				// Api.detail(pageId)
+				// 	.then(result => {
+				// 		// 设置页面数据
+				// 		const { data: { pageData } } = result
+				// 		app.page = pageData.page
+				// 		app.items = pageData.items
+				// 		// 设置顶部导航栏栏
+				// 		app.setPageBar();
+				// 	})
+				// 	.finally(() => callback && callback())
+			},
 
-      /**
-       * 设置顶部导航栏
-       */
-      setPageBar() {
-        const {
-          page
-        } = this
-        // 设置页面标题
-        uni.setNavigationBarTitle({
-          title: page.params.title
-        });
-        // 设置navbar标题、颜色
-        uni.setNavigationBarColor({
-          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
-          backgroundColor: page.style.titleBackgroundColor
-        })
-      },
+			/**
+			 * 设置顶部导航栏
+			 */
+			setPageBar() {
+				const {
+					page
+				} = this
+				// 设置页面标题
+				uni.setNavigationBarTitle({
+					title: page.params.title
+				});
+				// 设置navbar标题、颜色
+				uni.setNavigationBarColor({
+					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
+					backgroundColor: page.style.titleBackgroundColor
+				})
+			},
 
-    },
+		},
 
-    /**
-     * 下拉刷新
-     */
-    onPullDownRefresh() {
-      // 获取首页数据
-      this.getPageData(() => {
-        uni.stopPullDownRefresh()
-      })
-    },
+		/**
+		 * 下拉刷新
+		 */
+		onPullDownRefresh() {
+			// 获取首页数据
+			this.getPageData(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
 
-    /**
-     * 分享当前页面
-     */
-    onShareAppMessage() {
-      const app = this
-      const { page } = app
-      return {
-        title: page.params.share_title,
-        path: "/pages/index/index?" + app.$getShareUrlParams()
-      }
-    },
+		/**
+		 * 分享当前页面
+		 */
+		onShareAppMessage() {
+			const app = this
+			const { page } = app
+			return {
+				title: page.params.share_title,
+				path: "/pages/index/index?" + app.$getShareUrlParams()
+			}
+		},
 
-    /**
-     * 分享到朋友圈
-     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
-     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
-     */
-    onShareTimeline() {
-      const app = this
-      const { page } = app
-      return {
-        title: page.params.share_title,
-        path: "/pages/index/index?" + app.$getShareUrlParams()
-      }
-    }
+		/**
+		 * 分享到朋友圈
+		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
+		 */
+		onShareTimeline() {
+			const app = this
+			const { page } = app
+			return {
+				title: page.params.share_title,
+				path: "/pages/index/index?" + app.$getShareUrlParams()
+			}
+		}
 
-  }
+	}
 </script>
 
 <style lang="scss" scoped>
-  .container {
-    background: #fff;
-  }
-</style>
+	.container {
+		background: #fff;
+	}
+</style>

pages/user/index.vue

@@ -137,6 +137,7 @@
   import * as UserApi from '@/api/user'
   import * as OrderApi from '@/api/order'
   import { checkLogin } from '@/core/app'
+	import {Setting} from '@/common/mock.js'
 
   // 订单操作
   const orderNavbar = [
@@ -213,6 +214,12 @@
       getPageData(callback) {
         const app = this
         app.isLoading = true
+				// app.setting = Setting.data.setting
+				// app.initService()
+				// app.initOrderTabbar()
+				
+				
+				// app.isLoading = false
         Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
           .then(result => {
             app.isFirstload = false
@@ -260,13 +267,14 @@
       // 获取商城设置
       getSetting() {
         const app = this
-        return new Promise((resolve, reject) => {
-          SettingModel.data()
-            .then(setting => {
-              app.setting = setting
-              resolve(setting)
-            }).catch(reject)
-        })
+				return app.setting = Setting.data.setting
+        // return new Promise((resolve, reject) => {
+        //   SettingModel.data()
+        //     .then(setting => {
+        //       app.setting = setting
+        //       resolve(setting)
+        //     }).catch(reject)
+        // })
       },
 
       // 获取当前用户信息