Product list & search list completed

This commit is contained in:
Vion 2022-01-21 20:48:13 +08:00
parent f3c9a9c65b
commit 8e464641d3
4 changed files with 237 additions and 151 deletions

View File

@ -230,7 +230,7 @@ margin-left: 0.18rem;
display: block;
margin-left: 0.5rem;
display: block;
cursor: pointer;
}
}
@ -387,11 +387,11 @@ border-radius: 100px;
overflow: hidden;
margin-top: 40px;
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
h2{
font-weight: bold;
color: #333333;
width: 3.25rem;
}
}
.rc-padding--md{
padding: 0;
@ -452,6 +452,7 @@ cursor: pointer;
/deep/.el-dialog {
width: 920px;
background: #FFFFFF;
max-width:unset;
}
/deep/.van-search__action{
display: block;
@ -511,7 +512,7 @@ margin-left: 8px;
display: block;
margin-left: 0.5rem;
display: block;
cursor:pointer;
}
}
@ -624,6 +625,7 @@ border-radius: 30px;
}
/deep/.van-search{
padding-left: 0;
width:100%;
}
.van-search__content--square{
display: flex;
@ -632,7 +634,7 @@ border-radius: 30px;
background: white;
border: 1px solid #D7D7D7;
height: 50px;
width: 1200px;
width:100%;
border-radius: 200px;
}
/deep/.van-field__left-icon
@ -658,17 +660,18 @@ border-radius: 30px;
}
ul li {
width: 130px;
height: 40px;
background: #ffffff;
border: 2px solid #D7D7D7;
border-radius: 30px;
text-align: center;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 32px;
width: 130px;
height: 40px;
background: #ffffff;
border: 2px solid #D7D7D7;
border-radius: 30px;
text-align: center;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 32px;
cursor: pointer;
}
li:first-child{
margin-left: 0;

View File

@ -995,7 +995,7 @@
title: "主食级狗湿粮",
video:"/images/dog/one.mp4",
catimage: "/images/dog/one.jpg",
productimage: "/images/cat/star-1.png",
productimage: "/images/dog/star-1.png",
detail:'柔软细腻慕斯 适合离乳期幼犬舔食',
price:'¥77',
},

View File

@ -481,8 +481,9 @@ export default {
let stype = this.routeParams.stype;
stype = (stype=='0'?0:1);
if(stype>-1)
this.activeIndex = this.routeParams.stype;//Initialized pet type selection
if(stype>-1){
this.activeIndex = this.routeParams.stype;//Initialized pet type selection
}
},
mounted() {
@ -492,6 +493,7 @@ export default {
let tagSettingPromise = this.userst();
let _self = this;
tagSettingPromise.then(function(resolve){
_self.selectGoods(null,_self.activeIndex,true);
_self.chooseDefaultOptions();
//_self.usetmessage();
});
@ -508,7 +510,7 @@ export default {
this.isLoading=true;
let data = undefined;
if(this.prefecture[this.rxGoodsIndexPointer].checked==true){
data = await userquery(usertype, 1, 10);
data = await userquery(usertype, 1, 12);
}
else{
let searchCriteria=[{}];
@ -525,7 +527,7 @@ export default {
}
}
}
data = await searchchanpin(searchCriteria, usertype, 1, 10);
data = await searchchanpin(searchCriteria, usertype, 1, 12);
}
if (data) {
this.rccontair = data;
@ -543,7 +545,7 @@ export default {
this.userstype = data;
this.isLoading = false;
}
this.usercatlist = this.userstype.filter((item) => item.petType == this.activeIndex);
this.usercatlist = this.userstype.filter((item) => item.petType == "0");
this.usercatlist.map((element) => {
if (element.name == "品种") {
pinzhong.push(element);
@ -700,6 +702,25 @@ export default {
else
this.prefecture[this.rxGoodsIndexPointer].checked=false;
},
resetAllOptions(){
let _self = this;
let categoriesSelectionEles=this.prefecture;
let functionalSelectionEles=this.catagea;
let ageSelectionEles=this.catage;
let breedSelectionEles=this.catageb;
let allSelectionEles=categoriesSelectionEles.concat(functionalSelectionEles,ageSelectionEles,breedSelectionEles);
allSelectionEles.forEach(function(tmp,index){
tmp.checked=false;
});
this.userserachlist = [
{
categoryName: [], //
tagUsedAge: [], //
tagFunction: [], //
tagBreed: [], //
},
];
},
userbuy() {
this.$router.push({
path: "/myorder/userrecord",
@ -760,24 +781,13 @@ export default {
}
},
selectGoods(item, index) {
selectGoods(item, index, onlyRefreshCategory) {
this.activeIndex1 = index;
this.activeIndex = index;
this.allacindex = index;
this.usersearch(this.userserachlist, this.activeIndex1);
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(petType)) {
// this.userserachlist.push(petType);
// }
// }
this.userserachlist = [
{
categoryName: [], //
tagUsedAge: [], //
tagFunction: [], //
tagBreed: [], //
},
];
this.resetAllOptions();
if(!onlyRefreshCategory)
this.usersearch(this.userserachlist, this.activeIndex1);
let pinzhong = [];
let zhuanqu = [];
let age = [];

View File

@ -100,7 +100,7 @@
</div>
<div class="online"></div>
<!-- rc-main start -->
<div class="rc-max-width--xl">
<div class="rc-max-width--xl rc-margin-bottom--lg">
<div class="usersearch">
<div class="rc-contair">
<ul class="ts-product-list">
@ -120,7 +120,7 @@
<div class="rc-column">
<div class="rc-click" @click="selectproduce(item)">
<span>{{ item.categoryName }}</span>
<i>{{ item.ecPrice }}</i>
<i>{{ item.ecPrice?("¥"+item.ecPrice):'' }}</i>
</div>
<strong
class="
@ -313,6 +313,11 @@
</el-dialog>
</div>
<!-- rc-main end -->
<div v-if="isLoading" class="ts-mask">
<div class="ts-mask-bg"></div>
<div class="userloding"></div>
<span>数据加载中</span>
</div>
<MyFooter></MyFooter>
</div>
</template>
@ -320,7 +325,7 @@
<script>
import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import { biaome, userstype, searchchanpin } from "../../ajax/getData";
import { biaome, userstype, searchchanpin, userquery } from "../../ajax/getData";
export default {
data() {
return {
@ -329,14 +334,14 @@ export default {
userserachlist: [
{
categoryName: "", //
tagUsedAge: "", //
tagFunction: "", //
tagBreed: "", //
categoryName: [], //
tagUsedAge: [], //
tagFunction: [], //
tagBreed: [], //
},
],
userstype: [],
activeIndex: "-1",
activeIndex: "0",
activeIndex1: 0,
activeIndexa: "-1",
// userpeolist:[
@ -405,7 +410,14 @@ export default {
catimage: require("../../assets/image/rc-dog.png"),
},
],
extraPrefecture: [
{
tagName: "处方粮",
ordernum: "99",
catimage: require("../../assets/image/rc-dog.png"),
isRxGoods:1
},
],
prefecture: [
{
title: "猫湿粮",
@ -483,40 +495,15 @@ export default {
},
],
rccontair: [
{
title: "皇家英国短毛猫全价湿粮",
price: "¥123.45",
ordernum: 1,
rccontair: [
{
title: "",
price: "",
ordernum: 1,
catimage: require("../../assets/image/rc-cat.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
],
catimage: '',
},
],
usercatlist: [],
userdoglisgt: [],
};
@ -578,10 +565,32 @@ export default {
},
async usersearch(stype, usertype) {
let data = await searchchanpin(stype, usertype, 1, 10);
if (data) {
this.rccontair = data;
}
this.isLoading=true;
let data = undefined;
if(this.prefecture[this.rxGoodsIndexPointer].checked==true){
data = await userquery(usertype, 1, 12);
}
else{
let searchCriteria=[{}];
for(let key in stype[0]){
if(stype[0][key].length>0){
if(typeof stype[0][key] == 'string') {
searchCriteria[0][key]=stype[0][key];
}
else {
searchCriteria[0][key]=stype[0][key].join(',');
}
if(key=='categoryName' && searchCriteria[0][key].indexOf("湿")>-1){
searchCriteria[0]['tagStatus']=2;
}
}
}
data = await searchchanpin(searchCriteria, usertype, 1, 12);
}
if (data) {
this.rccontair = data;
this.isLoading=false;
}
},
async userst() {
this.isLoading = true;
@ -630,7 +639,11 @@ export default {
});
}
});
let _self = this;
this.extraPrefecture.forEach(function(ele){
_self.prefecture.push(ele);
_self.rxGoodsIndexPointer = _self.prefecture.length-1;
});
this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
},
@ -657,6 +670,46 @@ export default {
},
});
},
checkRxGoods(toggleSwitch){
let _self = this;
let categoriesSelectionEles=this.prefecture;
let functionalSelectionEles=this.catagea;
let ageSelectionEles=this.catage;
let breedSelectionEles=this.catageb;
let allSelectionEles=categoriesSelectionEles.concat(functionalSelectionEles,ageSelectionEles,breedSelectionEles);
if(toggleSwitch)
{
allSelectionEles.forEach(function(tmp,index){
tmp.checked=false;
if(tmp.isRxGoods)
{
tmp.checked=true;
}
});
}
else
this.prefecture[this.rxGoodsIndexPointer].checked=false;
},
resetAllOptions(){
let _self = this;
let categoriesSelectionEles=this.prefecture;
let functionalSelectionEles=this.catagea;
let ageSelectionEles=this.catage;
let breedSelectionEles=this.catageb;
let allSelectionEles=categoriesSelectionEles.concat(functionalSelectionEles,ageSelectionEles,breedSelectionEles);
allSelectionEles.forEach(function(tmp,index){
tmp.checked=false;
});
this.userserachlist = [
{
categoryName: [], //
tagUsedAge: [], //
tagFunction: [], //
tagBreed: [], //
},
];
},
userbuy() {
this.$router.push({
path: "/myorder/userrecord",
@ -713,9 +766,11 @@ export default {
onSearch(e) {
this.usetmessage(this.activeIndex1, this.value);
},
selectGoods(item, index) {
selectGoods(item, index, onlyRefreshCategory) {
this.activeIndex1 = index;
this.usersearch(this.userserachlist, this.activeIndex1);
this.resetAllOptions();
if(!onlyRefreshCategory)
this.usersearch(this.userserachlist, this.activeIndex1);
let pinzhong = [];
let zhuanqu = [];
let age = [];
@ -772,7 +827,11 @@ export default {
}
});
}
let _self = this;
this.extraPrefecture.forEach(function(ele){
_self.prefecture.push(ele);
_self.rxGoodsIndexPointer = _self.prefecture.length-1;
});
this.activeIndex = index;
},
selectGoodsa(item, index) {
@ -839,6 +898,17 @@ export default {
this.activeIndexa = index;
this.usetmessage(item.title);
},
utilSimpleArrayRemove(haystack,needle){
if(haystack.length<=0)
return false;
let index=haystack.indexOf(needle);
if(index>-1)
{
haystack.splice(index,1);
return true;
}
return false;
},
selectage(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
@ -846,26 +916,14 @@ export default {
// debugger;
// this.userishwo1 = !this.userishwo1;
let tagUsedAge = {};
// this.userishwo1 = !this.userishwo1;
this.activeIndexc = index;
item.checked = !item.checked;
if (item.checked == false) {
item.checked = true;
this.userserachlist[0].tagUsedAge = item.tagName;
this.$refs.chosebox1[index].className = "active";
this.utilSimpleArrayRemove(this.userserachlist[0].tagUsedAge,item.tagName);
} else {
this.userserachlist[0].tagUsedAge = "";
item.checked = false;
this.$refs.chosebox1[index].className = "unactive";
this.userserachlist[0].tagUsedAge.push(item.tagName);
}
// if (this.userishwo1 == false) {
// tagUsedAge = {
// petType: this.activeIndex1,
// tagUsedAge: item.tagName,
// };
// } else {
// tagUsedAge = {
// petType: this.activeIndex1,
// };
// }
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagUsedAge)) {
// this.userserachlist.push(tagUsedAge);
@ -875,13 +933,11 @@ export default {
this.activeIndexc = index;
},
selectagc(item, index) {
this.checkRxGoods(false);
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
// let tagFunction = {
// petType: this.activeIndex1,
// tagFunction: item.tagName,
// };
/*
if (item.checked == false) {
item.checked = true;
this.$refs.cgosebox4[index].className = "active";
@ -891,16 +947,20 @@ export default {
this.$refs.cgosebox4[index].className = "unactive";
this.userserachlist[0].tagFunction = "";
}
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagFunction)) {
// this.userserachlist.push(tagFunction);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
this.activeIndexd = index;
*/
this.activeIndexd = index;
item.checked = !item.checked;
if (item.checked == false) {
this.utilSimpleArrayRemove(this.userserachlist[0].tagFunction,item.tagName);
} else {
this.userserachlist[0].tagFunction.push(item.tagName);
}
this.usersearch(this.userserachlist, this.activeIndex1);
},
selectagd(item, index) {
/*
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
@ -914,25 +974,26 @@ export default {
this.$refs.chosebox3[index].className = "unactive";
this.userserachlist[0].tagBreed = "";
}
// if (this.userishwo3 == false) {
// tagBreed = {
// petType: this.activeIndex1,
// tagBreed: item.tagName,
// };
// } else {
// tagBreed = {
// petType: this.activeIndex1,
// };
// }
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagBreed)) {
// this.userserachlist.push(tagBreed);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
this.activeIndexe = index;
*/
this.checkRxGoods(false);
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagBreed = {};
this.activeIndexe = index;
item.checked = !item.checked;
if (item.checked == false) {
this.utilSimpleArrayRemove(this.userserachlist[0].tagBreed,item.tagName);
} else {
this.userserachlist[0].tagBreed.push(item.tagName);
}
this.usersearch(this.userserachlist, this.activeIndex1);
},
selectproduct(item, index) {
/*
this.activeIndexb = index;
console.log(this.activeIndex);
if(this.activeIndex=='-1'){
@ -947,26 +1008,38 @@ export default {
this.$refs.chosebox[index].className = "unactive";
this.userserachlist[0].categoryName = "";
}
// this.userishwo = !this.userishwo;
// if (this.userishwo == false) {
// categoryName = {
// petType: this.activeIndex1,
// categoryName: item.tagName,
// };
// } else {
// categoryName = {
// petType: this.activeIndex1,
// };
// }
console.log(this.userserachlist[0].categoryName);
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(categoryName)) {
// this.userserachlist.push(categoryName);
// }
// console.log(this.userserachlist);
// }
this.usersearch(this.userserachlist, this.activeIndex1);
*/
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
this.activeIndexb = index;
let _self=this;
//Handling Rx Goods
if(item.isRxGoods==1)
{
this.checkRxGoods(true);
}
//Handling Rx Goods end
//Handling other options
else {
// console.log(this.userishwo=!this.userishwo)
this.checkRxGoods(false);
//item.checked = !item.checked;
//this.prefecture[index].checked = item.checked;
item.checked = !item.checked;
this.prefecture[index].checked = item.checked;
if (item.checked == false) {
this.utilSimpleArrayRemove(this.userserachlist[0].categoryName,item.tagName);
} else {
this.userserachlist[0].categoryName.push(item.tagName);
}
}
//Handling other options end
this.usersearch(this.userserachlist, this.activeIndex1);
},
//