index.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469
  1. <template>
  2. <!-- 商品列表 -->
  3. <view :style="colorStyle">
  4. <view class='productList'>
  5. <!-- #ifdef MP -->
  6. <view class="header" :style="'height:'+(menuButton.top+menuButton.height+47)+'px;'">
  7. <view class="acea-row row-center-wrapper" :style="'height:'+menuButton.height+'px;margin-top:'+menuButton.top+'px;'">
  8. <view class="bnt acea-row row-center-wrapper" :style="'height:'+menuButton.height+'px;width:'+menuButton.width+'px;top:'+menuButton.top+'px;'">
  9. <text class="iconfont icon-fanhui2" @click="returnPage"></text>
  10. <text class="lines"></text>
  11. <text class="iconfont icon-gengduo5" @click="moreNav"></text>
  12. </view>
  13. <view class="title">商品列表</view>
  14. </view>
  15. <view class="searchMp acea-row row-between-wrapper">
  16. <view class='input acea-row row-between-wrapper' :class="promotions_type?'on':''"><text
  17. class='iconfont icon-sousuo'></text>
  18. <input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search"
  19. :value='where.keyword' @confirm="searchSubmit"></input>
  20. </view>
  21. <view class='iconfont' v-if="!promotions_type"
  22. :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
  23. </view>
  24. </view>
  25. </view>
  26. <!-- #endif -->
  27. <!-- #ifndef MP -->
  28. <view class='search bg-color acea-row row-between-wrapper'>
  29. <view class='input acea-row row-between-wrapper' :class="promotions_type?'on':''"><text
  30. class='iconfont icon-sousuo'></text>
  31. <input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search"
  32. :value='where.keyword' @confirm="searchSubmit"></input>
  33. </view>
  34. <view class='iconfont' v-if="!promotions_type"
  35. :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
  36. </view>
  37. </view>
  38. <!-- #endif -->
  39. <!-- #ifdef MP -->
  40. <view class='nav acea-row row-middle row-around' :style="'margin-top:'+(menuButton.top+menuButton.height+47)+'px;'">
  41. <!-- #endif -->
  42. <!-- #ifndef MP -->
  43. <view class='nav acea-row row-middle row-around'>
  44. <!-- #endif -->
  45. <view class='item line1' :class='title ? "font-num":""' @click='set_where(1)'>{{title ? title:'默认'}}
  46. </view>
  47. <view class='item' @click='set_where(2)'>
  48. 价格
  49. <image v-if="price==1" src='../../../static/images/up.png'></image>
  50. <image v-else-if="price==2" src='../../../static/images/down.png'></image>
  51. <image v-else src='../../../static/images/horn.png'></image>
  52. </view>
  53. <view class='item' @click='set_where(3)'>
  54. 销量
  55. <image v-if="stock==1" src='../../../static/images/up.png'></image>
  56. <image v-else-if="stock==2" src='../../../static/images/down.png'></image>
  57. <image v-else src='../../../static/images/horn.png'></image>
  58. </view>
  59. <!-- down -->
  60. <!-- <view class='item' :class='nows ? "font-color":""' @click='set_where(4)'>新品</view> -->
  61. <view class='item' v-if="brandList.length" :class="{clored:brandArray.length>0}" @click='set_brand'>品牌
  62. <image src='../static/xiala.png'></image>
  63. </view>
  64. <homeList :navH="navH" :goodList="goodList" :currentPage="currentPage" :sysHeight="sysHeight"
  65. :goodsShow="true"></homeList>
  66. </view>
  67. <!-- #ifdef MP -->
  68. <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">
  69. <!-- #endif -->
  70. <!-- #ifndef MP -->
  71. <view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"' v-if="is_switch==false">
  72. <!-- #endif -->
  73. <view class="title" v-if="promotionsInfo.title"><text class="label">{{promotionsInfo.title}}</text>{{promotionsInfo.desc}}</view>
  74. <view class='item' :class='is_switch==true?"":"on"' hover-class='none'
  75. v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
  76. <view class='pictrue' :class='is_switch==true?"":"on"'>
  77. <image :src='item.image' :class='is_switch==true?"":"on"'></image>
  78. <view class="activityFrame" v-if="item.activity_frame.image" :style="'background-image: url('+item.activity_frame.image+');'"></view>
  79. <view class="masks acea-row row-center-wrapper" v-if="item.stock<=0">
  80. <view class="bg">
  81. <view>暂时</view>
  82. <view>售罄</view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class='text' :class='is_switch==true?"":"on"'>
  87. <view class="nameCon">
  88. <view class='name line2'>{{item.store_name}}</view>
  89. <text class="label"
  90. v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</text>
  91. <text class="label"
  92. v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</text>
  93. <text class="label"
  94. v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</text>
  95. <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
  96. </view>
  97. <view class="vip acea-row row-middle on">
  98. <view class='money font-color' :class='is_switch==true?"":"on"'><text
  99. class='num'>{{item.price}}</text></view>
  100. <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
  101. <view>{{item.vip_price}}</view>
  102. <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
  103. class="iconfont icon-huangguan4"></text>SVIP</view>
  104. <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
  105. class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
  106. </view>
  107. </view>
  108. <view class='sales acea-row row-between-wrapper'>
  109. <view class="acea-row">
  110. <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
  111. <view class="score">评分 {{item.star}}</view>
  112. </view>
  113. <view v-if="promotions_type && item.product_type==0 && !item.custom_form.length"
  114. class="icon acea-row row-center-wrapper" @click.stop="joinCart(item)">
  115. <text class="iconfont icon-gouwuche"></text>
  116. </view>
  117. </view>
  118. </view>
  119. </view>
  120. <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
  121. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  122. </view>
  123. <view class="height-add" v-if="productList.length>3"></view>
  124. <view class="footer acea-row row-between-wrapper" v-if="promotions_type">
  125. <view class="acea-row row-middle">
  126. <view class="icon">
  127. <text class="iconfont icon-pinzhongqiquan"></text>
  128. <view class="num acea-row row-center-wrapper" v-if="totalNum>0">{{totalNum}}</view>
  129. </view>
  130. <view class="right">
  131. <view class="num">小计:<text class="money">¥{{totalPrice || 0}}</text></view>
  132. <view v-if="this.promotions_type != 4">
  133. <view v-if="promotionsInfo.differ_threshold>0">
  134. 再买{{promotionsInfo.differ_threshold}}{{promotionsInfo.threshold_type==1?'元':'件'}}<text
  135. v-if="promotionsInfo.differ_price || promotionsInfo.differ_discount">
  136. <text v-if="promotionsInfo.differ_price">可减{{promotionsInfo.differ_price}}</text>
  137. <text v-else>可打{{parseFloat(promotionsInfo.differ_discount)/10}}</text>
  138. </text>
  139. </view>
  140. <view v-else>
  141. <text v-if="promotionsInfo.reach_threshold">已购满{{promotionsInfo.reach_threshold}}{{promotionsInfo.threshold_type==1?'元':'件'}},</text>已减{{promotionsInfo.sum_promotions_price}}
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="bnt" @click="goCart">去购物车</view>
  147. </view>
  148. </view>
  149. <!-- #ifdef MP -->
  150. <view class="list waterList" :style="'margin-top:'+(menuButton.top+menuButton.height+102)+'px;'" v-else>
  151. <!-- #endif -->
  152. <!-- #ifndef MP -->
  153. <view class="list waterList" v-else>
  154. <!-- #endif -->
  155. <waterfallsFlow ref="waterfallsFlow" :list="productList" @wapper-lick="godDetail">
  156. <!-- #ifdef MP-WEIXIN -->
  157. <view v-for="(item, index) of productList" :key="index" slot="slot{{index}}">
  158. <view class="waterfalls">
  159. <view class='name line2'>{{item.store_name}}</view>
  160. <span class="label"
  161. v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
  162. <span class="label"
  163. v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
  164. <span class="label"
  165. v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
  166. <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
  167. <view class="vip acea-row row-middle">
  168. <view class='money font-color'>
  169. <text class='num'>{{item.price.toString().split(".")[0]}}</text>
  170. <text class='nums'
  171. v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
  172. </view>
  173. <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
  174. <view>{{item.vip_price}}</view>
  175. <!-- <image src='../../static/images/vip.png' v-if="item.price_type == 'member'"></image> -->
  176. <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
  177. class="iconfont icon-huangguan4"></text>SVIP</view>
  178. <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
  179. class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
  180. </view>
  181. </view>
  182. <view class='vip acea-row row-between-wrapper'>
  183. <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
  184. <view>评分 {{item.star}}</view>
  185. </view>
  186. </view>
  187. </view>
  188. <!-- #endif -->
  189. <!-- #ifndef MP-WEIXIN -->
  190. <template v-slot:default="item">
  191. <view class="waterfalls">
  192. <view class='name line2'>{{item.store_name}}</view>
  193. <span class="label"
  194. v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
  195. <span class="label"
  196. v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
  197. <span class="label"
  198. v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
  199. <text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
  200. <view class="vip acea-row row-middle">
  201. <view class='money font-color'>
  202. <text class='num'>{{item.price.toString().split(".")[0]}}</text>
  203. <text class='nums'
  204. v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
  205. </view>
  206. <view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
  207. <view>{{item.vip_price}}</view>
  208. <view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
  209. class="iconfont icon-huangguan4"></text>SVIP</view>
  210. <view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
  211. class="iconfont icon-v"></text>{{item.level_name}}</view>
  212. </view>
  213. </view>
  214. <view class='vip acea-row row-between-wrapper'>
  215. <view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
  216. <view>评分 {{item.star}}</view>
  217. </view>
  218. </view>
  219. </template>
  220. <!-- #endif -->
  221. </waterfallsFlow>
  222. <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
  223. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  224. </view>
  225. </view>
  226. </view>
  227. <view class='noCommodity' v-if="productList.length==0 && where.page > 1">
  228. <view class='emptyBox'>
  229. <image :src="imgHost + '/statics/images/no-thing.png'"></image>
  230. <view class="tips">暂无商品,去看点别的吧</view>
  231. </view>
  232. <recommend :hostProduct="hostProduct"></recommend>
  233. </view>
  234. <productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' :storeInfo='storeInfo' @myevent="onMyEvent"
  235. @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum"
  236. @goCat="goCat" id='product-window' :is_vip="is_vip"></productWindow>
  237. <home v-if="navigation"></home>
  238. <view class="mask" @touchmove.prevent :hidden="brandtip === false" @click="closeBrand"></view>
  239. <!-- #ifdef MP -->
  240. <view class="selectbrand" :style="'top:'+(menuButton.top+menuButton.height+92)+'px;'" :class="brandtip === true ? 'on' : ''">
  241. <!-- #endif -->
  242. <!-- #ifndef MP -->
  243. <view class="selectbrand" :class="brandtip === true ? 'on' : ''">
  244. <!-- #endif -->
  245. <view class="box">
  246. <view class="selet">
  247. <view class="seletbox acea-row row-center-wrapper"
  248. :class="{seleton:brandArray.indexOf(item.id) != -1}" v-for="(item,index) in brandList"
  249. :key="index" @click="seletBrand(item.id)">{{item.brand_name}}</view>
  250. </view>
  251. <view class="btn">
  252. <div class="sambox reset" @click="brandReset">重置</div>
  253. <div class="sambox ok" @click="brandOk">确定</div>
  254. </view>
  255. </view>
  256. </view>
  257. <!-- #ifdef MP -->
  258. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  259. <!-- #endif -->
  260. </view>
  261. </template>
  262. <script>
  263. let sysHeight = uni.getSystemInfoSync().statusBarHeight;
  264. // #ifdef MP
  265. let menuButton = uni.getMenuButtonBoundingClientRect();
  266. // #endif
  267. import home from '@/components/home';
  268. import homeList from '@/components/homeList'
  269. import productWindow from '@/components/productWindow';
  270. import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
  271. import {
  272. getProductslist,
  273. getProductHot,
  274. brand,
  275. getAttr,
  276. postCartAdd
  277. } from '@/api/store.js';
  278. import {
  279. toLogin
  280. } from '@/libs/login.js';
  281. import recommend from '@/components/recommend';
  282. import {
  283. mapGetters
  284. } from "vuex";
  285. import {
  286. goShopDetail
  287. } from '@/libs/order.js';
  288. import {
  289. getCartList,
  290. getCartCounts
  291. } from '@/api/order.js';
  292. import colors from '@/mixins/color.js';
  293. import {HTTP_REQUEST_URL} from '@/config/app';
  294. export default {
  295. computed: mapGetters(['uid', 'isLogin']),
  296. components: {
  297. recommend,
  298. home,
  299. homeList,
  300. waterfallsFlow,
  301. productWindow
  302. },
  303. mixins: [colors],
  304. data() {
  305. return {
  306. // #ifdef MP
  307. menuButton:menuButton,
  308. // #endif
  309. id: 0,
  310. productValue: [], //系统属性
  311. is_vip: 0, //是否是会员
  312. attr: {
  313. cartAttr: false,
  314. productAttr: [],
  315. productSelect: {}
  316. },
  317. attrValue: '', //已选属性
  318. navH: 22,
  319. sysHeight: sysHeight,
  320. sysHeight: 0,
  321. goodList: true,
  322. currentPage: false,
  323. brandtip: false, //品牌弹窗
  324. brandArray: [],
  325. productList: [],
  326. is_switch: true,
  327. where: {
  328. sid: 0,
  329. keyword: '',
  330. priceOrder: '',
  331. salesOrder: '',
  332. news: 0,
  333. page: 1,
  334. limit: 20,
  335. cid: 0,
  336. brand_id: [],
  337. promotions_id: 0
  338. },
  339. price: 0,
  340. stock: 0,
  341. nows: false,
  342. loadend: false,
  343. loading: false,
  344. loadTitle: '加载更多',
  345. title: '',
  346. hostProduct: [],
  347. hotPage: 1,
  348. hotLimit: 10,
  349. hotScroll: false,
  350. brandList: [],
  351. storeInfo: {},
  352. promotions_type: 0,
  353. totalPrice: 0,
  354. promotionsInfo: {},
  355. totalNum: 0,
  356. imgHost:HTTP_REQUEST_URL,
  357. isShowAuth: false
  358. };
  359. },
  360. onLoad: function(options) {
  361. this.where.cid = options.cid || 0;
  362. this.$set(this.where, 'sid', options.sid || 0);
  363. this.title = options.title || '';
  364. this.$set(this.where, 'keyword', options.searchValue ? decodeURIComponent(options.searchValue) : '');
  365. this.$set(this.where, 'productId', options.productId || '');
  366. this.$set(this.where, 'brand_id', options.brandId || 0);
  367. if (options.promotions_type) {
  368. this.promotions_type = options.promotions_type;
  369. this.where.promotions_id = options.promotions_id;
  370. if (options.promotions_type) {
  371. this.is_switch = false
  372. }
  373. }
  374. this.get_product_list();
  375. this.getBrand();
  376. },
  377. onShow() {
  378. uni.removeStorageSync('form_type_cart');
  379. if (this.isLogin && !this.is_switch) {
  380. this.getCartList();
  381. this.getCartNum();
  382. }
  383. },
  384. methods: {
  385. returnPage(){
  386. uni.navigateBack({
  387. delta:1 //返回层数,2则上上页
  388. })
  389. },
  390. getIsLogin(){
  391. toLogin()
  392. },
  393. onLoadFun(){
  394. if (!this.is_switch) {
  395. this.getCartList();
  396. this.getCartNum();
  397. }
  398. this.isShowAuth = false
  399. },
  400. // 授权关闭
  401. authColse: function(e) {
  402. this.isShowAuth = e
  403. },
  404. getCartNum() {
  405. let id = uni.getStorageSync('user_store_id') || 0;
  406. getCartCounts(0,id).then(res => {
  407. this.totalNum = res.data.count;
  408. }).catch(err => {
  409. return this.$util.Tips({
  410. title: err
  411. });
  412. })
  413. },
  414. getCartList() {
  415. let truePrice = 0;
  416. getCartList().then(res => {
  417. let data = res.data,
  418. valid = res.data.valid;
  419. valid.forEach(item => {
  420. item.promotions.forEach(z => {
  421. if (this.where.promotions_id == z.id) {
  422. this.promotionsInfo = z;
  423. }
  424. })
  425. item.cart.forEach(j => {
  426. truePrice = this.$util.$h.Add(truePrice, this.$util.$h.Mul(j.truePrice, j.cart_num));
  427. })
  428. })
  429. this.totalPrice = this.$util.$h.Sub(truePrice, data.deduction.coupon_price)
  430. }).catch(err => {
  431. return this.$util.Tips({
  432. title: err
  433. });
  434. })
  435. },
  436. goCart() {
  437. uni.switchTab({
  438. url: '/pages/order_addcart/order_addcart'
  439. })
  440. },
  441. /*
  442. * 加入购物车
  443. */
  444. goCat: function(news) {
  445. let that = this,
  446. productSelect = that.productValue[this.attrValue];
  447. //如果有属性,没有选择,提示用户选择
  448. if (that.attr.productAttr.length && productSelect === undefined)
  449. return that.$util.Tips({
  450. title: '产品库存不足,请选择其它属性'
  451. });
  452. if (that.attr.productSelect.cart_num <= 0) {
  453. that.attr.productSelect.cart_num = 1
  454. return that.$util.Tips({
  455. title: '请先选择属性'
  456. });
  457. }
  458. let q = {
  459. productId: that.id,
  460. cartNum: that.attr.productSelect.cart_num,
  461. new: 0,
  462. uniqueId: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : ''
  463. };
  464. postCartAdd(q)
  465. .then(function(res) {
  466. that.isOpen = false;
  467. that.attr.cartAttr = false;
  468. if (news) {
  469. uni.navigateTo({
  470. url: '/pages/goods/order_confirm/index?new=1&cartId=' + res.data.cartId
  471. });
  472. } else {
  473. that.$util.Tips({
  474. title: '添加购物车成功'
  475. });
  476. }
  477. that.getCartNum();
  478. that.getCartList();
  479. })
  480. .catch(err => {
  481. that.isOpen = false;
  482. return that.$util.Tips({
  483. title: err
  484. });
  485. });
  486. },
  487. /**
  488. * 打开属性加入购物车
  489. *
  490. */
  491. joinCart: function(item) {
  492. //是否登录
  493. if (this.isLogin === false) {
  494. this.getIsLogin();
  495. } else {
  496. uni.showLoading({
  497. title: '加载中'
  498. });
  499. this.getAttrs(item.id);
  500. this.$set(this, 'id', item.id);
  501. this.$set(this.attr, 'cartAttr', true);
  502. }
  503. },
  504. // 商品详情接口;
  505. getAttrs(id) {
  506. let that = this;
  507. getAttr(id, 0).then(res => {
  508. uni.hideLoading();
  509. that.$set(that.attr, 'productAttr', res.data.productAttr);
  510. that.$set(that, 'productValue', res.data.productValue);
  511. that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
  512. that.$set(that, 'storeInfo', res.data.storeInfo);
  513. that.DefaultSelect();
  514. })
  515. },
  516. /**
  517. * 默认选中属性
  518. *
  519. */
  520. DefaultSelect: function() {
  521. let productAttr = this.attr.productAttr;
  522. let value = [];
  523. for (var key in this.productValue) {
  524. if (this.productValue[key].stock > 0) {
  525. value = this.attr.productAttr.length ? key.split(',') : [];
  526. break;
  527. }
  528. }
  529. for (let i = 0; i < productAttr.length; i++) {
  530. this.$set(productAttr[i], 'index', value[i]);
  531. }
  532. //sort();排序函数:数字-英文-汉字;
  533. let productSelect = this.productValue[value.join(',')];
  534. if (productSelect && productAttr.length) {
  535. this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
  536. this.$set(this.attr.productSelect, 'image', productSelect.image);
  537. this.$set(this.attr.productSelect, 'price', productSelect.price);
  538. this.$set(this.attr.productSelect, 'stock', productSelect.stock);
  539. this.$set(this.attr.productSelect, 'unique', productSelect.unique);
  540. this.$set(this.attr.productSelect, 'cart_num', 1);
  541. this.$set(this, 'attrValue', value.join(','));
  542. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  543. } else if (!productSelect && productAttr.length) {
  544. this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
  545. this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
  546. this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
  547. this.$set(this.attr.productSelect, 'stock', 0);
  548. this.$set(this.attr.productSelect, 'unique', '');
  549. this.$set(this.attr.productSelect, 'cart_num', 0);
  550. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  551. this.$set(this, 'attrValue', '');
  552. } else if (!productSelect && !productAttr.length) {
  553. this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
  554. this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
  555. this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
  556. this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock);
  557. this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '');
  558. this.$set(this.attr.productSelect, 'cart_num', 1);
  559. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  560. this.$set(this, 'attrValue', '');
  561. }
  562. },
  563. /**
  564. * 购物车手动填写
  565. *
  566. */
  567. iptCartNum: function(e) {
  568. this.$set(this.attr.productSelect, 'cart_num', e);
  569. },
  570. attrVal(val) {
  571. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
  572. .indexn]);
  573. },
  574. onMyEvent: function() {
  575. this.$set(this.attr, 'cartAttr', false);
  576. },
  577. /**
  578. * 属性变动赋值
  579. *
  580. */
  581. ChangeAttr: function(res) {
  582. let productSelect = this.productValue[res];
  583. if (productSelect && productSelect.stock > 0) {
  584. this.$set(this.attr.productSelect, "image", productSelect.image);
  585. this.$set(this.attr.productSelect, "price", productSelect.price);
  586. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  587. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  588. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  589. this.$set(this.attr.productSelect, "cart_num", 1);
  590. this.$set(this, "attrValue", res);
  591. } else if (productSelect && productSelect.stock == 0) {
  592. this.$set(this.attr.productSelect, "image", productSelect.image);
  593. this.$set(this.attr.productSelect, "price", productSelect.price);
  594. this.$set(this.attr.productSelect, "stock", 0);
  595. this.$set(this.attr.productSelect, "unique", "");
  596. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  597. this.$set(this.attr.productSelect, "cart_num", 0);
  598. this.$set(this, "attrValue", "");
  599. } else {
  600. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  601. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  602. this.$set(this.attr.productSelect, "stock", 0);
  603. this.$set(this.attr.productSelect, "unique", "");
  604. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  605. this.$set(this.attr.productSelect, "cart_num", 0);
  606. this.$set(this, "attrValue", "");
  607. }
  608. },
  609. /**
  610. * 购物车数量加和数量减
  611. *
  612. */
  613. ChangeCartNum: function(changeValue) {
  614. //changeValue:是否 加|减
  615. //获取当前变动属性
  616. let productSelect = this.productValue[this.attrValue];
  617. //如果没有属性,赋值给商品默认库存
  618. if (productSelect === undefined && !this.attr.productAttr.length) productSelect = this.attr
  619. .productSelect;
  620. //无属性值即库存为0;不存在加减;
  621. if (productSelect === undefined) return;
  622. let stock = productSelect.stock || 0;
  623. let num = this.attr.productSelect;
  624. if (changeValue) {
  625. num.cart_num++;
  626. if (num.cart_num > stock) {
  627. this.$set(this.attr.productSelect, 'cart_num', stock ? stock : 1);
  628. this.$set(this, 'cart_num', stock ? stock : 1);
  629. }
  630. } else {
  631. num.cart_num--;
  632. if (num.cart_num < 1) {
  633. this.$set(this.attr.productSelect, 'cart_num', 1);
  634. this.$set(this, 'cart_num', 1);
  635. }
  636. }
  637. },
  638. moreNav() {
  639. this.currentPage = !this.currentPage
  640. },
  641. // 品牌列表
  642. getBrand() {
  643. brand(this.where).then(res => {
  644. this.brandList = res.data
  645. }).catch(err => {
  646. return this.$util.Tips({
  647. title: err.msg
  648. });
  649. })
  650. },
  651. //打开品牌弹窗
  652. set_brand() {
  653. this.brandtip = true
  654. this.currentPage = false
  655. },
  656. //关闭品牌/新品弹窗
  657. closeBrand() {
  658. this.brandtip = false
  659. },
  660. // 品牌选择
  661. seletBrand(id) {
  662. if (this.brandArray.indexOf(id) == -1) {
  663. this.brandArray.push(id)
  664. } else {
  665. this.brandArray.splice(this.brandArray.indexOf(id), 1)
  666. }
  667. },
  668. brandReset() {
  669. this.brandArray = []
  670. this.brandOk();
  671. },
  672. brandOk() {
  673. this.brandtip = false;
  674. this.loadend = false;
  675. this.$set(this.where, 'page', 1);
  676. this.get_product_list(true);
  677. },
  678. // 去详情页
  679. godDetail(item) {
  680. this.currentPage = false
  681. if (this.promotions_type) {
  682. uni.navigateTo({
  683. url: `/pages/goods_details/index?id=${item.id}`
  684. })
  685. } else {
  686. goShopDetail(item, this.uid).then(res => {
  687. uni.navigateTo({
  688. url: `/pages/goods_details/index?id=${item.id}`
  689. })
  690. })
  691. }
  692. },
  693. Changswitch: function() {
  694. let that = this;
  695. this.currentPage = false
  696. that.is_switch = !that.is_switch
  697. },
  698. searchSubmit: function(e) {
  699. let that = this;
  700. this.currentPage = false
  701. that.$set(that.where, 'keyword', e.detail.value);
  702. that.loadend = false;
  703. that.$set(that.where, 'page', 1)
  704. this.get_product_list(true);
  705. },
  706. /**
  707. * 获取我的推荐
  708. */
  709. get_host_product: function() {
  710. let that = this;
  711. if (that.hotScroll) return
  712. getProductHot(
  713. that.hotPage,
  714. that.hotLimit,
  715. ).then(res => {
  716. that.hotPage++
  717. that.hotScroll = res.data.length < that.hotLimit
  718. that.hostProduct = that.hostProduct.concat(res.data)
  719. // that.$set(that, 'hostProduct', res.data)
  720. });
  721. },
  722. //点击事件处理
  723. set_where: function(e) {
  724. this.currentPage = false
  725. switch (e) {
  726. case 1:
  727. // #ifdef H5
  728. return history.back();
  729. // #endif
  730. // #ifndef H5
  731. return uni.navigateBack({
  732. delta: 1,
  733. })
  734. // #endif
  735. break;
  736. case 2:
  737. if (this.price == 0) this.price = 1;
  738. else if (this.price == 1) this.price = 2;
  739. else if (this.price == 2) this.price = 0;
  740. this.stock = 0;
  741. break;
  742. case 3:
  743. if (this.stock == 0) this.stock = 1;
  744. else if (this.stock == 1) this.stock = 2;
  745. else if (this.stock == 2) this.stock = 0;
  746. this.price = 0
  747. break;
  748. case 4:
  749. this.nows = !this.nows;
  750. break;
  751. }
  752. this.loadend = false;
  753. this.$set(this.where, 'page', 1);
  754. this.get_product_list(true);
  755. },
  756. //设置where条件
  757. setWhere: function() {
  758. if (this.price == 0) this.where.priceOrder = '';
  759. else if (this.price == 1) this.where.priceOrder = 'asc';
  760. else if (this.price == 2) this.where.priceOrder = 'desc';
  761. if (this.stock == 0) this.where.salesOrder = '';
  762. else if (this.stock == 1) this.where.salesOrder = 'asc';
  763. else if (this.stock == 2) this.where.salesOrder = 'desc';
  764. this.where.news = this.nows ? 1 : 0;
  765. },
  766. //查找产品
  767. get_product_list: function(isPage) {
  768. let that = this;
  769. that.setWhere();
  770. if (that.loadend) return;
  771. if (that.loading) return;
  772. if (isPage === true) {
  773. if (this.is_switch) {
  774. that.$refs.waterfallsFlow.refresh();
  775. }
  776. that.$set(that, 'productList', []);
  777. }
  778. that.loading = true;
  779. that.loadTitle = '';
  780. that.$set(that.where, 'brand_id', that.brandArray.join(","));
  781. getProductslist(that.where).then(res => {
  782. let list = res.data;
  783. let productList = that.$util.SplitArray(list, that.productList);
  784. let loadend = list.length < that.where.limit;
  785. that.loadend = loadend;
  786. that.loading = false;
  787. that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
  788. that.$set(that, 'productList', productList);
  789. that.$set(that.where, 'page', that.where.page + 1);
  790. if (!that.productList.length) this.get_host_product();
  791. }).catch(err => {
  792. that.loading = false;
  793. that.loadTitle = '加载更多';
  794. });
  795. },
  796. },
  797. onPullDownRefresh() {
  798. },
  799. onPageScroll(e) {
  800. this.currentPage = false
  801. },
  802. onReachBottom() {
  803. if (this.productList.length > 0) {
  804. this.get_product_list();
  805. } else {
  806. this.get_host_product();
  807. }
  808. }
  809. }
  810. </script>
  811. <style scoped lang="scss">
  812. .productList{
  813. .header{
  814. position: fixed;
  815. top:0;
  816. left:0;
  817. width: 100%;
  818. z-index: 9;
  819. background-color: var(--view-theme);
  820. .bnt{
  821. background: rgba(0, 0, 0, 0.2);
  822. border-radius: 50rpx;
  823. border: 0.5px solid rgba(255, 255, 255, 0.3);
  824. position: fixed;
  825. left:10px;
  826. color: #fff;
  827. .iconfont{
  828. width: 48%;
  829. text-align: center;
  830. }
  831. .lines{
  832. width: 1rpx;
  833. height: 34rpx;
  834. background-color: rgba(225, 225, 225, 0.2);
  835. }
  836. }
  837. .title{
  838. font-size: 34rpx;
  839. color: #fff;
  840. }
  841. }
  842. }
  843. .height-add {
  844. height: 100rpx;
  845. height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  846. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  847. width: 100%;
  848. }
  849. .home {
  850. color: #333;
  851. width: 56rpx;
  852. height: 56rpx;
  853. background: rgba(255, 255, 255, 1);
  854. border: 1px solid rgba(0, 0, 0, 0.1);
  855. border-radius: 40rpx;
  856. font-size: 33rpx;
  857. &.on {
  858. background: unset;
  859. color: #333;
  860. }
  861. &.homeIndex {
  862. width: 98rpx;
  863. }
  864. }
  865. .home .iconfont {
  866. width: 60rpx;
  867. text-align: center;
  868. font-size: 28rpx;
  869. font-weight: bold;
  870. }
  871. .home .line {
  872. width: 1rpx;
  873. height: 34rpx;
  874. background: #B3B3B3;
  875. }
  876. .home .icon-xiangzuo {
  877. font-size: 28rpx;
  878. }
  879. .clored {
  880. color: var(--view-theme);
  881. font-weight: 600;
  882. .icon-gou {
  883. font-weight: 400 !important;
  884. }
  885. }
  886. .selectbrand {
  887. position: fixed;
  888. background-color: #FFFFFF;
  889. z-index: 8;
  890. width: 100%;
  891. top: 170rpx;
  892. left: 0;
  893. max-height: 860rpx;
  894. overflow: hidden;
  895. overflow-y: auto;
  896. border-radius: 0 0 24rpx 24rpx;
  897. transform: translate3d(0, -100%, 0);
  898. transition: all .2s cubic-bezier(.9, .5, .5, .25);
  899. // padding-top: 200rpx;
  900. // padding-top: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  901. // padding-top: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  902. .box {
  903. .selet {
  904. display: flex;
  905. flex-wrap: wrap;
  906. padding: 20rpx 20rpx 0 20rpx;
  907. max-height: 520rpx;
  908. overflow-x: hidden;
  909. overflow-y: auto;
  910. .seletbox {
  911. width: 216rpx;
  912. height: 68rpx;
  913. border-radius: 34rpx;
  914. background-color: #F5F5F5;
  915. margin-bottom: 30rpx;
  916. text-align: center;
  917. font-size: 24rpx;
  918. margin-right: 28rpx;
  919. &:nth-child(3n) {
  920. margin-right: 0;
  921. }
  922. }
  923. .seleton {
  924. border: 1px solid var(--view-theme);
  925. background: var(--view-minorColorT);
  926. color: var(--view-theme);
  927. }
  928. }
  929. .btn {
  930. display: flex;
  931. justify-content: space-between;
  932. text-align: center;
  933. padding: 30rpx 20rpx 40rpx;
  934. .sambox {
  935. width: 328rpx;
  936. height: 64rpx;
  937. border-radius: 38rpx;
  938. border: 2rpx solid var(--view-theme);
  939. color: #FFFFFF;
  940. line-height: 64rpx;
  941. }
  942. .reset {
  943. color: var(--view-theme);
  944. }
  945. .ok {
  946. background: var(--view-theme);
  947. }
  948. }
  949. .tlebox {
  950. width: 100%;
  951. height: 88rpx;
  952. line-height: 88rpx;
  953. display: flex;
  954. justify-content: space-between;
  955. padding: 0 40rpx 0 36rpx;
  956. margin-left: 20rpx;
  957. border-bottom: 2rpx solid #EEEEEE;
  958. }
  959. .tlebox:last-child {
  960. border-bottom: 0;
  961. }
  962. }
  963. }
  964. .selectbrand.on {
  965. transform: translate3d(0, 0, 0);
  966. }
  967. .productList .searchMp{
  968. padding-left: 23rpx;
  969. padding-right: 5rpx;
  970. margin-top: 7px;
  971. }
  972. .productList .searchMp .icon-pailie,
  973. .productList .searchMp .icon-tupianpailie{
  974. color: #fff;
  975. width: 62rpx;
  976. font-size: 40rpx;
  977. height: 33px;
  978. line-height: 33px;
  979. }
  980. .productList .searchMp .input{
  981. width: 636rpx;
  982. height: 30px;
  983. background-color: #fff;
  984. border-radius: 30rpx;
  985. padding: 0 20rpx;
  986. box-sizing: border-box;
  987. &.on{
  988. width: 704rpx;
  989. input{
  990. width: 619rpx;
  991. }
  992. }
  993. input{
  994. width: 550rpx;
  995. height: 100%;
  996. font-size: 26rpx;
  997. }
  998. .placeholder{
  999. color: #ccc;
  1000. }
  1001. .iconfont{
  1002. color: #ccc;
  1003. font-size: 35rpx;
  1004. }
  1005. }
  1006. .productList .search {
  1007. width: 100%;
  1008. height: 86rpx;
  1009. padding-left: 23rpx;
  1010. box-sizing: border-box;
  1011. position: fixed;
  1012. left: 0;
  1013. top: 0;
  1014. z-index: 9;
  1015. .fanhui {
  1016. color: #fff;
  1017. }
  1018. }
  1019. .productList .search .input {
  1020. width: 638rpx;
  1021. height: 60rpx;
  1022. background-color: #fff;
  1023. border-radius: 50rpx;
  1024. padding: 0 20rpx;
  1025. box-sizing: border-box;
  1026. &.on {
  1027. width: 652rpx;
  1028. margin-right: 30rpx;
  1029. input {
  1030. width: 560rpx;
  1031. }
  1032. }
  1033. }
  1034. .productList .search .input input {
  1035. width: 546rpx;
  1036. height: 100%;
  1037. font-size: 26rpx;
  1038. }
  1039. .productList .search .input .placeholder {
  1040. color: #999;
  1041. }
  1042. .productList .search .input .iconfont {
  1043. font-size: 35rpx;
  1044. color: #555;
  1045. }
  1046. .productList .search .icon-pailie,
  1047. .productList .search .icon-tupianpailie {
  1048. color: #fff;
  1049. width: 62rpx;
  1050. font-size: 40rpx;
  1051. height: 86rpx;
  1052. line-height: 86rpx;
  1053. }
  1054. .productList .nav {
  1055. /* #ifdef H5 */
  1056. height: 86rpx;
  1057. /* #endif */
  1058. /* #ifndef H5 */
  1059. height: 45px;
  1060. /* #endif */
  1061. color: #454545;
  1062. position: fixed;
  1063. left: 0;
  1064. width: 100%;
  1065. font-size: 28rpx;
  1066. background-color: #fff;
  1067. margin-top: 86rpx;
  1068. top: 0;
  1069. z-index: 9;
  1070. }
  1071. .productList .nav .item {
  1072. width: 25%;
  1073. text-align: center;
  1074. }
  1075. .productList .nav .item.font-color {
  1076. font-weight: bold;
  1077. }
  1078. .productList .nav .item image {
  1079. width: 15rpx;
  1080. height: 19rpx;
  1081. margin-left: 10rpx;
  1082. }
  1083. .productList .list {
  1084. padding: 0 20rpx;
  1085. margin-top: 172rpx;
  1086. }
  1087. .productList .list.waterList {
  1088. margin-top: 192rpx;
  1089. }
  1090. .productList .list.on {
  1091. background-color: #fff;
  1092. border-top: 1px solid #f6f6f6;
  1093. .title {
  1094. font-size: 22rpx;
  1095. color: #333333;
  1096. margin-top: 30rpx;
  1097. .label {
  1098. border-radius: 4rpx;
  1099. padding: 2rpx 8rpx;
  1100. background-color: var(--view-minorColorT);
  1101. font-size: 20rpx;
  1102. color: var(--view-theme);
  1103. margin-right: 8rpx;
  1104. }
  1105. }
  1106. .footer {
  1107. width: 100%;
  1108. height: 96rpx;
  1109. background-color: #fff;
  1110. position: fixed;
  1111. bottom: 0;
  1112. left: 0;
  1113. box-shadow: 0 -4rpx 32rpx 0 rgba(0, 0, 0, 0.08);
  1114. padding: 0 20rpx 0 32rpx;
  1115. z-index: 9;
  1116. box-sizing: border-box;
  1117. padding-bottom: calc(constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/;
  1118. padding-bottom: calc(env(safe-area-inset-bottom)); ///兼容 IOS<11.2/;
  1119. height: calc(96rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1120. height: calc(96rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1121. .right {
  1122. color: #888888;
  1123. font-size: 20rpx;
  1124. margin-left: 32rpx;
  1125. .num {
  1126. font-size: 28rpx;
  1127. color: #333333;
  1128. font-weight: 400;
  1129. .money {
  1130. font-weight: 500;
  1131. }
  1132. }
  1133. }
  1134. .icon {
  1135. width: 72rpx;
  1136. height: 72rpx;
  1137. background: #F5F5F5;
  1138. border-radius: 50%;
  1139. text-align: center;
  1140. line-height: 72rpx;
  1141. position: relative;
  1142. .iconfont {
  1143. font-size: 38rpx;
  1144. }
  1145. .num {
  1146. min-width: 32rpx;
  1147. background-color: #fff;
  1148. color: var(--view-theme);
  1149. border-radius: 15px;
  1150. position: absolute;
  1151. right: -14rpx;
  1152. top: 0;
  1153. font-size: 10px;
  1154. padding: 0 8rpx;
  1155. height: 34rpx;
  1156. line-height: 31rpx;
  1157. border: 1px solid var(--view-theme);
  1158. }
  1159. }
  1160. .bnt {
  1161. width: 192rpx;
  1162. height: 64rpx;
  1163. background: var(--view-theme);
  1164. border-radius: 40rpx;
  1165. color: #FFFFFF;
  1166. font-size: 28rpx;
  1167. text-align: center;
  1168. line-height: 64rpx;
  1169. }
  1170. }
  1171. }
  1172. .productList .list .item {
  1173. width: 345rpx;
  1174. margin-top: 20rpx;
  1175. background-color: #fff;
  1176. border-radius: 20rpx;
  1177. .text {
  1178. &.on {
  1179. .nameCon {
  1180. height: 136rpx;
  1181. }
  1182. .name {
  1183. margin-bottom: 4rpx;
  1184. }
  1185. .label {
  1186. font-size: 20rpx;
  1187. color: var(--view-theme);
  1188. border-radius: 4rpx;
  1189. border: 1px solid var(--view-theme);
  1190. /* #ifdef APP */
  1191. padding: 2rpx 6rpx 0rpx 6rpx;
  1192. /* #endif */
  1193. /* #ifndef APP */
  1194. padding: 0 6rpx;
  1195. /* #endif */
  1196. margin-right: 10rpx;
  1197. }
  1198. .sales {
  1199. color: #999999;
  1200. font-size: 22rpx;
  1201. margin-top: 10rpx;
  1202. .score {
  1203. margin-left: 24rpx;
  1204. }
  1205. .icon {
  1206. width: 48rpx;
  1207. height: 48rpx;
  1208. border-radius: 50%;
  1209. border: 1px solid var(--view-theme);
  1210. font-size: 20rpx;
  1211. color: var(--view-theme);
  1212. }
  1213. }
  1214. }
  1215. }
  1216. }
  1217. .productList .list .item.on {
  1218. width: 100%;
  1219. display: flex;
  1220. margin: 30rpx 0 0 0;
  1221. }
  1222. .productList .list .item .pictrue {
  1223. position: relative;
  1224. width: 100%;
  1225. height: 345rpx;
  1226. }
  1227. .productList .list .item .pictrue.on {
  1228. width: 240rpx;
  1229. height: 240rpx;
  1230. position: relative;
  1231. .activityFrame{
  1232. border-radius: 12rpx;
  1233. }
  1234. .masks {
  1235. position: absolute;
  1236. top: 0;
  1237. left: 0;
  1238. right: 0;
  1239. bottom: 0;
  1240. background: rgba(0, 0, 0, 0.2);
  1241. border-radius: 10rpx;
  1242. .bg {
  1243. width: 110rpx;
  1244. height: 110rpx;
  1245. background: #000000;
  1246. opacity: 0.6;
  1247. color: #fff;
  1248. font-size: 22rpx;
  1249. border-radius: 50%;
  1250. padding: 22rpx 0;
  1251. text-align: center;
  1252. }
  1253. }
  1254. }
  1255. .productList .list .item .pictrue image {
  1256. width: 100%;
  1257. height: 100%;
  1258. border-radius: 20rpx 20rpx 0 0;
  1259. }
  1260. .productList .list .item .pictrue image.on {
  1261. border-radius: 12rpx;
  1262. }
  1263. .productList .list .item .text {
  1264. padding: 20rpx 17rpx 26rpx 17rpx;
  1265. font-size: 30rpx;
  1266. color: #222;
  1267. }
  1268. .productList .list .item .text.on {
  1269. width: 460rpx;
  1270. padding: 0 0 0 22rpx;
  1271. }
  1272. .productList .list .item .text .money {
  1273. font-size: 26rpx;
  1274. font-weight: bold;
  1275. margin-top: 8rpx;
  1276. }
  1277. .productList .list .item .text .money.on {
  1278. margin-top: 0;
  1279. margin-right: 5rpx;
  1280. }
  1281. .productList .list .item .text .money .num {
  1282. font-size: 34rpx;
  1283. }
  1284. .productList .list .item .text .vip {
  1285. font-size: 22rpx;
  1286. color: #aaa;
  1287. margin-top: 7rpx;
  1288. }
  1289. .productList .list .item .text .vip.on {
  1290. margin-top: 12rpx;
  1291. }
  1292. .productList .list .item .text .vip .vip-money {
  1293. font-size: 24rpx;
  1294. color: #282828;
  1295. font-weight: 600;
  1296. }
  1297. .productList .list .vip .vip-money .icon {
  1298. font-size: 15rpx;
  1299. background: #FF9500;
  1300. color: #fff;
  1301. border-radius: 18rpx;
  1302. padding: 1rpx 6rpx;
  1303. margin-left: 10rpx;
  1304. min-width: 60rpx;
  1305. .iconfont {
  1306. font-size: 15rpx;
  1307. margin-right: 5rpx;
  1308. }
  1309. &.on {
  1310. background: #333;
  1311. color: #FDDAA4;
  1312. min-width: unset;
  1313. }
  1314. }
  1315. .productList .list .item .text .vip .vip-money image {
  1316. width: 46rpx;
  1317. height: 21rpx;
  1318. margin-left: 4rpx;
  1319. }
  1320. .noCommodity {
  1321. background-color: #fff;
  1322. padding-bottom: 30rpx;
  1323. .emptyBox{
  1324. text-align: center;
  1325. .tips{
  1326. color: #aaa;
  1327. font-size: 26rpx;
  1328. }
  1329. image {
  1330. width: 414rpx;
  1331. height: 304rpx;
  1332. }
  1333. }
  1334. }
  1335. .waterfalls {
  1336. padding: 10rpx 16rpx 16rpx 16rpx;
  1337. color: #222;
  1338. .name {
  1339. font-size: 28rpx;
  1340. }
  1341. .label {
  1342. font-size: 20rpx;
  1343. color: var(--view-theme);
  1344. border-radius: 4rpx;
  1345. border: 1px solid var(--view-theme);
  1346. padding: 0 6rpx;
  1347. display: inline-block;
  1348. margin-top: 10rpx;
  1349. margin-right: 10rpx;
  1350. }
  1351. .money {
  1352. font-size: 26rpx;
  1353. font-weight: 700;
  1354. .num {
  1355. font-size: 34rpx;
  1356. }
  1357. .nums {
  1358. font-size: 28rpx;
  1359. }
  1360. }
  1361. .vip {
  1362. font-size: 22rpx;
  1363. color: #aaa;
  1364. margin-top: 6rpx;
  1365. .vip-money {
  1366. font-size: 24rpx;
  1367. color: #282828;
  1368. font-weight: bold;
  1369. image {
  1370. width: 46rpx;
  1371. height: 21rpx;
  1372. margin-left: 4rpx;
  1373. }
  1374. }
  1375. }
  1376. }
  1377. </style>