养老商城

.env.development

@@ -7,6 +7,7 @@ VUE_APP_MINI_APP_BASE_API = '/miniapp'
 VUE_APP_ZL_WSS = '/api'
 VUE_APP_ZL_WSS_ZP='/prod-api'
 VUE_APP_ZL_JF='/blade-api'
+VUE_APP_ZL_WSS_ZP_BT='/subsidy'
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
 # It only does one thing by converting all import() to require().

.env.production

@@ -7,6 +7,7 @@ VUE_APP_ZL_JF = 'https://jifen.tjpoteviohealth.com/blade-api'
 VUE_APP_ZL_HEALTH = 'https://test.poteviohealth.com/zhylsia/'
 VUE_APP_ZL_WSS = 'https://cdbwss.poteviohealth.com'
 VUE_APP_ZL_WSS_ZP = 'https://test.poteviohealth.com/prod-api'
+VUE_APP_ZL_WSS_ZP_BT = 'https://test.poteviohealth.com/subsidy'
 
 
 

src/utils/request.js

@@ -46,7 +46,7 @@ service.interceptors.response.use(
             });
             return res
         }
-        if (res.code !== '0000' || res.code !== '200') {
+        if (res.code !== '0000') {
             Dialog({
                 message: res.message || 'Error'
             });

src/utils/zprequest.js

@@ -22,10 +22,10 @@ service.interceptors.request.use(
         if (config.requestBase == 'VUE_APP_ZL_JF') {
             config.baseURL = process.env.VUE_APP_ZL_JF;
         }
-
-
-        if (sessionStorage.getItem('x-token')) {
-            config.headers['x-token'] = sessionStorage.getItem('x-token')
+        if (config.requestBase == 'VUE_APP_ZL_WSS_ZP_BT') {
+            config.headers['access_token'] = '12194c63-504c-460e-9f57-f260c501c43a'
+            config.baseURL = process.env.VUE_APP_ZL_WSS_ZP_BT;
+            // config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
         }
         if (config.type === 'change') {
             config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
@@ -46,8 +46,9 @@ service.interceptors.request.use(
 // response interceptor
 service.interceptors.response.use(
     response => {
-        console.log(response, 'response')
+
         const res = response.data
+        console.log(res, 'res')
         const config = response.config
         if (config != null) {
             const blob = response.config.responseType
@@ -56,19 +57,19 @@ service.interceptors.response.use(
             }
         }
 
-        if (res.code === '0001') {
+        if (res.statusCode === '0001') {
             Dialog({
                 message: res.msg || 'Error'
             });
             return res
         }
-        if (res.code == '200' || response.status == '200') {
+        if (res.code == '200' || res.statusCode == '200') {
             return res
-        } else if (response.statusCode == '500' || response.statusCode == '403' || response.statusCode == '404') {
+        } else if (res.statusCode == '500' || res.statusCode == '403' || res.statusCode == '404' || res.statusCode == '221002') {
             Dialog({
-                message: res.msg || 'Error'
+                message: res.statusMsg || 'Error'
             });
-            return Promise.reject(new Error(res.message || 'Error'))
+            return Promise.reject(new Error(res.statusMsg || 'Error'))
         }
     },
     error => {

src/views/weibao/App.vue

@@ -13,7 +13,7 @@ export default {
     return {}
   },
   created() {
-    this.loginApp()
+    // this.loginApp()
   },
   methods: {
     async loginApp() {

src/views/zhulao/App.vue

@@ -22,6 +22,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  height: 100%;
 }
 
 #nav {

src/views/zhulao/api/index.js

@@ -1,4 +1,5 @@
 import request from '@/utils/zprequest'
+var qs = require('qs')
 // 新闻
 export function getTags(data) {
     return request({
@@ -34,4 +35,43 @@ export function getColumnList(params) {
         requestBase: 'VUE_APP_ZL_WSS_ZP',
         params
     })
+}
+// 适老商品 一级分类
+export function getCategoryList(params) {
+    return request({
+        url: '/food/secure/applets/getCategory.jhtml',
+        method: 'get',
+        requestBase: 'VUE_APP_ZL_WSS_ZP_BT',
+        params
+    })
+}
+// 适老商品 二级分类
+export function getCategoryById(data) {
+    return request({
+        url: '/food/secure/applets/getCategoryById.jhtml',
+        method: 'post',
+        requestBase: 'VUE_APP_ZL_WSS_ZP_BT',
+        type: 'change',
+        data: qs.stringify(data)
+    })
+}
+// 适老商品
+export function getProductByCategoryId(data) {
+    return request({
+        url: '/food/secure/applets/getProductByCategoryId.jhtml',
+        method: 'post',
+        requestBase: 'VUE_APP_ZL_WSS_ZP_BT',
+        type: 'change',
+        data: qs.stringify(data)
+    })
+}
+// 商品详情
+export function getGroupDetail(data) {
+    return request({
+        url: '/food/secure/applets/getGroupDetail.jhtml',
+        method: 'post',
+        requestBase: 'VUE_APP_ZL_WSS_ZP_BT',
+        type: 'change',
+        data: qs.stringify(data)
+    })
 }

src/views/zhulao/components/Tabbar.vue

@@ -12,9 +12,9 @@
 </template>
 <script>
 export default {
-  props: ['active'],
   data() {
     return {
+      active: 0,
       list: [
         {
           iconPath: require('../assets/images/nav/home-off.png'),
@@ -31,11 +31,13 @@ export default {
         {
           iconPath: require('../assets/images/nav/map-off.png'),
           selectedIconPath: require('../assets/images/nav/map-on.png'),
+
           text: '养老服务圈',
         },
         {
           iconPath: require('../assets/images/nav/serve-store-off.png'),
           selectedIconPath: require('../assets/images/nav/serve-store-on.png'),
+          router: '/shoppingMall',
           text: '养老商城',
         },
         {

src/views/zhulao/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router/router'
 import store from './store/index'
 import '../../styles/index.css'
+import './styles/index.css'
 import Vant from 'vant'
 import 'vant/lib/index.css'
 import 'lib-flexible/flexible'

src/views/zhulao/router/router.js

@@ -27,6 +27,22 @@ const routes = [{
         },
         component: () => import('../views/classRoom/index.vue')
     },
+    {
+        path: '/shoppingMall',
+        name: 'shoppingMall',
+        meta: {
+            keepAlive: true
+        },
+        component: () => import('../views/shoppingMall/index.vue')
+    },
+    {
+        path: '/goodsDetails',
+        name: 'goodsDetails',
+        meta: {
+            keepAlive: false
+        },
+        component: () => import('../views/shoppingMall/details.vue')
+    },
 
 
 ]

src/views/zhulao/styles/index.css

@@ -0,0 +1,4 @@
+html,
+body {
+    height: 100%;
+}

src/views/zhulao/views/classRoom/index.vue

@@ -61,6 +61,7 @@ export default {
         pageSize: this.pageSize,
         columnCode: this.active,
       }
+      this.info = []
       const res = await getArticleList(data)
 
       if (this.pageNum == 1) {
@@ -68,6 +69,7 @@ export default {
       } else {
         this.info = this.info.concat(res.rows)
       }
+      // 获取数据长度大于等于总数据长度 显示 没有更多
       if (this.info.length >= res.total) {
         this.finished = true
       }
@@ -78,8 +80,9 @@ export default {
       this.getList('')
     },
     clickTab(e) {
-      this.active = e
       this.pageNum = 1
+      this.active = e
+      this.finished = false // 切换时显示加载中
       this.getList()
     },
   },
@@ -91,7 +94,11 @@ export default {
 }
 .van-tabs {
   border-bottom: 0;
+  /deep/.van-tab {
+    font-size: 30px;
+  }
 }
+
 .videoBg {
   margin-bottom: 15px;
   width: 750px;

src/views/zhulao/views/home/index.vue

@@ -99,21 +99,19 @@ export default {
         data.columnCode = 'dynamic'
       }
       const res = await getArticleList(data)
-      if (res.code == '200') {
-        if (type == 'image') {
-          this.banner = res.rows
-        } else if (type == 'dynamic') {
-          if (this.pageNum == 1) {
-            this.info = res.rows
-          } else {
-            this.info = this.info.concat(res.rows)
-          }
-          if (this.info.length >= res.total) {
-            this.finished = true
-          }
-          this.loading = false
-          this.pageNum++
+      if (type == 'image') {
+        this.banner = res.rows
+      } else if (type == 'dynamic') {
+        if (this.pageNum == 1) {
+          this.info = res.rows
+        } else {
+          this.info = this.info.concat(res.rows)
+        }
+        if (this.info.length >= res.total) {
+          this.finished = true
         }
+        this.loading = false
+        this.pageNum++
       }
     },
     onLoad() {

src/views/zhulao/views/shoppingMall/components/goods.vue

@@ -0,0 +1,185 @@
+<template>
+  <div style="height:100%;">
+    <van-search shape="round" v-model="value" disabled placeholder="搜索" />
+    <div class="box">
+      <van-sidebar v-model="activeKey" @change="getCategoryById">
+        <van-sidebar-item v-for="item in firstCategory" :key="item.id" :title="item.name" />
+      </van-sidebar>
+      <div class="main">
+        <van-tabs v-model="active" type="line" :border="true" swipe-threshold='3' title-active-color="rgb(252, 56, 56)" @change="getProductByCategoryId">
+          <van-tab v-for="item in secondCategory" :key="item.id" :title="item.name">
+            <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-span="没有更多了" @load="onLoad">
+              <div class='goods-item' v-for="item in goodsList" :key="item.id" @click="$router.push({path:'/goodsDetails',query:{item:encodeURI(JSON.stringify(item))}})">
+                <img class='goods-pic' :src="item.url ? item.url : require('../../../assets/images/appIcon/appIcon_01.png')" />
+                <div class='goods-info'>
+                  <span class='goodsName'>{{item.name}}</span>
+                  <span class="soldNum">已售 {{item.sold}}</span>
+                  <span class='goodsPrice'>￥{{item.price}}/{{item.unit}}</span>
+                </div>
+              </div>
+            </van-list>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import {
+  getCategoryList,
+  getCategoryById,
+  getProductByCategoryId,
+} from '../../../api/index'
+
+export default {
+  data() {
+    return {
+      activeKey: 0,
+      firstCategory: [],
+      goodsList: [],
+      active: 0,
+      value: '',
+      info: [],
+      loading: false,
+      finished: false,
+      secondCategory: [],
+    }
+  },
+  created() {
+    this.getCategoryList()
+  },
+  methods: {
+    async getCategoryList() {
+      const res = await getCategoryList()
+      console.log(res, '123')
+      this.firstCategory = res.data.first
+      this.secondCategory = [
+        {
+          id: '',
+          name: '全部',
+        },
+        ...res.data.second,
+      ]
+      this.getCategoryById(0)
+    },
+    async getCategoryById() {
+      this.active = 0
+      const res = await getCategoryById({
+        id: this.firstCategory[this.activeKey].id,
+      })
+      this.secondCategory = [
+        {
+          id: '',
+          name: '全部',
+        },
+        ...res.data.second,
+      ]
+      this.getProductByCategoryId()
+    },
+    async getProductByCategoryId() {
+      this.loading = true
+      const res = await getProductByCategoryId({
+        topId: this.firstCategory[this.activeKey].id, //大类id
+        id: this.secondCategory[this.active].id, //二级分类id
+      })
+      this.goodsList = res.data.list
+      this.finished = true
+      this.loading = false
+    },
+    onLoad() {
+      //   console.log('触', this.loading)
+      //   this.loading = false
+      //   console.log('触1', this.loading)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  height: calc(100% - 100px);
+  /deep/.van-sidebar {
+    flex-shrink: 1;
+    width: 200px;
+    height: 100%;
+    background-color: #f5f5f5;
+    .van-sidebar-item__text {
+      font-size: 30px;
+    }
+  }
+}
+.main {
+  width: calc(100% - 200px);
+  height: 100%;
+  .van-tabs {
+    border-bottom: 0;
+    height: 100%;
+    text-align: left;
+    /deep/.van-tab {
+      flex: none;
+      padding: 0;
+      padding-right: 20px;
+    }
+    /deep/.van-tabs__nav--complete {
+      padding: 0;
+    }
+    /deep/.van-tabs__line {
+      height: 0;
+    }
+    /deep/.van-tabs__wrap {
+      height: 60px;
+      .van-tab__span {
+        font-size: 24px;
+      }
+    }
+    /deep/.van-tabs__content {
+      height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+  }
+}
+.goods-item {
+  width: calc(100% - 20px);
+  height: 210px;
+  display: flex;
+  padding: 10px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.goods-pic {
+  width: 160px;
+  height: 160px;
+  flex-shrink: 0;
+}
+
+.goods-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 5px 5px 5px 5px;
+  height: 160px;
+  margin-left: 16px;
+}
+.goodsName {
+  font-size: 30px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  //   height: 80px;
+}
+.soldNum {
+  font-size: 22px;
+  color: #9f9f9f;
+}
+.goodsPrice {
+  color: #e64340;
+}
+</style>

src/views/zhulao/views/shoppingMall/details.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <van-nav-bar title="详情" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <van-swipe class="my-swipe">
+      <van-swipe-item v-for="item in productImages" :key="item.linkUrl" @click="$router.push({path:'/text',query:{id:item.linkUrl,title:'新闻资讯'}})">
+        <van-image fit="fill" :src="item.source" alt="" />
+      </van-swipe-item>
+    </van-swipe>
+    <div class="price_bg">
+      <div class="price_bg_left">
+        商城优惠价: ¥ {{goodsData.price}}/{{goodsData.unit}}
+      </div>
+      <div class="price_bg_right">
+        <div class="market_price">已售{{goodsData.sold}}件</div>
+        <div class="market_price">市场价格: ¥ {{goodsData.marketPrice}}/{{goodsData.unit}}</div>
+      </div>
+    </div>
+    <!-- 名字和分享 -->
+    <div class="name_bg">
+      <div class="name_bg_left">{{goodsData.productName}}</div>
+      <!-- <button open-type='share' plain="true" class="name_bg_right">
+        <van-image class="share_icon" mode="aspectFit" :src="require('../../assets/images/store-food/share.png')" />
+      </button> -->
+    </div>
+    <!-- 类型 -->
+    <div class="type_bg">
+      <div class="content_bg" v-for="item in typeList" :key="item.name">
+        <div class="type_icon_bg">
+          <van-image class="type_icon" :src="item.icon" />
+        </div>
+        <div class="type_name">{{item.name}}</div>
+      </div>
+    </div>
+
+    <div style="width:100%;height:30px;background-color: #f0f0f0;"></div>
+
+    <!-- 商品详情 -->
+    <div class="introduce_bg">
+      <div class="introduce_title">- 商品详情 -</div>
+    </div>
+  </div>
+</template>
+<script>
+import { getGroupDetail } from '../../api/index'
+export default {
+  data() {
+    return {
+      introduction: '',
+      productImages: [],
+      goodsData: '',
+      typeList: [
+        {
+          icon: require('../../assets/images/store-food/check_mark.png'),
+          name: '品质保证',
+        },
+        {
+          icon: require('../../assets/images/store-food/check_mark.png'),
+          name: '极速发货',
+        },
+        {
+          icon: require('../../assets/images/store-food/check_mark.png'),
+          name: '免运费',
+        },
+      ],
+    }
+  },
+  created() {
+    this.goodsData = JSON.parse(decodeURI(this.$route.query.item))
+    this.getGroupDetail()
+  },
+  methods: {
+    async getGroupDetail() {
+      const res = await getGroupDetail({ id: this.goodsData.id })
+      console.log(res)
+      this.goodsData = Object.assign(this.goodsData, res.data.group)
+      this.introduction = res.data.introduction
+      this.productImages = res.data.product.productImages
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.my-swipe {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+  margin: 0 auto;
+  transform: translateY(0);
+  /deep/.van-swipe-item {
+    text-align: center;
+    overflow: hidden;
+    .van-image {
+      width: 100%;
+      height: 500px;
+    }
+  }
+}
+.price_bg {
+  width: 100%;
+  height: 104px;
+  font-size: 30px;
+  color: #dbdbdb;
+  background: linear-gradient(to bottom, #fc8253, #fc4314);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.price_bg_left {
+  flex: 0.6;
+  line-height: 100%;
+  padding-left: 30px;
+  box-sizing: border-box;
+}
+.price_bg_right {
+  flex: 0.4;
+  height: 100%;
+  font-size: 24px;
+  color: rgb(211, 211, 130);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.market_price {
+  text-align: center;
+  width: 100%;
+  line-height: 40px;
+}
+.type_bg {
+  background-color: white;
+  height: 74px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.content_bg {
+  flex: 1;
+  height: 100%;
+  color: #c5c5c5;
+  font-size: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.type_icon_bg {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.type_icon {
+  width: 25px;
+  height: 25px;
+}
+.type_name {
+  line-height: 100%;
+}
+.introduce_bg {
+  width: 100%;
+  height: 88px;
+  background-color: white;
+}
+.introduce_title {
+  width: 100%;
+  line-height: 88px;
+  color: #646464;
+  font-size: 30px;
+  text-align: center;
+}
+.share_icon {
+  width: 42px;
+  height: 42px;
+}
+.name_bg {
+  background-color: white;
+  width: 100%;
+  height: 122px;
+  color: black;
+  font-size: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: solid 1px #e2e2e2;
+  box-sizing: border-box;
+}
+.name_bg_left {
+  flex: 0.8;
+  line-height: 100%;
+  padding-left: 30px;
+  box-sizing: border-box;
+}
+.name_bg_right {
+  flex: 0.2;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: red;
+}
+</style>

src/views/zhulao/views/shoppingMall/index.vue

@@ -0,0 +1,45 @@
+
+<template>
+  <div style="height:100%;">
+    <van-nav-bar title="养老商城" fixed placeholder safe-area-inset-top />
+    <div style="height: calc(100% - 100px);">
+      <van-tabs v-model="active">
+        <van-tab title="适老产品">
+          <Goods />
+        </van-tab>
+        <van-tab title="家政服务"></van-tab>
+        <van-tab title="积分商城"></van-tab>
+      </van-tabs>
+    </div>
+
+    <Tabbar />
+  </div>
+</template>
+<script>
+import Tabbar from '../../components/Tabbar.vue'
+import Goods from './components/goods.vue'
+export default {
+  components: { Tabbar, Goods },
+  data() {
+    return {
+      active: 0,
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.van-tabs {
+  border-bottom: 0;
+  height: 100%;
+  overflow: hidden;
+  /deep/.van-tab {
+    font-size: 30px;
+  }
+  /deep/.van-tabs__content {
+    height: calc(100% - 92px);
+    .van-tab__pane {
+      height: 100%;
+    }
+  }
+}
+</style>

vue.config.js

@@ -91,6 +91,15 @@ module.exports = {
                     ['^' + process.env.VUE_APP_ZL_WSS_ZP]: ''
                 }
             },
+            [process.env.VUE_APP_ZL_WSS_ZP_BT]: {
+                target: 'https://test.poteviohealth.com/subsidy',
+                // target: 'http://localhost:12017/',
+                changeOrigin: true,
+                secure: false,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_ZL_WSS_ZP_BT]: ''
+                }
+            },
             [process.env.VUE_APP_ZL_JF]: {
                 target: 'https://jifen.tjpoteviohealth.com/blade-api',
                 // target: 'http://localhost:12017/',