clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接后台接口

This commit is contained in:
donqi 2022-05-23 17:39:24 +08:00
parent 767b05e9fa
commit 6c3b7196ad
4 changed files with 374 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/js/globalData.js
View File

@ -1,5 +1,6 @@
export default {
deptId: 101,
from: 'customer',
initPageNum: 1,
initPageSize: 5
}

47
common/js/request.js
View File

@ -6,9 +6,17 @@ export default {
uni.addInterceptor('request', {
invoke(args) {
// request 触发前拼接 url
// args.url = 'https://www.opsoul.com' + args.url;
args.url = 'https://www.opsoul.com' + args.url;
// args.url = 'http://192.168.2.3:80' + args.url;
args.url = 'http://127.0.0.1:80' + args.url;
// args.url = 'http://127.0.0.1:80' + args.url;
if (args.data) {
args.data.deptId = globalData.deptId;
args.data.from = globalData.from;
}
if (args.header) {
args.header.deptId = globalData.deptId;
args.header.from = globalData.from;
}
// console.log("停止触发");
// return false;
},
@ -61,14 +69,8 @@ export default {
}
})
},
async login() {
// 从缓存中获取登录信息
let userInfo = uni.getStorageSync('userProfile');
if (userInfo) {
return true;
}
userInfo = await wx.getUserProfile({
async login() {
let userInfo = await wx.getUserProfile({
desc: '用于小程序登录'
});
console.log("从微信获取基本用户信息：" + userInfo);
@ -110,7 +112,7 @@ export default {
console.log("通过后台服务获取用户信息：" + userInfo);
if (!userInfo || userInfo.customerId == null || userInfo.customerId == undefined) {
uni.showToast({
icon: 'error',
icon: 'none',
title: '微信用户信息获取失败，请退出小程序重试'
})
return false;
@ -225,5 +227,26 @@ export default {
data: params
})
return res[1].data;
}
},
async listByStep(params = {goodsCategoryId : null}) {
let res = await uni.request({
url: '/goods/deptcategory/listByStep',
method: 'POST',
data: params
})
return res[1].data;
},
async uploadFile(filePath) {
let res = await uni.uploadFile({
url: this.address + '/tool/qiniu/upload',
filePath: filePath,
name: 'uploadFile'
})
let resStr = res[1].data;
let resObj = {};
if (resStr != null && resStr.length > 0) {
resObj = JSON.parse(resStr);
}
return resObj;
},
}

199
pages/index/home.vue
View File

@ -1,24 +1,28 @@
<template name="index">
<view>
<!-- 轮播图-->
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="item.id">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
v-if="item.type=='video'"></video>
</swiper-item>
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="item.id">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
v-if="item.type=='video'"></video>
</swiper-item>
</swiper>
<!-- 搜索栏 -->
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @confirm="searchGoods" :adjust-position="true" type="text"
placeholder="输入搜索内容" confirm-type="search"></input>
<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
confirm-type="search"></input>
</view>
<!-- 区域筛选picker -->
<view class="action">
<text>广州</text>
<text class="cuIcon-location"></text>
<picker :mode="'multiSelector'" @change="regionChange"
@columnchange="regionColChange" :value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
<text class="cuIcon-location"></text>
</picker>
</view>
</view>
<view class="margin-lr-sm margin-bottom-with-bar">
@ -42,7 +46,8 @@
</view>
<!-- 热门细类 -->
<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5" @click="searchGoods(item)">
<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5"
@click="searchGoods(item)">
<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
<view class="cu-tag badge" v-if="item.badge!=0">
<block v-if="item.badge!=1">{{item.badge}}</block>
@ -66,20 +71,20 @@
<!-- 超值服务 -->
<vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
:title="discountGoods.title"></vertical-goods-card>
<!-- 热门服务 -->
<vertical-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
:title="hotGoods.title"></vertical-goods-card>
</view>
<!-- 强制要求用户授权登录的弹窗 -->
<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
<view class="cu-dialog">
<view class="padding-xl">
需先授权微信登录才可正常使用功能
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
</view>
</view>
<!-- 热门服务 -->
<vertical-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos" :title="hotGoods.title">
</vertical-goods-card>
</view>
<!-- 强制要求用户授权登录的弹窗 -->
<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
<view class="cu-dialog">
<view class="padding-xl">
需先授权微信登录才可正常使用功能
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
</view>
</view>
</view>
</view>
</template>
@ -87,7 +92,7 @@
<script>
import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
export default {
export default {
name: 'index',
components: {
verticalGoodsCard
@ -100,39 +105,103 @@
categories: [],
subCategories: [],
hotGoods: {},
discountGoods: {},
InputBottom: 0,
isAuthWxLoginModal: false
discountGoods: {},
InputBottom: 0,
isAuthWxLoginModal: false,
searchInfo: {},
areaList: [],
areaMultiIndex: [0, 0, 0],
}
},
mounted() {
this.bindEvent();
},
beforeDestroy() {
this.offBindEvent();
},
mounted() {
this.bindEvent();
},
beforeDestroy() {
this.offBindEvent();
},
onReady() {
this.loadData();
},
methods: {
async loadData() {
let curUserInfo = this.$request.getCurUserInfo();
this.isAuthWxLoginModal = curUserInfo ? false : true;
if (this.isAuthWxLoginModal) {
return;
async loadData() {
let curUserInfo = this.$request.getCurUserInfo();
this.isAuthWxLoginModal = curUserInfo ? false : true;
if (this.isAuthWxLoginModal) {
return;
}
this.loadRegionList();
this.swiperList = await this.$api.data('swiperList');
this.categories = await this.$api.data('categories');
this.subCategories = await this.$api.data('subCategories');
this.moduleBarInfos = await this.$api.data('moduleBarInfos');
this.hotGoods = await this.$api.data('hotGoods');
this.discountGoods = await this.$api.data('discountGoods');
},
bindEvent() {
uni.$on('index_showProductDetail', this.showDetails);
},
offBindEvent() {
uni.$off('index_showProductDetail');
},
bindEvent() {
uni.$on('index_showProductDetail', this.showDetails);
},
offBindEvent() {
uni.$off('index_showProductDetail');
},
async loadRegionList() {
let regionList = await this.$request.areaListByStep();
regionList = regionList.data;
let subRegionList = [];
let subSubRegionList = [];
if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({
parentCode: regionList[0].areaCode
});
subRegionList = subRegionList.data;
}
if (subRegionList && subRegionList.length > 0) {
subSubRegionList = await this.$request.areaListByStep({
parentCode: subRegionList[0].areaCode
});
subSubRegionList = subSubRegionList.data;
}
this.areaList.push(regionList);
this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList);
},
regionChange(e) {
this.areaMultiIndex = e.detail.value;
let chosenArea = [];
for (let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
}
this.searchInfo.area = chosenArea;
},
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查二级
let subAreaList = await this.$request.areaListByStep({
parentCode: this.areaList[0][colObj.value].areaCode
});
subAreaList = subAreaList.data;
let subSubAreaList = [];
if (subAreaList.length) {
subSubAreaList = await this.$request.areaListByStep({
parentCode: subAreaList[0].areaCode
});
subSubAreaList = subSubAreaList.data;
}
this.areaList.pop();
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
this.areaMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subAreaList = await this.$request.areaListByStep({
parentCode: this.regionList[0][colObj.value].areaCode
});
subAreaList = subAreaList.data;
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
}
},
async tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
@ -142,26 +211,26 @@
let allSubCategories = await this.$api.data('subCategories');
this.subCategories = allSubCategories.slice(0, (4 - categoryId) * 5);
},
searchGoods(item) {
searchGoods(item) {
console.log("搜索条件信息: " + item)
console.log("商品搜索中...");
},
showDetails(productItem) {
uni.navigateTo({
url: '../product/product-detail'
});
},
showProductCategories() {
uni.navigateTo({
url: '/pages/product/product-category'
})
},
authWxLogin() {
this.$request.login().then(res => {
if (res) {
this.loadData();
}
})
},
showDetails(productItem) {
uni.navigateTo({
url: '../product/product-detail'
});
},
showProductCategories() {
uni.navigateTo({
url: '/pages/product/product-category'
})
},
authWxLogin() {
this.$request.login().then(res => {
if (res) {
this.loadData();
}
})
}
}
}

292
pages/product/filtered-products.vue
View File

@ -19,23 +19,32 @@
<view class="cu-item" v-for="(item,index) in taskConditions" v-if="item.type !== 1" :key="index"
@tap="tabSelect" :data-id="index">
<!-- 区域筛选picker -->
<picker v-if="item.code === 'area'" :mode="'multiSelector'" @change="regionChange"
:value="areaMultiIndex" :range-key="'name'" :range="areaList">
{{item.title}}
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
<picker v-if="item.code === 'area'" :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
<view class="flex justify-start">
<view class="text-cut search-nav-item-text">
{{taskConditions[0].value && taskConditions[0].value.length ? taskConditions[0].value[2].areaName : item.title}}
</view>
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
</view>
</picker>
<!-- 品类筛选picker -->
<picker v-else-if="item.code === 'category'" :mode="'multiSelector'" @change="categoryChange"
:value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
{{item.title}}
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
:range="categoryList">
<view class="flex justify-start">
<view class="text-cut search-nav-item-text">
{{taskConditions[1].value && taskConditions[1].value.length ? taskConditions[1].value[2].goodsCategoryName : item.title}}
</view>
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
</view>
</picker>
<text v-else>
{{item.title}}
<text v-if="item.type === 0" class="text-lg"><text
:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
<view v-else class="flex justify-start">
<view class="search-nav-item-text">{{item.title}}</view>
<text v-if="item.type === 0" class="text-lg"><text
:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
<text v-else class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
</text>
</view>
</view>
<view class="cu-item" v-else>
<button class="cu-btn bg-grey round shadow-blur">{{item.title}}</button>
@ -48,13 +57,13 @@
v-for="(item, index) in productList">
<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
</view>
</view>
<view class="margin-bottom-lg">
<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm" @click="loadData">
<text class="margin-right-xs">查看更多</text>
<text class="text-bold cuIcon-unfold"></text>
</view>
<view class="cu-load" :class="loadMoreStatus"></view>
</view>
<view class="margin-bottom-lg">
<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm" @click="loadProductData">
<text class="margin-right-xs">查看更多</text>
<text class="text-bold cuIcon-unfold"></text>
</view>
<view class="cu-load" :class="loadMoreStatus"></view>
</view>
</view>
</template>
@ -68,14 +77,14 @@
},
data() {
return {
productList: [],
loadMoreStatus: '',
hasMoreData: false,
pageNum: this.$globalData.initPageNum,
productList: [],
loadMoreStatus: '',
hasMoreData: false,
pageNum: this.$globalData.initPageNum,
pageSize: this.$globalData.initPageSize,
stickyTop: this.CustomBar,
// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
tabCur: 0,
// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
tabCur: 0,
scrollLeft: 0,
taskConditions: [{
code: 'area',
@ -97,88 +106,195 @@
code: 'reset',
type: 1,
title: '重置'
}],
areaList: [],
areaMultiIndex: [0, 0, 0],
categoryList: [],
}],
areaList: [],
areaMultiIndex: [0, 0, 0],
categoryList: [],
categoryMultiIndex: [0, 0, 0]
}
},
onLoad(options) {
let params = JSON.parse(decodeURIComponent(options.params));
if (typeof params.pageNum === 'number' && typeof params.pageSize === 'number') {
this.pageNum = params.pageNum;
this.pageSize = params.pageSize;
let params = JSON.parse(decodeURIComponent(options.params));
if (typeof params.pageNum === 'number' && typeof params.pageSize === 'number') {
this.pageNum = params.pageNum;
this.pageSize = params.pageSize;
}
this.loadData(params);
},
methods: {
async loadProductPage(params) {
// let shopInfo = await this.$api.data('shopInfo');
// this.productList = shopInfo.productList;
let res = await this.$request.qryProductPage(params);
let rowsLength = res[1].data.rows.length;
if (rowsLength == 0) {
return;
} else if (rowsLength === this.pageSize) {
this.hasMoreData = true;
}
this.productList = this.productList.concat(res[1].data.rows);
this.pageNum++;
},
async loadData(params) {
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
this.loadMoreStatus = 'loading bg-main-color light';
this.hasMoreData = false;
try {
await this.loadProductPage(params);
this.loadMoreStatus = this.hasMoreData ? '' : 'over bg-grey';
} catch (e) {
this.loadMoreStatus = 'erro bg-red'
}
methods: {
loadData(params) {
this.loadCategoryList();
this.loadRegionList();
this.loadProductData(params);
},
async loadProductData(params) {
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
this.loadMoreStatus = 'loading bg-main-color light';
this.hasMoreData = false;
try {
await this.loadProductPage(params);
this.loadMoreStatus = this.hasMoreData ? '' : 'over bg-grey';
} catch (e) {
this.loadMoreStatus = 'erro bg-red'
}
},
async loadProductPage(params) {
// let shopInfo = await this.$api.data('shopInfo');
// this.productList = shopInfo.productList;
let res = await this.$request.qryProductPage(params);
let rowsLength = res[1].data.rows.length;
if (rowsLength == 0) {
return;
} else if (rowsLength === this.pageSize) {
this.hasMoreData = true;
}
this.productList = this.productList.concat(res[1].data.rows);
this.pageNum++;
},
async loadCategoryList(idArr) {
let typeList = await this.$request.listByStep();
typeList = typeList.data;
let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
let subTypeList = await this.$request.listByStep({
goodsCategoryId: col1Id
});
subTypeList = subTypeList.data;
let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
let subSubTypeList = await this.$request.listByStep({
goodsCategoryId: col2Id
});
subSubTypeList = subSubTypeList.data;
this.categoryList.push(typeList);
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
},
async loadRegionList() {
let regionList = await this.$request.areaListByStep();
regionList = regionList.data;
let subRegionList = [];
let subSubRegionList = [];
if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({
parentCode: regionList[0].areaCode
});
subRegionList = subRegionList.data;
}
if (subRegionList && subRegionList.length > 0) {
subSubRegionList = await this.$request.areaListByStep({
parentCode: subRegionList[0].areaCode
});
subSubRegionList = subSubRegionList.data;
}
this.areaList.push(regionList);
this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList);
},
searchGoods(e) {
console.log("搜索" + e.detail.value)
},
tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
let conditionType = this.taskConditions[this.tabCur].type;
let conditionCode = this.taskConditions[this.tabCur].code;
if (conditionType === 0) {
// 升降序类型的条件切换升降序
let orderVal = this.taskConditions[this.tabCur].value;
this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
}
},
showDetails(productItem) {
let params = {
id: productItem.goodsId
tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
let conditionType = this.taskConditions[this.tabCur].type;
let conditionCode = this.taskConditions[this.tabCur].code;
if (conditionType === 0) {
// 升降序类型的条件切换升降序
let orderVal = this.taskConditions[this.tabCur].value;
this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
}
},
showDetails(productItem) {
let params = {
id: productItem.goodsId
}
uni.navigateTo({
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
});
},
regionChange(e) {
this.areaMultiIndex = e.detail.value;
let chosenArea = [];
for (let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
}
this.taskConditions[this.tabCur].value = chosenArea;
},
regionChange(e) {
this.areaMultiIndex = e.detail.value;
let chosenArea = [];
for(let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查二级
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
subAreaList = subAreaList.data;
let subSubAreaList = [];
if (subAreaList.length) {
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
subSubAreaList = subSubAreaList.data;
}
this.areaList.pop();
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
this.areaMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subAreaList = await this.$request.areaListByStep({parentCode: this.regionList[0][colObj.value].areaCode});
subAreaList = subAreaList.data;
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
}
this.taskConditions[this.tabCur].value = chosenArea;
},
categoryChange(e) {
this.categoryMultiIndex = e.detail.value;
let chosenCategory = [];
for(let i = 0; i < this.categoryList.length; i++) {
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
}
this.taskConditions[this.tabCur].value = chosenCategory;
}
},
async categoryChange(e) {
this.categoryMultiIndex = e.detail.value;
let chosenCategory = [];
for (let i = 0; i < this.categoryList.length; i++) {
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
}
this.taskConditions[this.tabCur].value = chosenCategory;
},
async categoryColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查询二级
let subTypeList = await this.$request.listByStep({
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
});
subTypeList = subTypeList.data;
let subSubTypeList = await this.$request.listByStep({
goodsCategoryId: subTypeList[0].goodsCategoryId
});
subSubTypeList = subSubTypeList.data;
this.categoryList.pop();
this.categoryList.pop();
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
this.categoryMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subSubTypeList = await this.$request.listByStep({
goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
});
subSubTypeList = subSubTypeList.data;
this.categoryList.pop();
this.categoryList.push(subSubTypeList);
this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
}
},
},
}
</script>
<style>
<style scoped>
.search-nav-item-text {
width: 100rpx;
}
.nav .cu-item {
height: 90rpx;
display: inline-block;
line-height: 90rpx;
margin: 0;
padding: 0 10rpx;
}
</style>