Loki
/
fish-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

22

master
anhaogxs 4 years ago
parent
e7a60bd9f8
commit
e2f037e675
2 changed files with 308 additions and 283 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 586
      pages/shop/GoodsList/index.vue
  2. 3
      pages/shop/IntegralGoodsCon/index.vue

586
pages/shop/GoodsList/index.vue
Unescape View File

@ -1,288 +1,314 @@
<template> <template>
<view class="productList" ref="container"> <view class="productList" ref="container">
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<view class="search bg-color-red acea-row row-between-wrapper"> <view class="search bg-color-red acea-row row-between-wrapper">
<view class="input acea-row row-between-wrapper"> <view class="input acea-row row-between-wrapper">
<input placeholder="搜索商品信息" v-model="where.keyword" /> <input placeholder="搜索商品信息" v-model="where.keyword" />
<text class="iconfont icon-sousuo" @click="submitForm"></text> <text class="iconfont icon-sousuo" @click="submitForm"></text>
</view> </view>
<view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view> <view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view>
</view> </view>
</form> </form>
<view class="nav acea-row row-middle"> <view class="nav acea-row row-middle">
<view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : '默认' }}</view> <view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : '默认' }}</view>
<view class="item" @click="set_where(1)"> <view class="item" @click="set_where(1)">
价格 价格
<image src="@/static/images/horn.png" v-if="price === 0" /> <image src="@/static/images/horn.png" v-if="price === 0" />
<image src="@/static/images/up.png" v-if="price === 1" /> <image src="@/static/images/up.png" v-if="price === 1" />
<image src="@/static/images/down.png" v-if="price === 2" /> <image src="@/static/images/down.png" v-if="price === 2" />
</view> </view>
<view class="item" @click="set_where(2)"> <view class="item" @click="set_where(2)">
销量 销量
<image src="@/static/images/horn.png" v-if="stock === 0" /> <image src="@/static/images/horn.png" v-if="stock === 0" />
<image src="@/static/images/up.png" v-if="stock === 1" /> <image src="@/static/images/up.png" v-if="stock === 1" />
<image src="@/static/images/down.png" v-if="stock === 2" /> <image src="@/static/images/down.png" v-if="stock === 2" />
</view> </view>
<!-- down --> <!-- down -->
<view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view> <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
</view> </view>
<view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'false'"> <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'false'">
<view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList"
<view class="pictrue" :class="Switch === true ? '' : 'on'"> :key="productListIndex" :title="item.storeName">
<image :src="item.image" :class="Switch === true ? '' : 'on'" /> <view class="pictrue" :class="Switch === true ? '' : 'on'">
</view> <image :src="item.image" :class="Switch === true ? '' : 'on'" />
<view class="text" :class="Switch === true ? '' : 'on'"> </view>
<view class="name line1">{{ item.storeName }}</view> <view class="text" :class="Switch === true ? '' : 'on'">
<view class="money font-color-red" :class="Switch === true ? '' : 'on'"> <view class="name line1">{{ item.storeName }}</view>
￥ <view class="money font-color-red" :class="Switch === true ? '' : 'on'">
<text class="num">{{ item.price }}</text> ￥
</view> <text class="num">{{ item.price }}</text>
<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'"> </view>
<view class="vip-money">￥{{ item.otPrice }}</view> <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
<view>已售{{ item.sales }}件</view> <view class="vip-money">￥{{ item.otPrice }}</view>
</view> <view>已售{{ item.sales }}件</view>
</view> </view>
</view> </view>
</view> </view>
<view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'true'"> </view>
<view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName"> <view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container" v-if="isIntegral == 'true'">
<view class="pictrue" :class="Switch === true ? '' : 'on'"> <view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'" v-for="(item, productListIndex) in productList"
<image :src="item.image" :class="Switch === true ? '' : 'on'" /> :key="productListIndex" :title="item.storeName">
</view> <view class="pictrue" :class="Switch === true ? '' : 'on'">
<view class="text" :class="Switch === true ? '' : 'on'"> <image :src="item.image" :class="Switch === true ? '' : 'on'" />
<view class="name line1">{{ item.storeName }}</view> </view>
<view class="money font-color-red" :class="Switch === true ? '' : 'on'"> <view class="text" :class="Switch === true ? '' : 'on'">
<text class="num">{{ item.price }}积分</text> <view class="name line1">{{ item.storeName }}</view>
</view> <view class="money font-color-red" :class="Switch === true ? '' : 'on'">
<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'"> <text class="num">{{ item.price }}积分</text>
<!-- <view class="vip-money">￥{{ item.otPrice }}</view> --> </view>
<view>已售{{ item.sales }}件</view> <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
</view> <!-- <view class="vip-money">￥{{ item.otPrice }}</view> -->
</view> <view>已售{{ item.sales }}件</view>
</view> </view>
</view> </view>
<Loading :loaded="loadend" :loading="loading"></Loading> </view>
<view class="noCommodity" style="background-color: #fff" v-if="productList.length === 0 && where.page > 1"> </view>
<view class="noPictrue"> <Loading :loaded="loadend" :loading="loading"></Loading>
<image src="@/static/images/noGood.png" class="image" /> <view class="noCommodity" style="background-color: #fff" v-if="productList.length === 0 && where.page > 1">
</view> <view class="noPictrue">
</view> <image src="@/static/images/noGood.png" class="image" />
<Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading" @changeRecommendLoading="changeRecommendLoading"></Recommend> </view>
</view> </view>
<Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading"
@changeRecommendLoading="changeRecommendLoading"></Recommend>
</view>
</template> </template>
<script> <script>
import Recommend from '@/components/Recommend' import Recommend from '@/components/Recommend'
import { getProducts, getProductsIntegral } from '@/api/store' import {
import Loading from '@/components/Loading' getProducts,
getProductsIntegral
} from '@/api/store'
import Loading from '@/components/Loading'
export default { export default {
name: 'GoodsList', name: 'GoodsList',
components: { components: {
Recommend, Recommend,
Loading, Loading,
}, },
props: {}, props: {},
data: function () { data: function() {
// const { s = "", id = 0, title = "" } = this.$yroute.query; // const { s = "", id = 0, title = "" } = this.$yroute.query;
const s = '', const s = '',
id = 0, id = 0,
title = '' title = ''
return { return {
hostProduct: [], hostProduct: [],
productList: [], productList: [],
Switch: true, Switch: true,
where: { where: {
page: 1, page: 1,
limit: 8, limit: 8,
keyword: s, keyword: s,
sid: id, //二级分类id sid: id, //二级分类id
news: 0, news: 0,
priceOrder: '', priceOrder: '',
salesOrder: '', salesOrder: '',
}, },
title: title && id ? title : '', title: title && id ? title : '',
loadTitle: '', loadTitle: '',
loading: false, loading: false,
loadend: false, loadend: false,
price: 0, price: 0,
stock: 0, stock: 0,
nows: false, nows: false,
recommendLoading: false, recommendLoading: false,
target: false, target: false,
isIntegral: false, isIntegral: false,
} }
}, },
watch: { watch: {
title() { title() {
this.updateTitle() this.updateTitle()
}, },
$yroute(to) { isIntegral() {
// if (to.name !== "GoodsList") return; if (this.isIntegral) {
// const { s = "", id = 0, title = "" } = to.query; uni.setNavigationBarTitle({
// if (s !== this.where.keyword || id !== this.where.sid) { title: '积分商品'
// this.where.keyword = s; });
// this.loadend = false; } else {
// this.loading = false; uni.setNavigationBarTitle({
// this.where.page = 1; title: '商品列表'
// this.where.sid = id; });
// this.title = title && id ? title : ""; }
// this.nows = false;
// this.$set(this, "productList", []); },
// this.price = 0; $yroute(to) {
// this.stock = 0; // if (to.name !== "GoodsList") return;
// this.getProductList(); // const { s = "", id = 0, title = "" } = to.query;
// } // if (s !== this.where.keyword || id !== this.where.sid) {
}, // this.where.keyword = s;
}, // this.loadend = false;
mounted: function () { // this.loading = false;
const { s = '', id = 0, title = '', isIntegral = false } = this.$yroute.query // this.where.page = 1;
this.where.keyword = s // this.where.sid = id;
this.where.isIntegral = isIntegral == 'true' ? 1 : 0 // this.title = title && id ? title : "";
this.isIntegral = isIntegral // this.nows = false;
this.updateTitle() // this.$set(this, "productList", []);
this.getProductList() // this.price = 0;
}, // this.stock = 0;
onReachBottom() { // this.getProductList();
this.recommendLoading = true // }
!this.loading && this.getProductList() },
}, },
onHide() { mounted: function() {
// this.hostProduct = []; const {
// this.productList = []; s = '', id = 0, title = '', isIntegral = false
// this.Switch = true; } = this.$yroute.query;
// this.where = {
// page: 1, this.where.keyword = s
// limit: 8, this.where.isIntegral = isIntegral == 'true' ? 1 : 0
// keyword: s, this.isIntegral = isIntegral
// sid: id, //二级分类id this.updateTitle()
// news: 0, this.getProductList()
// priceOrder: "", },
// salesOrder: "" onReachBottom() {
// }; this.recommendLoading = true;
// this.loadTitle = ""; !this.loading && this.getProductList()
// this.loading = false; },
// this.loadend = false; onHide() {
// this.price = 0; // this.hostProduct = [];
// this.stock = 0; // this.productList = [];
// this.nows = fals; // this.Switch = true;
}, // this.where = {
methods: { // page: 1,
changeRecommendLoading(recommendLoading) { // limit: 8,
this.recommendLoading = recommendLoading // keyword: s,
}, // sid: id, //二级分类id
goGoodsCon(item) { // news: 0,
this.$yrouter.push({ // priceOrder: "",
path: '/pages/shop/IntegralGoodsCon/index', // salesOrder: ""
query: { // };
id: item.id, // this.loadTitle = "";
isIntegral: this.isIntegral, // this.loading = false;
}, // this.loadend = false;
}) // this.price = 0;
}, // this.stock = 0;
updateTitle() { // this.nows = fals;
// document.title = this.title || this.$yroute.meta.title; },
}, methods: {
getProductList() { changeRecommendLoading(recommendLoading) {
var that = this this.recommendLoading = recommendLoading
this.setWhere() },
// if (to.name !== "GoodsList") return; goGoodsCon(item) {
const { s = '', id = 0, title = '' } = this.$yroute.query this.$yrouter.push({
if (s !== this.where.keyword || id !== this.where.sid) { path: '/pages/shop/IntegralGoodsCon/index',
this.loadend = false query: {
this.loading = false id: item.id,
this.where.page = 1 isIntegral: this.isIntegral,
this.where.sid = id },
this.title = title && id ? title : '' })
this.nows = false },
this.$set(this, 'productList', []) updateTitle() {
this.price = 0 uni.setNavigationBarTitle({
this.stock = 0 title: this.title
// this.getProductList(); });
} // document.title = this.title || this.$yroute.meta.title;
let q = that.where },
let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral getProductList() {
getData(q).then(res => { var that = this
that.loading = false this.setWhere()
if (that.target) { // if (to.name !== "GoodsList") return;
that.productList = res.data const {
} else { s = '', id = 0, title = ''
that.productList.push.apply(that.productList, res.data) } = this.$yroute.query
} if (s !== this.where.keyword || id !== this.where.sid) {
that.target = false this.loadend = false
that.loadend = res.data.length < that.where.limit //判断所有数据是否加载完成； this.loading = false
that.where.page = that.where.page + 1 this.where.page = 1
}) this.where.sid = id
}, this.title = title && id ? title : ''
submitForm: function () { this.nows = false
this.$set(this, 'productList', []) this.$set(this, 'productList', [])
this.where.page = 1 this.price = 0
this.loadend = false this.stock = 0
this.loading = false // this.getProductList();
this.getProductList() }
}, let q = that.where
//点击事件处理 let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral
set_where: function (index) { getData(q).then(res => {
let that = this that.loading = false
switch (index) { if (that.target) {
case 0: that.productList = res.data
return that.$yrouter.push({ } else {
path: '/pages/shop/GoodsClass/index', that.productList.push.apply(that.productList, res.data)
}) }
case 1: that.target = false
if (that.price === 0) that.price = 1 that.loadend = res.data.length < that.where.limit //判断所有数据是否加载完成；
else if (that.price === 1) that.price = 2 that.where.page = that.where.page + 1
else if (that.price === 2) that.price = 0 })
that.stock = 0 },
break submitForm: function() {
case 2: this.$set(this, 'productList', [])
if (that.stock === 0) that.stock = 1 this.where.page = 1
else if (that.stock === 1) that.stock = 2 this.loadend = false
else if (that.stock === 2) that.stock = 0 this.loading = false
that.price = 0 this.getProductList()
break },
case 3: //点击事件处理
that.nows = !that.nows set_where: function(index) {
break let that = this
default: switch (index) {
break case 0:
} return that.$yrouter.push({
this.productList = [] path: '/pages/shop/GoodsClass/index',
that.$set(that, 'productList', []) })
that.where.page = 1 case 1:
that.target = true if (that.price === 0) that.price = 1
that.loadend = false else if (that.price === 1) that.price = 2
that.getProductList() else if (that.price === 2) that.price = 0
}, that.stock = 0
//设置where条件 break
setWhere: function () { case 2:
let that = this if (that.stock === 0) that.stock = 1
if (that.price === 0) { else if (that.stock === 1) that.stock = 2
that.where.priceOrder = '' else if (that.stock === 2) that.stock = 0
} else if (that.price === 1) { that.price = 0
that.where.priceOrder = 'asc' break
} else if (that.price === 2) { case 3:
that.where.priceOrder = 'desc' that.nows = !that.nows
} break
if (that.stock === 0) { default:
that.where.salesOrder = '' break
} else if (that.stock === 1) { }
that.where.salesOrder = 'asc' this.productList = []
} else if (that.stock === 2) { that.$set(that, 'productList', [])
that.where.salesOrder = 'desc' that.where.page = 1
} that.target = true
that.where.news = that.nows ? '1' : '0' that.loadend = false
}, that.getProductList()
switchTap: function () { },
let that = this //设置where条件
that.Switch = !that.Switch setWhere: function() {
}, let that = this
}, if (that.price === 0) {
} that.where.priceOrder = ''
} else if (that.price === 1) {
that.where.priceOrder = 'asc'
} else if (that.price === 2) {
that.where.priceOrder = 'desc'
}
if (that.stock === 0) {
that.where.salesOrder = ''
} else if (that.stock === 1) {
that.where.salesOrder = 'asc'
} else if (that.stock === 2) {
that.where.salesOrder = 'desc'
}
that.where.news = that.nows ? '1' : '0'
},
switchTap: function() {
let that = this
that.Switch = !that.Switch
},
},
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.noCommodity { .noCommodity {
border-top: 3px solid #f5f5f5; border-top: 3px solid #f5f5f5;
padding-bottom: 1px; padding-bottom: 1px;
} }
</style> </style>

3
pages/shop/IntegralGoodsCon/index.vue
Unescape View File

@ -10,7 +10,6 @@
<view class="money font-color-red"> <view class="money font-color-red">
<text class="num">{{ attr.productSelect.integral || storeInfo.integral }}积分</text> <text class="num">{{ attr.productSelect.integral || storeInfo.integral }}积分</text>
</view> </view>
<view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view>
</view> </view>
<view class="introduce">{{ storeInfo.storeName }}</view> <view class="introduce">{{ storeInfo.storeName }}</view>
<view class="label acea-row row-between-wrapper"> <view class="label acea-row row-between-wrapper">
@ -55,7 +54,7 @@
</view> </view>
<view class="bnt in-bnt acea-row"> <view class="bnt in-bnt acea-row">
<view class="buy" @click="tapBuy"> <view class="buy" @click="tapBuy">
<text>立即购买</text> <text>立即兑换</text>
</view> </view>
</view> </view>
</view> </view>

Write Preview
Loading…
Cancel
Save