12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469 |
- <template>
-
- <view :style="colorStyle">
- <view class='productList'>
-
- <view class="header" :style="'height:'+(menuButton.top+menuButton.height+47)+'px;'">
- <view class="acea-row row-center-wrapper" :style="'height:'+menuButton.height+'px;margin-top:'+menuButton.top+'px;'">
- <view class="bnt acea-row row-center-wrapper" :style="'height:'+menuButton.height+'px;width:'+menuButton.width+'px;top:'+menuButton.top+'px;'">
- <text class="iconfont icon-fanhui2" @click="returnPage"></text>
- <text class="lines"></text>
- <text class="iconfont icon-gengduo5" @click="moreNav"></text>
- </view>
- <view class="title">商品列表</view>
- </view>
- <view class="searchMp acea-row row-between-wrapper">
- <view class='input acea-row row-between-wrapper' :class="promotions_type?'on':''"><text
- class='iconfont icon-sousuo'></text>
- <input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search"
- :value='where.keyword' @confirm="searchSubmit"></input>
- </view>
- <view class='iconfont' v-if="!promotions_type"
- :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
- </view>
- </view>
- </view>
-
-
- <view class='search bg-color acea-row row-between-wrapper'>
- <view class='input acea-row row-between-wrapper' :class="promotions_type?'on':''"><text
- class='iconfont icon-sousuo'></text>
- <input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search"
- :value='where.keyword' @confirm="searchSubmit"></input>
- </view>
- <view class='iconfont' v-if="!promotions_type"
- :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
- </view>
- </view>
-
-
- <view class='nav acea-row row-middle row-around' :style="'margin-top:'+(menuButton.top+menuButton.height+47)+'px;'">
-
-
- <view class='nav acea-row row-middle row-around'>
-
- <view class='item line1' :class='title ? "font-num":""' @click='set_where(1)'>{{title ? title:'默认'}}
- </view>
- <view class='item' @click='set_where(2)'>
- 价格
- <image v-if="price==1" src='../../../static/images/up.png'></image>
- <image v-else-if="price==2" src='../../../static/images/down.png'></image>
- <image v-else src='../../../static/images/horn.png'></image>
- </view>
- <view class='item' @click='set_where(3)'>
- 销量
- <image v-if="stock==1" src='../../../static/images/up.png'></image>
- <image v-else-if="stock==2" src='../../../static/images/down.png'></image>
- <image v-else src='../../../static/images/horn.png'></image>
- </view>
-
-
- <view class='item' v-if="brandList.length" :class="{clored:brandArray.length>0}" @click='set_brand'>品牌
- <image src='../static/xiala.png'></image>
- </view>
- <homeList :navH="navH" :goodList="goodList" :currentPage="currentPage" :sysHeight="sysHeight"
- :goodsShow="true"></homeList>
- </view>
-
- <view class='list acea-row row-between-wrapper' :style="'margin-top:'+(menuButton.top+menuButton.height+92)+'px;'" :class='is_switch==true?"":"on"' v-if="is_switch==false">
-
-
- <view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"' v-if="is_switch==false">
-
- <view class="title" v-if="promotionsInfo.title"><text class="label">{{promotionsInfo.title}}</text>{{promotionsInfo.desc}}</view>
- <view class='item' :class='is_switch==true?"":"on"' hover-class='none'
- v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
- <view class='pictrue' :class='is_switch==true?"":"on"'>
- <image :src='item.image' :class='is_switch==true?"":"on"'></image>
- <view class="activityFrame" v-if="item.activity_frame.image" :style="'background-image: url('+item.activity_frame.image+');'"></view>
- <view class="masks acea-row row-center-wrapper" v-if="item.stock<=0">
- <view class="bg">
- <view>暂时</view>
- <view>售罄</view>
- </view>
- </view>
- </view>
- <view class='text' :class='is_switch==true?"":"on"'>
- <view class="nameCon">
- <view class='name line2'>{{item.store_name}}</view>
- <text class="label"
- v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</text>
- <text class="label"
- v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</text>
- <text class="label"
- v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</text>
- <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
- </view>
- <view class="vip acea-row row-middle on">
- <view class='money font-color' :class='is_switch==true?"":"on"'>¥<text
- class='num'>{{item.price}}</text></view>
- <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
- <view>¥{{item.vip_price}}</view>
- <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
- class="iconfont icon-huangguan4"></text>SVIP</view>
- <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
- class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
- </view>
- </view>
- <view class='sales acea-row row-between-wrapper'>
- <view class="acea-row">
- <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
- <view class="score">评分 {{item.star}}</view>
- </view>
- <view v-if="promotions_type && item.product_type==0 && !item.custom_form.length"
- class="icon acea-row row-center-wrapper" @click.stop="joinCart(item)">
- <text class="iconfont icon-gouwuche"></text>
- </view>
- </view>
- </view>
- </view>
- <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
- <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
- </view>
- <view class="height-add" v-if="productList.length>3"></view>
- <view class="footer acea-row row-between-wrapper" v-if="promotions_type">
- <view class="acea-row row-middle">
- <view class="icon">
- <text class="iconfont icon-pinzhongqiquan"></text>
- <view class="num acea-row row-center-wrapper" v-if="totalNum>0">{{totalNum}}</view>
- </view>
- <view class="right">
- <view class="num">小计:<text class="money">¥{{totalPrice || 0}}</text></view>
- <view v-if="this.promotions_type != 4">
- <view v-if="promotionsInfo.differ_threshold>0">
- 再买{{promotionsInfo.differ_threshold}}{{promotionsInfo.threshold_type==1?'元':'件'}}<text
- v-if="promotionsInfo.differ_price || promotionsInfo.differ_discount">,
- <text v-if="promotionsInfo.differ_price">可减{{promotionsInfo.differ_price}}元</text>
- <text v-else>可打{{parseFloat(promotionsInfo.differ_discount)/10}}折</text>
- </text>
- </view>
- <view v-else>
- <text v-if="promotionsInfo.reach_threshold">已购满{{promotionsInfo.reach_threshold}}{{promotionsInfo.threshold_type==1?'元':'件'}},</text>已减{{promotionsInfo.sum_promotions_price}}元
- </view>
- </view>
- </view>
- </view>
- <view class="bnt" @click="goCart">去购物车</view>
- </view>
- </view>
-
- <view class="list waterList" :style="'margin-top:'+(menuButton.top+menuButton.height+102)+'px;'" v-else>
-
-
- <view class="list waterList" v-else>
-
- <waterfallsFlow ref="waterfallsFlow" :list="productList" @wapper-lick="godDetail">
-
- <view v-for="(item, index) of productList" :key="index" slot="slot{{index}}">
- <view class="waterfalls">
- <view class='name line2'>{{item.store_name}}</view>
- <span class="label"
- v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
- <span class="label"
- v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
- <span class="label"
- v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
- <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
- <view class="vip acea-row row-middle">
- <view class='money font-color'>
- ¥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
- <text class='nums'
- v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
- </view>
- <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
- <view>¥{{item.vip_price}}</view>
-
- <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
- class="iconfont icon-huangguan4"></text>SVIP</view>
- <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
- class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
- </view>
- </view>
- <view class='vip acea-row row-between-wrapper'>
- <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
- <view>评分 {{item.star}}</view>
- </view>
- </view>
- </view>
-
-
- <template v-slot:default="item">
- <view class="waterfalls">
- <view class='name line2'>{{item.store_name}}</view>
- <span class="label"
- v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
- <span class="label"
- v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
- <span class="label"
- v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
- <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
- <view class="vip acea-row row-middle">
- <view class='money font-color'>
- ¥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
- <text class='nums'
- v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
- </view>
- <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
- <view>¥{{item.vip_price}}</view>
- <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
- class="iconfont icon-huangguan4"></text>SVIP</view>
- <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
- class="iconfont icon-v"></text>{{item.level_name}}</view>
- </view>
- </view>
- <view class='vip acea-row row-between-wrapper'>
- <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
- <view>评分 {{item.star}}</view>
- </view>
- </view>
- </template>
-
- </waterfallsFlow>
- <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
- <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
- </view>
- </view>
- </view>
- <view class='noCommodity' v-if="productList.length==0 && where.page > 1">
- <view class='emptyBox'>
- <image :src="imgHost + '/statics/images/no-thing.png'"></image>
- <view class="tips">暂无商品,去看点别的吧</view>
- </view>
- <recommend :hostProduct="hostProduct"></recommend>
- </view>
- <productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' :storeInfo='storeInfo' @myevent="onMyEvent"
- @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum"
- @goCat="goCat" id='product-window' :is_vip="is_vip"></productWindow>
- <home v-if="navigation"></home>
- <view class="mask" @touchmove.prevent :hidden="brandtip === false" @click="closeBrand"></view>
-
- <view class="selectbrand" :style="'top:'+(menuButton.top+menuButton.height+92)+'px;'" :class="brandtip === true ? 'on' : ''">
-
-
- <view class="selectbrand" :class="brandtip === true ? 'on' : ''">
-
- <view class="box">
- <view class="selet">
- <view class="seletbox acea-row row-center-wrapper"
- :class="{seleton:brandArray.indexOf(item.id) != -1}" v-for="(item,index) in brandList"
- :key="index" @click="seletBrand(item.id)">{{item.brand_name}}</view>
- </view>
- <view class="btn">
- <div class="sambox reset" @click="brandReset">重置</div>
- <div class="sambox ok" @click="brandOk">确定</div>
- </view>
- </view>
- </view>
-
-
-
- </view>
- </template>
- <script>
- let sysHeight = uni.getSystemInfoSync().statusBarHeight;
-
- let menuButton = uni.getMenuButtonBoundingClientRect();
-
- import home from '@/components/home';
- import homeList from '@/components/homeList'
- import productWindow from '@/components/productWindow';
- import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
- import {
- getProductslist,
- getProductHot,
- brand,
- getAttr,
- postCartAdd
- } from '@/api/store.js';
- import {
- toLogin
- } from '@/libs/login.js';
- import recommend from '@/components/recommend';
- import {
- mapGetters
- } from "vuex";
- import {
- goShopDetail
- } from '@/libs/order.js';
- import {
- getCartList,
- getCartCounts
- } from '@/api/order.js';
- import colors from '@/mixins/color.js';
- import {HTTP_REQUEST_URL} from '@/config/app';
- export default {
- computed: mapGetters(['uid', 'isLogin']),
- components: {
- recommend,
- home,
- homeList,
- waterfallsFlow,
- productWindow
- },
- mixins: [colors],
- data() {
- return {
-
- menuButton:menuButton,
-
- id: 0,
- productValue: [],
- is_vip: 0,
- attr: {
- cartAttr: false,
- productAttr: [],
- productSelect: {}
- },
- attrValue: '',
- navH: 22,
- sysHeight: sysHeight,
- sysHeight: 0,
- goodList: true,
- currentPage: false,
- brandtip: false,
- brandArray: [],
- productList: [],
- is_switch: true,
- where: {
- sid: 0,
- keyword: '',
- priceOrder: '',
- salesOrder: '',
- news: 0,
- page: 1,
- limit: 20,
- cid: 0,
- brand_id: [],
- promotions_id: 0
- },
- price: 0,
- stock: 0,
- nows: false,
- loadend: false,
- loading: false,
- loadTitle: '加载更多',
- title: '',
- hostProduct: [],
- hotPage: 1,
- hotLimit: 10,
- hotScroll: false,
- brandList: [],
- storeInfo: {},
- promotions_type: 0,
- totalPrice: 0,
- promotionsInfo: {},
- totalNum: 0,
- imgHost:HTTP_REQUEST_URL,
- isShowAuth: false
- };
- },
- onLoad: function(options) {
- this.where.cid = options.cid || 0;
- this.$set(this.where, 'sid', options.sid || 0);
- this.title = options.title || '';
- this.$set(this.where, 'keyword', options.searchValue ? decodeURIComponent(options.searchValue) : '');
- this.$set(this.where, 'productId', options.productId || '');
- this.$set(this.where, 'brand_id', options.brandId || 0);
- if (options.promotions_type) {
- this.promotions_type = options.promotions_type;
- this.where.promotions_id = options.promotions_id;
- if (options.promotions_type) {
- this.is_switch = false
- }
- }
- this.get_product_list();
- this.getBrand();
- },
- onShow() {
- uni.removeStorageSync('form_type_cart');
- if (this.isLogin && !this.is_switch) {
- this.getCartList();
- this.getCartNum();
- }
- },
- methods: {
- returnPage(){
- uni.navigateBack({
- delta:1
- })
- },
- getIsLogin(){
- toLogin()
- },
- onLoadFun(){
- if (!this.is_switch) {
- this.getCartList();
- this.getCartNum();
- }
- this.isShowAuth = false
- },
-
- authColse: function(e) {
- this.isShowAuth = e
- },
- getCartNum() {
- let id = uni.getStorageSync('user_store_id') || 0;
- getCartCounts(0,id).then(res => {
- this.totalNum = res.data.count;
- }).catch(err => {
- return this.$util.Tips({
- title: err
- });
- })
- },
- getCartList() {
- let truePrice = 0;
- getCartList().then(res => {
- let data = res.data,
- valid = res.data.valid;
- valid.forEach(item => {
- item.promotions.forEach(z => {
- if (this.where.promotions_id == z.id) {
- this.promotionsInfo = z;
- }
- })
- item.cart.forEach(j => {
- truePrice = this.$util.$h.Add(truePrice, this.$util.$h.Mul(j.truePrice, j.cart_num));
- })
- })
- this.totalPrice = this.$util.$h.Sub(truePrice, data.deduction.coupon_price)
- }).catch(err => {
- return this.$util.Tips({
- title: err
- });
- })
- },
- goCart() {
- uni.switchTab({
- url: '/pages/order_addcart/order_addcart'
- })
- },
-
- goCat: function(news) {
- let that = this,
- productSelect = that.productValue[this.attrValue];
-
- if (that.attr.productAttr.length && productSelect === undefined)
- return that.$util.Tips({
- title: '产品库存不足,请选择其它属性'
- });
- if (that.attr.productSelect.cart_num <= 0) {
- that.attr.productSelect.cart_num = 1
- return that.$util.Tips({
- title: '请先选择属性'
- });
- }
- let q = {
- productId: that.id,
- cartNum: that.attr.productSelect.cart_num,
- new: 0,
- uniqueId: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : ''
- };
- postCartAdd(q)
- .then(function(res) {
- that.isOpen = false;
- that.attr.cartAttr = false;
- if (news) {
- uni.navigateTo({
- url: '/pages/goods/order_confirm/index?new=1&cartId=' + res.data.cartId
- });
- } else {
- that.$util.Tips({
- title: '添加购物车成功'
- });
- }
- that.getCartNum();
- that.getCartList();
- })
- .catch(err => {
- that.isOpen = false;
- return that.$util.Tips({
- title: err
- });
- });
- },
-
- joinCart: function(item) {
-
- if (this.isLogin === false) {
- this.getIsLogin();
- } else {
- uni.showLoading({
- title: '加载中'
- });
- this.getAttrs(item.id);
- this.$set(this, 'id', item.id);
- this.$set(this.attr, 'cartAttr', true);
- }
- },
-
- getAttrs(id) {
- let that = this;
- getAttr(id, 0).then(res => {
- uni.hideLoading();
- that.$set(that.attr, 'productAttr', res.data.productAttr);
- that.$set(that, 'productValue', res.data.productValue);
- that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
- that.$set(that, 'storeInfo', res.data.storeInfo);
- that.DefaultSelect();
- })
- },
-
- DefaultSelect: function() {
- let productAttr = this.attr.productAttr;
- let value = [];
- for (var key in this.productValue) {
- if (this.productValue[key].stock > 0) {
- value = this.attr.productAttr.length ? key.split(',') : [];
- break;
- }
- }
- for (let i = 0; i < productAttr.length; i++) {
- this.$set(productAttr[i], 'index', value[i]);
- }
-
- let productSelect = this.productValue[value.join(',')];
- if (productSelect && productAttr.length) {
- this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
- this.$set(this.attr.productSelect, 'image', productSelect.image);
- this.$set(this.attr.productSelect, 'price', productSelect.price);
- this.$set(this.attr.productSelect, 'stock', productSelect.stock);
- this.$set(this.attr.productSelect, 'unique', productSelect.unique);
- this.$set(this.attr.productSelect, 'cart_num', 1);
- this.$set(this, 'attrValue', value.join(','));
- this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
- } else if (!productSelect && productAttr.length) {
- this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
- this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
- this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
- this.$set(this.attr.productSelect, 'stock', 0);
- this.$set(this.attr.productSelect, 'unique', '');
- this.$set(this.attr.productSelect, 'cart_num', 0);
- this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
- this.$set(this, 'attrValue', '');
- } else if (!productSelect && !productAttr.length) {
- this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
- this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
- this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
- this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock);
- this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '');
- this.$set(this.attr.productSelect, 'cart_num', 1);
- this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
- this.$set(this, 'attrValue', '');
- }
- },
-
- iptCartNum: function(e) {
- this.$set(this.attr.productSelect, 'cart_num', e);
- },
- attrVal(val) {
- this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
- .indexn]);
- },
- onMyEvent: function() {
- this.$set(this.attr, 'cartAttr', false);
- },
-
- ChangeAttr: function(res) {
- let productSelect = this.productValue[res];
- if (productSelect && productSelect.stock > 0) {
- this.$set(this.attr.productSelect, "image", productSelect.image);
- this.$set(this.attr.productSelect, "price", productSelect.price);
- this.$set(this.attr.productSelect, "stock", productSelect.stock);
- this.$set(this.attr.productSelect, "unique", productSelect.unique);
- this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
- this.$set(this.attr.productSelect, "cart_num", 1);
- this.$set(this, "attrValue", res);
- } else if (productSelect && productSelect.stock == 0) {
- this.$set(this.attr.productSelect, "image", productSelect.image);
- this.$set(this.attr.productSelect, "price", productSelect.price);
- this.$set(this.attr.productSelect, "stock", 0);
- this.$set(this.attr.productSelect, "unique", "");
- this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
- this.$set(this.attr.productSelect, "cart_num", 0);
- this.$set(this, "attrValue", "");
- } else {
- this.$set(this.attr.productSelect, "image", this.storeInfo.image);
- this.$set(this.attr.productSelect, "price", this.storeInfo.price);
- this.$set(this.attr.productSelect, "stock", 0);
- this.$set(this.attr.productSelect, "unique", "");
- this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
- this.$set(this.attr.productSelect, "cart_num", 0);
- this.$set(this, "attrValue", "");
- }
- },
-
- ChangeCartNum: function(changeValue) {
-
-
- let productSelect = this.productValue[this.attrValue];
-
- if (productSelect === undefined && !this.attr.productAttr.length) productSelect = this.attr
- .productSelect;
-
- if (productSelect === undefined) return;
- let stock = productSelect.stock || 0;
- let num = this.attr.productSelect;
- if (changeValue) {
- num.cart_num++;
- if (num.cart_num > stock) {
- this.$set(this.attr.productSelect, 'cart_num', stock ? stock : 1);
- this.$set(this, 'cart_num', stock ? stock : 1);
- }
- } else {
- num.cart_num--;
- if (num.cart_num < 1) {
- this.$set(this.attr.productSelect, 'cart_num', 1);
- this.$set(this, 'cart_num', 1);
- }
- }
- },
- moreNav() {
- this.currentPage = !this.currentPage
- },
-
- getBrand() {
- brand(this.where).then(res => {
- this.brandList = res.data
- }).catch(err => {
- return this.$util.Tips({
- title: err.msg
- });
- })
- },
-
- set_brand() {
- this.brandtip = true
- this.currentPage = false
- },
-
- closeBrand() {
- this.brandtip = false
- },
-
- seletBrand(id) {
- if (this.brandArray.indexOf(id) == -1) {
- this.brandArray.push(id)
- } else {
- this.brandArray.splice(this.brandArray.indexOf(id), 1)
- }
- },
- brandReset() {
- this.brandArray = []
- this.brandOk();
- },
- brandOk() {
- this.brandtip = false;
- this.loadend = false;
- this.$set(this.where, 'page', 1);
- this.get_product_list(true);
- },
-
- godDetail(item) {
- this.currentPage = false
- if (this.promotions_type) {
- uni.navigateTo({
- url: `/pages/goods_details/index?id=${item.id}`
- })
- } else {
- goShopDetail(item, this.uid).then(res => {
- uni.navigateTo({
- url: `/pages/goods_details/index?id=${item.id}`
- })
- })
- }
- },
- Changswitch: function() {
- let that = this;
- this.currentPage = false
- that.is_switch = !that.is_switch
- },
- searchSubmit: function(e) {
- let that = this;
- this.currentPage = false
- that.$set(that.where, 'keyword', e.detail.value);
- that.loadend = false;
- that.$set(that.where, 'page', 1)
- this.get_product_list(true);
- },
-
- get_host_product: function() {
- let that = this;
- if (that.hotScroll) return
- getProductHot(
- that.hotPage,
- that.hotLimit,
- ).then(res => {
- that.hotPage++
- that.hotScroll = res.data.length < that.hotLimit
- that.hostProduct = that.hostProduct.concat(res.data)
-
- });
- },
-
- set_where: function(e) {
- this.currentPage = false
- switch (e) {
- case 1:
-
- return history.back();
-
-
- return uni.navigateBack({
- delta: 1,
- })
-
- break;
- case 2:
- if (this.price == 0) this.price = 1;
- else if (this.price == 1) this.price = 2;
- else if (this.price == 2) this.price = 0;
- this.stock = 0;
- break;
- case 3:
- if (this.stock == 0) this.stock = 1;
- else if (this.stock == 1) this.stock = 2;
- else if (this.stock == 2) this.stock = 0;
- this.price = 0
- break;
- case 4:
- this.nows = !this.nows;
- break;
- }
- this.loadend = false;
- this.$set(this.where, 'page', 1);
- this.get_product_list(true);
- },
-
- setWhere: function() {
- if (this.price == 0) this.where.priceOrder = '';
- else if (this.price == 1) this.where.priceOrder = 'asc';
- else if (this.price == 2) this.where.priceOrder = 'desc';
- if (this.stock == 0) this.where.salesOrder = '';
- else if (this.stock == 1) this.where.salesOrder = 'asc';
- else if (this.stock == 2) this.where.salesOrder = 'desc';
- this.where.news = this.nows ? 1 : 0;
- },
-
- get_product_list: function(isPage) {
- let that = this;
- that.setWhere();
- if (that.loadend) return;
- if (that.loading) return;
- if (isPage === true) {
- if (this.is_switch) {
- that.$refs.waterfallsFlow.refresh();
- }
- that.$set(that, 'productList', []);
- }
- that.loading = true;
- that.loadTitle = '';
- that.$set(that.where, 'brand_id', that.brandArray.join(","));
- getProductslist(that.where).then(res => {
- let list = res.data;
- let productList = that.$util.SplitArray(list, that.productList);
- let loadend = list.length < that.where.limit;
- that.loadend = loadend;
- that.loading = false;
- that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
- that.$set(that, 'productList', productList);
- that.$set(that.where, 'page', that.where.page + 1);
- if (!that.productList.length) this.get_host_product();
- }).catch(err => {
- that.loading = false;
- that.loadTitle = '加载更多';
- });
- },
- },
- onPullDownRefresh() {
- },
- onPageScroll(e) {
- this.currentPage = false
- },
- onReachBottom() {
- if (this.productList.length > 0) {
- this.get_product_list();
- } else {
- this.get_host_product();
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .productList{
- .header{
- position: fixed;
- top:0;
- left:0;
- width: 100%;
- z-index: 9;
- background-color: var(--view-theme);
- .bnt{
- background: rgba(0, 0, 0, 0.2);
- border-radius: 50rpx;
- border: 0.5px solid rgba(255, 255, 255, 0.3);
- position: fixed;
- left:10px;
- color: #fff;
- .iconfont{
- width: 48%;
- text-align: center;
- }
- .lines{
- width: 1rpx;
- height: 34rpx;
- background-color: rgba(225, 225, 225, 0.2);
- }
- }
- .title{
- font-size: 34rpx;
- color: #fff;
- }
- }
- }
- .height-add {
- height: 100rpx;
- height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
- height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
- width: 100%;
- }
- .home {
- color: #333;
- width: 56rpx;
- height: 56rpx;
- background: rgba(255, 255, 255, 1);
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-radius: 40rpx;
- font-size: 33rpx;
-
- &.on {
- background: unset;
- color: #333;
- }
-
- &.homeIndex {
- width: 98rpx;
- }
- }
-
- .home .iconfont {
- width: 60rpx;
- text-align: center;
- font-size: 28rpx;
- font-weight: bold;
- }
-
- .home .line {
- width: 1rpx;
- height: 34rpx;
- background: #B3B3B3;
- }
-
- .home .icon-xiangzuo {
- font-size: 28rpx;
- }
-
- .clored {
- color: var(--view-theme);
- font-weight: 600;
-
- .icon-gou {
- font-weight: 400 !important;
- }
- }
-
- .selectbrand {
- position: fixed;
- background-color: #FFFFFF;
- z-index: 8;
- width: 100%;
- top: 170rpx;
- left: 0;
- max-height: 860rpx;
- overflow: hidden;
- overflow-y: auto;
- border-radius: 0 0 24rpx 24rpx;
- transform: translate3d(0, -100%, 0);
- transition: all .2s cubic-bezier(.9, .5, .5, .25);
-
- // padding-top: 200rpx;
- // padding-top: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
- // padding-top: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
- .box {
- .selet {
- display: flex;
- flex-wrap: wrap;
- padding: 20rpx 20rpx 0 20rpx;
- max-height: 520rpx;
- overflow-x: hidden;
- overflow-y: auto;
-
- .seletbox {
- width: 216rpx;
- height: 68rpx;
- border-radius: 34rpx;
- background-color: #F5F5F5;
- margin-bottom: 30rpx;
- text-align: center;
- font-size: 24rpx;
- margin-right: 28rpx;
-
- &:nth-child(3n) {
- margin-right: 0;
- }
- }
-
- .seleton {
- border: 1px solid var(--view-theme);
- background: var(--view-minorColorT);
- color: var(--view-theme);
- }
- }
-
- .btn {
- display: flex;
- justify-content: space-between;
- text-align: center;
- padding: 30rpx 20rpx 40rpx;
-
- .sambox {
- width: 328rpx;
- height: 64rpx;
- border-radius: 38rpx;
- border: 2rpx solid var(--view-theme);
- color: #FFFFFF;
- line-height: 64rpx;
- }
-
- .reset {
- color: var(--view-theme);
- }
-
- .ok {
- background: var(--view-theme);
- }
- }
-
- .tlebox {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- display: flex;
- justify-content: space-between;
- padding: 0 40rpx 0 36rpx;
- margin-left: 20rpx;
- border-bottom: 2rpx solid #EEEEEE;
-
- }
-
- .tlebox:last-child {
- border-bottom: 0;
- }
- }
- }
-
- .selectbrand.on {
- transform: translate3d(0, 0, 0);
- }
- .productList .searchMp{
- padding-left: 23rpx;
- padding-right: 5rpx;
- margin-top: 7px;
- }
- .productList .searchMp .icon-pailie,
- .productList .searchMp .icon-tupianpailie{
- color: #fff;
- width: 62rpx;
- font-size: 40rpx;
- height: 33px;
- line-height: 33px;
- }
-
- .productList .searchMp .input{
- width: 636rpx;
- height: 30px;
- background-color: #fff;
- border-radius: 30rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- &.on{
- width: 704rpx;
- input{
- width: 619rpx;
- }
- }
- input{
- width: 550rpx;
- height: 100%;
- font-size: 26rpx;
- }
- .placeholder{
- color: #ccc;
- }
- .iconfont{
- color: #ccc;
- font-size: 35rpx;
- }
- }
-
- .productList .search {
- width: 100%;
- height: 86rpx;
- padding-left: 23rpx;
- box-sizing: border-box;
- position: fixed;
- left: 0;
- top: 0;
- z-index: 9;
-
- .fanhui {
- color: #fff;
- }
- }
-
- .productList .search .input {
- width: 638rpx;
- height: 60rpx;
- background-color: #fff;
- border-radius: 50rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
-
- &.on {
- width: 652rpx;
- margin-right: 30rpx;
-
- input {
- width: 560rpx;
- }
- }
- }
-
- .productList .search .input input {
- width: 546rpx;
- height: 100%;
- font-size: 26rpx;
- }
-
- .productList .search .input .placeholder {
- color: #999;
- }
-
- .productList .search .input .iconfont {
- font-size: 35rpx;
- color: #555;
- }
-
- .productList .search .icon-pailie,
- .productList .search .icon-tupianpailie {
- color: #fff;
- width: 62rpx;
- font-size: 40rpx;
- height: 86rpx;
- line-height: 86rpx;
- }
-
- .productList .nav {
- /* #ifdef H5 */
- height: 86rpx;
- /* #endif */
- /* #ifndef H5 */
- height: 45px;
- /* #endif */
- color: #454545;
- position: fixed;
- left: 0;
- width: 100%;
- font-size: 28rpx;
- background-color: #fff;
- margin-top: 86rpx;
- top: 0;
- z-index: 9;
- }
-
- .productList .nav .item {
- width: 25%;
- text-align: center;
- }
-
- .productList .nav .item.font-color {
- font-weight: bold;
- }
-
- .productList .nav .item image {
- width: 15rpx;
- height: 19rpx;
- margin-left: 10rpx;
- }
-
- .productList .list {
- padding: 0 20rpx;
- margin-top: 172rpx;
-
- }
-
- .productList .list.waterList {
- margin-top: 192rpx;
- }
-
- .productList .list.on {
- background-color: #fff;
- border-top: 1px solid #f6f6f6;
-
- .title {
- font-size: 22rpx;
- color: #333333;
- margin-top: 30rpx;
-
- .label {
- border-radius: 4rpx;
- padding: 2rpx 8rpx;
- background-color: var(--view-minorColorT);
- font-size: 20rpx;
- color: var(--view-theme);
- margin-right: 8rpx;
- }
- }
-
- .footer {
- width: 100%;
- height: 96rpx;
- background-color: #fff;
- position: fixed;
- bottom: 0;
- left: 0;
- box-shadow: 0 -4rpx 32rpx 0 rgba(0, 0, 0, 0.08);
- padding: 0 20rpx 0 32rpx;
- z-index: 9;
- box-sizing: border-box;
- padding-bottom: calc(constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/;
- padding-bottom: calc(env(safe-area-inset-bottom)); ///兼容 IOS<11.2/;
- height: calc(96rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
- height: calc(96rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
-
- .right {
- color: #888888;
- font-size: 20rpx;
- margin-left: 32rpx;
-
- .num {
- font-size: 28rpx;
- color: #333333;
- font-weight: 400;
-
- .money {
- font-weight: 500;
- }
- }
- }
-
- .icon {
- width: 72rpx;
- height: 72rpx;
- background: #F5F5F5;
- border-radius: 50%;
- text-align: center;
- line-height: 72rpx;
- position: relative;
-
- .iconfont {
- font-size: 38rpx;
- }
-
- .num {
- min-width: 32rpx;
- background-color: #fff;
- color: var(--view-theme);
- border-radius: 15px;
- position: absolute;
- right: -14rpx;
- top: 0;
- font-size: 10px;
- padding: 0 8rpx;
- height: 34rpx;
- line-height: 31rpx;
- border: 1px solid var(--view-theme);
- }
- }
-
- .bnt {
- width: 192rpx;
- height: 64rpx;
- background: var(--view-theme);
- border-radius: 40rpx;
- color: #FFFFFF;
- font-size: 28rpx;
- text-align: center;
- line-height: 64rpx;
- }
- }
- }
-
- .productList .list .item {
- width: 345rpx;
- margin-top: 20rpx;
- background-color: #fff;
- border-radius: 20rpx;
-
- .text {
- &.on {
- .nameCon {
- height: 136rpx;
- }
-
- .name {
- margin-bottom: 4rpx;
- }
-
- .label {
- font-size: 20rpx;
- color: var(--view-theme);
- border-radius: 4rpx;
- border: 1px solid var(--view-theme);
- /* #ifdef APP */
- padding: 2rpx 6rpx 0rpx 6rpx;
- /* #endif */
- /* #ifndef APP */
- padding: 0 6rpx;
- /* #endif */
- margin-right: 10rpx;
- }
-
- .sales {
- color: #999999;
- font-size: 22rpx;
- margin-top: 10rpx;
-
- .score {
- margin-left: 24rpx;
- }
-
- .icon {
- width: 48rpx;
- height: 48rpx;
- border-radius: 50%;
- border: 1px solid var(--view-theme);
- font-size: 20rpx;
- color: var(--view-theme);
- }
- }
- }
- }
- }
-
- .productList .list .item.on {
- width: 100%;
- display: flex;
- margin: 30rpx 0 0 0;
- }
-
- .productList .list .item .pictrue {
- position: relative;
- width: 100%;
- height: 345rpx;
- }
-
- .productList .list .item .pictrue.on {
- width: 240rpx;
- height: 240rpx;
- position: relative;
-
- .activityFrame{
- border-radius: 12rpx;
- }
-
- .masks {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 10rpx;
-
- .bg {
- width: 110rpx;
- height: 110rpx;
- background: #000000;
- opacity: 0.6;
- color: #fff;
- font-size: 22rpx;
- border-radius: 50%;
- padding: 22rpx 0;
- text-align: center;
- }
- }
- }
-
- .productList .list .item .pictrue image {
- width: 100%;
- height: 100%;
- border-radius: 20rpx 20rpx 0 0;
- }
-
- .productList .list .item .pictrue image.on {
- border-radius: 12rpx;
- }
-
- .productList .list .item .text {
- padding: 20rpx 17rpx 26rpx 17rpx;
- font-size: 30rpx;
- color: #222;
- }
-
- .productList .list .item .text.on {
- width: 460rpx;
- padding: 0 0 0 22rpx;
- }
-
- .productList .list .item .text .money {
- font-size: 26rpx;
- font-weight: bold;
- margin-top: 8rpx;
- }
-
- .productList .list .item .text .money.on {
- margin-top: 0;
- margin-right: 5rpx;
- }
-
- .productList .list .item .text .money .num {
- font-size: 34rpx;
- }
-
- .productList .list .item .text .vip {
- font-size: 22rpx;
- color: #aaa;
- margin-top: 7rpx;
- }
-
- .productList .list .item .text .vip.on {
- margin-top: 12rpx;
- }
-
- .productList .list .item .text .vip .vip-money {
- font-size: 24rpx;
- color: #282828;
- font-weight: 600;
- }
-
- .productList .list .vip .vip-money .icon {
- font-size: 15rpx;
- background: #FF9500;
- color: #fff;
- border-radius: 18rpx;
- padding: 1rpx 6rpx;
- margin-left: 10rpx;
- min-width: 60rpx;
-
- .iconfont {
- font-size: 15rpx;
- margin-right: 5rpx;
- }
-
- &.on {
- background: #333;
- color: #FDDAA4;
- min-width: unset;
- }
- }
-
- .productList .list .item .text .vip .vip-money image {
- width: 46rpx;
- height: 21rpx;
- margin-left: 4rpx;
- }
-
- .noCommodity {
- background-color: #fff;
- padding-bottom: 30rpx;
- .emptyBox{
- text-align: center;
- .tips{
- color: #aaa;
- font-size: 26rpx;
- }
- image {
- width: 414rpx;
- height: 304rpx;
- }
- }
- }
-
- .waterfalls {
- padding: 10rpx 16rpx 16rpx 16rpx;
- color: #222;
-
- .name {
- font-size: 28rpx;
- }
-
- .label {
- font-size: 20rpx;
- color: var(--view-theme);
- border-radius: 4rpx;
- border: 1px solid var(--view-theme);
- padding: 0 6rpx;
- display: inline-block;
- margin-top: 10rpx;
- margin-right: 10rpx;
- }
-
- .money {
- font-size: 26rpx;
- font-weight: 700;
-
- .num {
- font-size: 34rpx;
- }
-
- .nums {
- font-size: 28rpx;
- }
- }
-
- .vip {
- font-size: 22rpx;
- color: #aaa;
- margin-top: 6rpx;
-
- .vip-money {
- font-size: 24rpx;
- color: #282828;
- font-weight: bold;
-
- image {
- width: 46rpx;
- height: 21rpx;
- margin-left: 4rpx;
- }
- }
- }
- }
- </style>
|