store_cate1.vue 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794
  1. <template>
  2. <!-- 商品分类第三种布局样式 -->
  3. <view class="goodCate">
  4. <!-- #ifdef MP || APP-PLUS -->
  5. <view class="mp-header">
  6. <view class="sys-head" :style="{ height: sysHeight }"></view>
  7. <view class="serch-box" style="height: 43px;">
  8. <view class="serch-wrapper acea-row row-middle">
  9. <button v-if="info.store_splicing_switch" class="group-button" hover-class="none" @tap="onCollage">
  10. <text class="iconfont icon-pindan"></text>拼单
  11. </button>
  12. <navigator url="/pages/goods/goods_search/index" class="input acea-row row-center-wrapper" hover-class="none">
  13. <text class="iconfont icon-xiazai5"></text>
  14. 搜索商品信息
  15. </navigator>
  16. </view>
  17. </view>
  18. <!-- 门店地址详情 -->
  19. <view class="store-address">
  20. <view class="address acea-row row-middle" @click="goMap()">
  21. <view class="name line1">{{info.name || '暂无门店'}}</view>
  22. <text class="iconfont icon-xiangyou" />
  23. </view>
  24. <view class="distance">
  25. 门店距您{{info.range||0}}km
  26. </view>
  27. <view class="time">
  28. 营业时间:{{info.day_time || '-'}}
  29. </view>
  30. <view class="switch acea-row row-between-wrapper">
  31. <view class="title" :class="{'on': switchNum == item.key,'onLeft':switchNum != 1 && switchNum == item.key}"
  32. v-for="(item, index) in deliveryList" :key="item.key" @click="swithFn(item.key)">{{item.name}}</view>
  33. </view>
  34. </view>
  35. <!-- 门店详情 -->
  36. </view>
  37. <!-- #endif -->
  38. <!-- #ifdef H5 -->
  39. <view class="header acea-row row-center-wrapper">
  40. <view class="search-box acea-row row-middle">
  41. <button v-if="isSplicingPlatform && info.store_splicing_switch" class="group-button" hover-class="none" @tap="onCollage">
  42. <text class="iconfont icon-pindan"></text>拼单
  43. </button>
  44. <navigator url="/pages/goods/goods_search/index" class="search acea-row row-middle" hover-class="none">
  45. <text class="iconfont icon-sousuo5"></text>
  46. 搜索商品信息
  47. </navigator>
  48. </view>
  49. <view class="store-address">
  50. <view class="address acea-row row-middle" @click="goMap()">
  51. <view class="name line1">{{info.name || '暂无门店'}}</view>
  52. <text class="iconfont icon-xiangyou" />
  53. </view>
  54. <view class="distance">
  55. 门店距您{{info.range||0}}km
  56. </view>
  57. <view class="time">
  58. 营业时间:{{info.day_time || '-'}}
  59. </view>
  60. <view class="switch acea-row row-between-wrapper">
  61. <view class="title" :class="{'on': switchNum == item.key,'onLeft':switchNum != 1}"
  62. v-for="(item, index) in deliveryList" :key="item.key" @click="swithFn(item.key)">{{item.name}}</view>
  63. </view>
  64. </view>
  65. </view>
  66. <view class="conter">
  67. <!-- #endif -->
  68. <!-- #ifndef H5 -->
  69. <view class="conter" :style="'padding-top:'+marTop+'px'">
  70. <!-- #endif -->
  71. <!-- #ifndef H5 -->
  72. <view class='aside' :style="'top:'+marTop+'px'">
  73. <!-- #endif -->
  74. <!-- #ifdef H5 -->
  75. <view class='aside'>
  76. <!-- #endif -->
  77. <view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
  78. v-for="(item,index) in categoryList" :key="index" @click="tapNav(index,item)">
  79. <text>{{item.cate_name}}</text>
  80. </view>
  81. </view>
  82. <view class="wrapper">
  83. <view class="bgcolor" v-if="iSlong">
  84. <!-- #ifndef H5 -->
  85. <view class="longTab acea-row row-middle" :style="'top:'+marTop+'px'">
  86. <!-- #endif -->
  87. <!-- #ifdef H5 -->
  88. <view class="longTab acea-row row-middle">
  89. <!-- #endif -->
  90. <scroll-view scroll-x="true" style="white-space: nowrap; display: flex;height:44rpx;"
  91. scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
  92. <view class="longItem" :style='"width:"+isWidth+"px"' :class="index===tabClick?'click':''"
  93. v-for="(item,index) in categoryErList" :key="index" @click="longClick(index)">
  94. {{item.cate_name}}
  95. </view>
  96. </scroll-view>
  97. </view>
  98. <!-- #ifndef H5 -->
  99. <view class="openList" :style="'top:'+marTop+'px'" @click="openTap"><text
  100. class="iconfont icon-xiangxia"></text></view>
  101. <!-- #endif -->
  102. <!-- #ifdef H5 -->
  103. <view class="openList" @click="openTap"><text class="iconfont icon-xiangxia"></text></view>
  104. <!-- #endif -->
  105. </view>
  106. <view v-else>
  107. <!-- #ifndef H5 -->
  108. <view class="downTab" :style="'margin-top:'+marTop+'px'">
  109. <!-- #endif -->
  110. <!-- #ifdef H5 -->
  111. <view class="downTab">
  112. <!-- #endif -->
  113. <view class="title acea-row row-between-wrapper">
  114. <view>{{categoryTitle}}</view>
  115. <view class="closeList" @click="closeTap"><text class="iconfont icon-xiangxia"></text>
  116. </view>
  117. </view>
  118. <view class="children">
  119. <view class="acea-row row-middle">
  120. <view class="item line1" :class="index===tabClick?'click':''"
  121. v-for="(item,index) in categoryErList" :key="index" @click="longClick(index)">
  122. {{item.cate_name}}
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. <view class="mask" @click="closeTap"></view>
  128. </view>
  129. <!--商品列表 -->
  130. <goodClass :tempArr="tempArr" :isLogin="isLogin" @gocartduo="goCartDuo" @gocartdan="goCartDan"
  131. @ChangeCartNumDan="ChangeCartNumDan" @detail="goDetail"></goodClass>
  132. <view class='loadingicon acea-row row-center-wrapper'>
  133. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  134. </view>
  135. </view>
  136. </view>
  137. <view class="footer acea-row row-between-wrapper" :class="isFooter?'':'on'">
  138. <view class="cartIcon acea-row row-center-wrapper" @click="getCartList(0)" v-if="cartNum>0">
  139. <!-- <view class="iconfont icon-gouwuche-yangshi2"></view> -->
  140. <!-- <text class="num">{{cartNum}}</text> -->
  141. <uni-badge class="uni-badge-left-margin" :text="cartNum" absolute="rightTop">
  142. <view class="iconfont icon-gouwuche-yangshi2"></view>
  143. </uni-badge>
  144. </view>
  145. <view class="cartIcon acea-row row-center-wrapper noCart" v-else>
  146. <view class="iconfont icon-gouwuche-yangshi2"></view>
  147. </view>
  148. <view class="acea-row row-middle" :class="cartNum>0?'':'noCart'">
  149. <view class="money"><text class="num">{{totalPrice}}</text></view>
  150. <view class="bnt" @click="subOrder">去结算</view>
  151. </view>
  152. </view>
  153. <!-- #ifdef H5 || MP -->
  154. <view v-if="isSplicingPlatform" :class="{ mask: collageVisible }" @tap="onCollageClose"></view>
  155. <view v-if="isSplicingPlatform" :class="{ 'dialog-footer': isFooter, active: collageVisible }" class="dialog">
  156. <view class="dialog-head">
  157. <view v-for="item in deliveryList" :key="item.key" :class="{ active: collageDelivery == item.key }" class="button" @tap="collageDeliveryChange(item.key)">
  158. <text :class="['iconfont', item.icon]"></text>{{ item.name }}
  159. </view>
  160. </view>
  161. <view class="dialog-body">
  162. <view class="">{{ collageDelivery == 1 ? '配送地址' : '自提门店' }}</view>
  163. <view class="dialog-body-main">
  164. <view class="dialog-body-main-inner">
  165. <view v-if="collageDelivery == 2 || collageAddress.id" class="dialog-body-left">
  166. <view class="dialog-body-name">
  167. {{ collageDelivery == 1 ? `${collageAddress.province}${collageAddress.city}${collageAddress.district}${collageAddress.detail}` : collageStore.name }}
  168. <text v-if="collageDelivery == 2" class="tag">距离{{ collageStore.range || 0 }}km</text>
  169. </view>
  170. <view class="dialog-body-info">
  171. <view v-if="collageDelivery == 2" class="item">
  172. <text class="iconfont icon-weizhi"></text>{{ collageStore.detailed_address }}
  173. </view>
  174. <view v-if="collageDelivery == 1" class="item">
  175. {{ collageAddress.real_name }} {{ collageAddress.phone }}
  176. </view>
  177. <view v-else class="item">
  178. <text class="iconfont icon-shijian"></text>营业时间:{{ collageStore.day_time || '-' }}
  179. </view>
  180. </view>
  181. </view>
  182. <view v-if="collageDelivery == 1 && !collageAddress.id" class="dialog-body-left">您还未选择配送地址,先去选择您的收货地址再下单吧~</view>
  183. <view v-if="collageDelivery == 2" class="dialog-body-right" @tap="showMaoLocation"><text class="iconfont icon-dingwei2"></text></view>
  184. </view>
  185. <view class="dialog-body-main-btn">
  186. <view v-if="collageDelivery == 1" class="" @tap="onAddress">{{ collageAddress.id ? '切换地址' : '选择地址' }}<text class="iconfont icon-xiangyou" /></view>
  187. <view v-if="collageDelivery == 2" class="" @tap="goMap(1)">切换门店<text class="iconfont icon-xiangyou" /></view>
  188. </view>
  189. </view>
  190. </view>
  191. <view class="dialog-foot">
  192. <button class="button" hover-class="none" @tap="onCollageClose">我再想想</button>
  193. <button class="button primary" hover-class="none" @tap="initCollage">发起拼单</button>
  194. </view>
  195. </view>
  196. <addressWindow v-if="isSplicingPlatform" ref="addressWindow" :isFooter='isFooter' :address="address" :pagesUrl="pagesUrl" @changeClose="onAddress" @OnChangeAddress="onAddressChange"></addressWindow>
  197. <!-- #endif -->
  198. <!-- 分类购物车下拉列表 -->
  199. <cartList :cartData="cartData" :isFooter='isFooter' @closeList="closeList" @ChangeCartNumDan="ChangeCartList"
  200. @ChangeSubDel="ChangeSubDel" @ChangeOneDel="ChangeOneDel"></cartList>
  201. <!-- 产品属性组件 -->
  202. <productWindow :isFooter="isFooter" :attr="attr" :isShow='1' :iSplus='1' :iScart='1' @myevent="onMyEvent"
  203. @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal" @iptCartNum="iptCartNum"
  204. @goCat="goCatNum" :is_vip="is_vip" id='product-window'></productWindow>
  205. <!-- #ifdef MP -->
  206. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  207. <!-- #endif -->
  208. </view>
  209. </template>
  210. <script>
  211. let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  212. import {
  213. vcartList,
  214. getCartCounts,
  215. cartDel
  216. } from '@/api/order.js';
  217. import {
  218. getCategoryList,
  219. getAttr,
  220. postCartNum,
  221. initCollage,
  222. hasCollage,
  223. isWithin,
  224. } from '@/api/store.js';
  225. import {
  226. getProducts,
  227. getCustomerList,
  228. getStoreCategory,
  229. getStoreBrand
  230. } from '@/api/new_store.js';
  231. import productWindow from '@/components/productWindow/index';
  232. import goodClass from '@/components/goodClass';
  233. import cartList from '@/components/cartList';
  234. // #ifdef H5 || MP
  235. import { getAddressDefault } from '@/api/user.js';
  236. import addressWindow from '@/components/addressWindow';
  237. // #endif
  238. import {
  239. mapState,
  240. mapGetters
  241. } from 'vuex';
  242. import {
  243. goShopDetail
  244. } from '@/libs/order.js';
  245. import {
  246. toLogin
  247. } from '@/libs/login.js';
  248. export default {
  249. computed: {
  250. ...mapState({
  251. cartNum: state => state.indexData.cartNum
  252. }),
  253. ...mapGetters(['isLogin', 'uid', 'cartNum'])
  254. },
  255. components: {
  256. productWindow,
  257. goodClass,
  258. cartList,
  259. // #ifdef H5 || MP
  260. addressWindow
  261. // #endif
  262. },
  263. props: {
  264. isFooter: {
  265. type: Boolean,
  266. default: false
  267. },
  268. info: {
  269. type: Object,
  270. default: {}
  271. },
  272. },
  273. data() {
  274. return {
  275. // deliveryList:[
  276. // {name:'配送',key:1},
  277. // {name:'自提',key:2}
  278. // ],
  279. deliveryList:[
  280. {name:'自提',key:2,icon:'icon-ziti'},
  281. {name:'配送',key:1,icon:'icon-peisong1'},
  282. ],
  283. marTop: 0,
  284. switchNum: 1,
  285. sysHeight: sysHeight,
  286. categoryList: [],
  287. navActive: 0,
  288. categoryTitle: '',
  289. categoryErList: [],
  290. tabLeft: 0,
  291. isWidth: 0, //每个导航栏占位
  292. tabClick: 0, //导航栏被点击
  293. iSlong: true,
  294. tempArr: [],
  295. loading: false,
  296. loadend: false,
  297. loadTitle: '加载更多',
  298. page: 1,
  299. limit: 10,
  300. cid: 0, //一级分类
  301. sid: 0, //二级分类
  302. delivery_type:3, // 配送方式
  303. isAuto: false, //没有授权的不会自动授权
  304. isShowAuth: false, //是否隐藏授权
  305. attr: {
  306. cartAttr: false,
  307. productAttr: [],
  308. productSelect: {}
  309. },
  310. productValue: [],
  311. attrValue: '', //已选属性
  312. storeName: '', //多属性产品名称
  313. id: 0,
  314. cartData: {
  315. cartList: [],
  316. iScart: false
  317. },
  318. totalPrice: 0.00,
  319. lengthCart: 0,
  320. is_vip: 0, //是否是会员
  321. cart_num: 0,
  322. storeInfo: {},
  323. // #ifdef H5 || MP
  324. collageVisible: false,
  325. collageDelivery: 2,
  326. address: {
  327. address: false,
  328. }, //地址组件
  329. pagesUrl: '',
  330. collageStore: this.info,
  331. collageAddress: {},
  332. isSplicingPlatform: true,
  333. // #endif
  334. }
  335. },
  336. watch: {
  337. // #ifdef H5 || MP
  338. collageDelivery() {
  339. this.collageStore = this.info;
  340. }
  341. // #endif
  342. },
  343. mounted() {
  344. let that = this;
  345. // that.swithFn(that.info.default_delivery);
  346. // 获取设备宽度
  347. uni.getSystemInfo({
  348. success(e) {
  349. that.isWidth = e.windowWidth / 5
  350. }
  351. });
  352. uni.$on('newAttrNum',(data)=>{
  353. if(data.length){
  354. this.tempArr.forEach((item)=>{
  355. data.forEach(j=>{
  356. if(item.id == j.id){
  357. item.cart_num = j.num
  358. }
  359. })
  360. })
  361. this.getCartList(1);
  362. }
  363. })
  364. uni.$on('newCartNum',(data)=>{
  365. if(data.length){
  366. this.tempArr.forEach((item)=>{
  367. data.forEach(j=>{
  368. if(item.id == j.product_id){
  369. item.cart_num = 0
  370. }
  371. })
  372. })
  373. this.getCartList(1);
  374. }
  375. })
  376. // #ifdef H5
  377. this.isSplicingPlatform = this.$wechat.isWeixin();
  378. // #endif
  379. // #ifdef H5 || MP
  380. if (this.isSplicingPlatform && this.info.store_splicing_switch) {
  381. this.collageDelivery = this.info.is_store ? 2 : 1;
  382. uni.$on('activeFn', data => {
  383. this.collageStore = data;
  384. });
  385. uni.$on('addressChange', data => {
  386. this.collageAddress = data;
  387. this.address.addressId = data.id;
  388. });
  389. }
  390. // #endif
  391. },
  392. methods: {
  393. // #ifdef H5 || MP
  394. showMaoLocation() {
  395. let data = {
  396. latitude: Number(this.collageStore.latitude),
  397. longitude: Number(this.collageStore.longitude),
  398. name: this.collageStore.name,
  399. address: `${this.collageStore.address}-${this.collageStore.detailed_address}`,
  400. };
  401. // #ifdef H5
  402. if (this.$wechat.isWeixin()) {
  403. data.scale = 13;
  404. return this.$wechat.seeLocation(data);
  405. }
  406. // #endif
  407. uni.openLocation(data);
  408. },
  409. // 用户默认地址
  410. getAddressDefault() {
  411. getAddressDefault().then(res => {
  412. const data = res.data;
  413. if (Array.isArray(data)) {
  414. return;
  415. }
  416. this.onAddressChange(data.id, data, true);
  417. });
  418. },
  419. // 点击拼单
  420. onCollage() {
  421. if (!this.isLogin) {
  422. return toLogin();
  423. }
  424. hasCollage().then(res => {
  425. const collageId = res.data.collageId;
  426. if (collageId) {
  427. uni.navigateTo({
  428. url: `/pages/store/group_buy/index?collage_id=${collageId}`
  429. });
  430. } else{
  431. this.getAddressDefault();
  432. this.$refs.addressWindow.getAddressList();
  433. this.collageVisible = true;
  434. }
  435. });
  436. },
  437. // 发起拼单
  438. initCollage() {
  439. let data = {
  440. store_id: this.collageStore.id,
  441. address_id: this.collageAddress.id || 0,
  442. shipping_type: this.collageDelivery == 1 ? 3 : 2
  443. };
  444. initCollage(data).then(res => {
  445. this.collageVisible = false;
  446. uni.navigateTo({
  447. url: `/pages/store/group_buy/index?collage_id=${res.data.collageId}`
  448. });
  449. }).catch(err => {
  450. this.$util.Tips({
  451. title: err
  452. });
  453. });
  454. },
  455. // 选择配送地址
  456. onAddressChange(id, data, isInit) {
  457. isWithin({
  458. store_id: this.collageStore.id,
  459. address_id: id
  460. }).then(() => {
  461. if (!isInit) {
  462. this.onAddress();
  463. }
  464. this.collageAddress = data;
  465. this.address.addressId = data;
  466. }).catch(() => {
  467. if (!isInit) {
  468. this.$util.Tips({
  469. title: '您选择的地址超出门店配送范围,请重新选择'
  470. });
  471. }
  472. });
  473. },
  474. onCollageClose() {
  475. this.collageVisible = false;
  476. },
  477. // 选择自提、配送
  478. collageDeliveryChange(key) {
  479. if (key != 2 || this.info.is_store) {
  480. this.collageDelivery = key;
  481. }
  482. },
  483. // 切换地址
  484. onAddress() {
  485. this.address.address = !this.address.address;
  486. this.pagesUrl = '/pages/users/user_address_list/index?isCollage=1&store_id='+this.info.id
  487. this.$refs.addressWindow.getAddressList();
  488. },
  489. // #endif
  490. getNoCart(){
  491. if(this.cartNum<=0){
  492. this.tempArr.forEach((item)=>{
  493. item.cart_num = 0
  494. })
  495. this.totalPrice = 0;
  496. }
  497. },
  498. // 授权回调
  499. onLoadFun() {
  500. setTimeout(function(){
  501. this.isShowAuth = false;
  502. },10)
  503. },
  504. // 授权关闭
  505. authColse: function(e) {
  506. this.isShowAuth = e
  507. },
  508. updateFun(e) {
  509. if (e.cartNum) {
  510. this.tempArr.forEach((item) => {
  511. if (item.id == e.id) {
  512. item.cart_num = e.cartNum
  513. }
  514. })
  515. }
  516. },
  517. // 商品列表
  518. getProducts() {
  519. let that = this;
  520. if (that.loadend) return;
  521. if (that.loading) return;
  522. that.loading = true;
  523. getProducts({
  524. page: that.page,
  525. limit: that.limit,
  526. type: 1,
  527. cid: that.cid,
  528. sid: that.sid,
  529. store_id: that.info.id,
  530. delivery_type:that.delivery_type,
  531. }).then(res => {
  532. let list = res.data,
  533. loadend = list.length < that.limit;
  534. that.tempArr = that.$util.SplitArray(list, that.tempArr);
  535. that.$set(that, 'tempArr', that.tempArr);
  536. that.loading = false;
  537. that.loadend = loadend;
  538. that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
  539. that.page = that.page + 1;
  540. }).catch(err => {
  541. that.loading = false;
  542. that.loadTitle = '加载更多'
  543. });
  544. },
  545. // 切换自提方式
  546. swithFn(num) {
  547. this.switchNumFun(num);
  548. this.page = 1;
  549. this.loadend = false;
  550. this.tempArr = []
  551. this.getProducts()
  552. },
  553. switchNumFun(num){
  554. switch (num) {
  555. case 1:
  556. this.switchNum = 1
  557. this.delivery_type = '3'
  558. break;
  559. case 2:
  560. this.switchNum = 2
  561. this.delivery_type='2'
  562. break;
  563. }
  564. },
  565. // 跳转到门店列表
  566. goMap(val = 0) {
  567. uni.navigateTo({
  568. // url: "/pages/store/map/index?storeFrom=1&type=1&storeId="+(val ? this.collageStore.id : this.info.id)+'&isCollage='+val,
  569. url: `/pages/store/store_list/index?storeFrom=1&type=1&storeId=${val ? this.collageStore.id : this.info.id}&isCollage=${val}`,
  570. success(res) {
  571. console.log('成功啦', res);
  572. },
  573. fail(err) {
  574. console.log('失败啦', err);
  575. }
  576. })
  577. },
  578. getMarTop() {
  579. // #ifdef MP || APP-PLUS
  580. let that = this;
  581. setTimeout(() => {
  582. // 获取小程序头部高度
  583. let info = uni.createSelectorQuery().in(this).select(".mp-header");
  584. info.boundingClientRect(function(data) {
  585. that.marTop = data.height
  586. }).exec()
  587. }, 100)
  588. // #endif
  589. },
  590. // 生成订单;
  591. subOrder: function() {
  592. let that = this,
  593. list = that.cartData.cartList,
  594. ids = [];
  595. if (list.length) {
  596. list.forEach(item => {
  597. if(item.attrStatus && item.status){
  598. ids.push(item.id)
  599. }
  600. });
  601. uni.navigateTo({
  602. url: '/pages/goods/order_confirm/index?cartId=' + ids.join(',')+'&delivery_type='+that.delivery_type + '&store_id=' + that.info.id
  603. });
  604. that.cartData.iScart = false;
  605. } else {
  606. return that.$util.Tips({
  607. title: '请选择产品'
  608. });
  609. }
  610. },
  611. // 计算总价;
  612. getTotalPrice: function() {
  613. let that = this,
  614. list = that.cartData.cartList,
  615. totalPrice = 0.00;
  616. list.forEach(item => {
  617. if (item.attrStatus && item.status) {
  618. totalPrice = that.$util.$h.Add(totalPrice, that.$util.$h.Mul(item.cart_num, item
  619. .truePrice));
  620. }
  621. })
  622. // if(num){
  623. // data.forEach(item => {
  624. // totalPrice = that.$util.$h.Sub(totalPrice, that.$util.$h.Mul(item.cart_num, item.sum_price));
  625. // })
  626. // }
  627. that.$set(that, 'totalPrice', totalPrice);
  628. },
  629. ChangeSubDel: function(event) {
  630. let that = this,
  631. list = that.cartData.cartList,
  632. ids = [],
  633. storeId = uni.getStorageSync('user_store_id');
  634. list.forEach(item => {
  635. ids.push(item.id)
  636. });
  637. cartDel(ids.join(","),storeId).then(res => {
  638. that.$set(that.cartData, 'cartList', []);
  639. that.cartData.iScart = false;
  640. that.totalPrice = 0.00;
  641. that.page = 1;
  642. that.loadend = false;
  643. that.tempArr = [];
  644. that.getProducts();
  645. that.getCartNum();
  646. })
  647. },
  648. ChangeOneDel: function(id, index) {
  649. let that = this,
  650. list = that.cartData.cartList,
  651. storeId = uni.getStorageSync('user_store_id');
  652. cartDel(id.toString(),storeId).then(res => {
  653. list.splice(index, 1);
  654. if (!list.length) {
  655. that.cartData.iScart = false;
  656. that.page = 1;
  657. that.loadend = false;
  658. that.tempArr = [];
  659. that.getProducts();
  660. };
  661. that.getCartNum();
  662. })
  663. },
  664. getCartList(iSshow) {
  665. let that = this;
  666. let data = {
  667. store_id:that.info.id
  668. };
  669. vcartList(data).then(res => {
  670. that.$set(that.cartData, 'cartList', res.data);
  671. if (res.data.length) {
  672. that.$set(that.cartData, 'iScart', iSshow ? false : !that.cartData.iScart);
  673. } else {
  674. that.$set(that.cartData, 'iScart', false);
  675. }
  676. that.getTotalPrice();
  677. })
  678. },
  679. closeList(e) {
  680. this.$set(this.cartData, 'iScart', e);
  681. },
  682. getCartNum: function() {
  683. let that = this;
  684. getCartCounts(0,that.info.id).then(res => {
  685. this.$store.commit('indexData/setCartNum', res.data.count)
  686. });
  687. },
  688. onMyEvent: function() {
  689. this.$set(this.attr, 'cartAttr', false);
  690. },
  691. /**
  692. * 默认选中属性
  693. *
  694. */
  695. DefaultSelect: function() {
  696. let productAttr = this.attr.productAttr;
  697. let value = [];
  698. for (let key in this.productValue) {
  699. if (this.productValue[key].stock > 0) {
  700. value = this.attr.productAttr.length ? key.split(",") : [];
  701. break;
  702. }
  703. }
  704. for (let i = 0; i < productAttr.length; i++) {
  705. this.$set(productAttr[i], "index", value[i]);
  706. }
  707. //sort();排序函数:数字-英文-汉字;
  708. let productSelect = this.productValue[value.join(",")];
  709. if (productSelect && productAttr.length) {
  710. this.$set(
  711. this.attr.productSelect,
  712. "store_name",
  713. this.storeName
  714. );
  715. this.$set(this.attr.productSelect, "image", productSelect.image);
  716. this.$set(this.attr.productSelect, "price", productSelect.price);
  717. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  718. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  719. this.$set(this.attr.productSelect, "cart_num", 1);
  720. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  721. this.$set(this, "attrValue", value.join(","));
  722. } else if (!productSelect && productAttr.length) {
  723. this.$set(
  724. this.attr.productSelect,
  725. "store_name",
  726. this.storeName
  727. );
  728. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  729. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  730. this.$set(this.attr.productSelect, "stock", 0);
  731. this.$set(this.attr.productSelect, "unique", "");
  732. this.$set(this.attr.productSelect, "cart_num", 0);
  733. this.$set(this, "attrValue", "");
  734. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  735. } else if (!productSelect && !productAttr.length) {
  736. this.$set(
  737. this.attr.productSelect,
  738. "store_name",
  739. this.storeName
  740. );
  741. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  742. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  743. this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
  744. this.$set(
  745. this.attr.productSelect,
  746. "unique",
  747. this.storeInfo.unique || ""
  748. );
  749. this.$set(this.attr.productSelect, "cart_num", 1);
  750. this.$set(this, "attrValue", "");
  751. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  752. }
  753. },
  754. /**
  755. * 属性变动赋值
  756. *
  757. */
  758. ChangeAttr: function(res) {
  759. let productSelect = this.productValue[res];
  760. if (productSelect && productSelect.stock > 0) {
  761. this.$set(this.attr.productSelect, "image", productSelect.image);
  762. this.$set(this.attr.productSelect, "price", productSelect.price);
  763. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  764. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  765. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  766. this.$set(this.attr.productSelect, "cart_num", 1);
  767. this.$set(this, "attrValue", res);
  768. } else if (productSelect && productSelect.stock == 0) {
  769. this.$set(this.attr.productSelect, "image", productSelect.image);
  770. this.$set(this.attr.productSelect, "price", productSelect.price);
  771. this.$set(this.attr.productSelect, "stock", 0);
  772. this.$set(this.attr.productSelect, "unique", "");
  773. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  774. this.$set(this.attr.productSelect, "cart_num", 0);
  775. this.$set(this, "attrValue", "");
  776. } else {
  777. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  778. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  779. this.$set(this.attr.productSelect, "stock", 0);
  780. this.$set(this.attr.productSelect, "unique", "");
  781. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  782. this.$set(this.attr.productSelect, "cart_num", 0);
  783. this.$set(this, "attrValue", "");
  784. }
  785. },
  786. attrVal(val) {
  787. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
  788. .indexn]);
  789. },
  790. /**
  791. * 购物车手动填写
  792. *
  793. */
  794. iptCartNum: function(e) {
  795. this.$set(this.attr.productSelect, 'cart_num', e);
  796. },
  797. // 点击默认单属性购物车
  798. goCartDan(item, index) {
  799. if (!this.isLogin) {
  800. this.getIsLogin();
  801. } else {
  802. this.tempArr[index].cart_num = 1;
  803. this.$set(this, 'tempArr', this.tempArr);
  804. this.goCat(0, item.id, 1);
  805. }
  806. },
  807. // 改变单属性购物车
  808. ChangeCartNumDan(changeValue, index, item) {
  809. let num = this.tempArr[index];
  810. let stock = this.tempArr[index].stock;
  811. this.ChangeCartNum(changeValue, num, stock, 0, item.id);
  812. },
  813. // 改变多属性购物车
  814. ChangeCartNumDuo(changeValue) {
  815. //获取当前变动属性
  816. let productSelect = this.productValue[this.attrValue];
  817. //如果没有属性,赋值给商品默认库存
  818. if (productSelect === undefined && !this.attr.productAttr.length)
  819. productSelect = this.attr.productSelect;
  820. //无属性值即库存为0;不存在加减;
  821. if (productSelect === undefined) return;
  822. let stock = productSelect.stock || 0;
  823. let num = this.attr.productSelect;
  824. this.ChangeCartNum(changeValue, num, stock, 1);
  825. },
  826. // 已经加入购物车时的购物加减;
  827. ChangeCartList(changeValue, index) {
  828. let list = this.cartData.cartList;
  829. let num = list[index];
  830. let stock = list[index].trueStock;
  831. this.ChangeCartNum(changeValue, num, stock, 0, num.product_id, index, 1);
  832. if (!list.length) {
  833. this.cartData.iScart = false;
  834. this.page = 1;
  835. this.loadend = false;
  836. this.tempArr = [];
  837. this.getProducts();
  838. }
  839. },
  840. // 购物车加减计算函数
  841. ChangeCartNum(changeValue, num, stock, isDuo, id, index, cart) {
  842. if (changeValue) {
  843. num.cart_num++;
  844. if (num.cart_num > stock) {
  845. if (isDuo) {
  846. this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
  847. this.$set(this, "cart_num", stock ? stock : 1);
  848. } else {
  849. num.cart_num = stock ? stock : 0;
  850. this.$set(this, 'tempArr', this.tempArr);
  851. this.$set(this.cartData, 'cartList', this.cartData.cartList);
  852. }
  853. return this.$util.Tips({
  854. title: "该产品没有更多库存了"
  855. });
  856. } else {
  857. if (!isDuo) {
  858. if (cart) {
  859. this.goCat(0, id, 1, 1, num.product_attr_unique);
  860. this.getTotalPrice();
  861. this.tempArr.forEach((item) => {
  862. if (item.id == id) {
  863. item.cart_num++;
  864. }
  865. })
  866. } else {
  867. this.goCat(0, id, 1);
  868. }
  869. } else {
  870. this.tempArr.forEach((item) => {
  871. if (item.id == id) {
  872. item.cart_num++;
  873. }
  874. })
  875. }
  876. }
  877. } else {
  878. num.cart_num--;
  879. if (num.cart_num == 0) {
  880. this.cartData.cartList.splice(index, 1);
  881. if (isDuo) {
  882. this.$set(this.attr.productSelect, "cart_num", 1);
  883. this.$set(this, "cart_num", 1);
  884. }
  885. }
  886. if (num.cart_num < 0) {
  887. if (isDuo) {
  888. this.$set(this.attr.productSelect, "cart_num", 1);
  889. this.$set(this, "cart_num", 1);
  890. } else {
  891. num.cart_num = 0;
  892. this.$set(this, 'tempArr', this.tempArr);
  893. this.$set(this.cartData, 'cartList', this.cartData.cartList);
  894. }
  895. } else {
  896. if (!isDuo) {
  897. if (cart) {
  898. this.goCat(0, id, 0, 1, num.product_attr_unique);
  899. this.getTotalPrice();
  900. this.tempArr.forEach((item) => {
  901. if (item.id == id) {
  902. item.cart_num--;
  903. }
  904. })
  905. } else {
  906. this.goCat(0, id, 0);
  907. }
  908. } else {
  909. this.tempArr.forEach((item) => {
  910. if (item.id == id) {
  911. item.cart_num--;
  912. }
  913. })
  914. }
  915. }
  916. }
  917. },
  918. // 多规格加入购物车;
  919. goCatNum() {
  920. this.goCat(1, this.id, 1);
  921. },
  922. /*
  923. * 加入购物车
  924. */
  925. goCat: function(duo, id, type, cart, unique) {
  926. let that = this;
  927. if (duo) {
  928. let productSelect = that.productValue[this.attrValue];
  929. //如果有属性,没有选择,提示用户选择
  930. if (
  931. that.attr.productAttr.length &&
  932. productSelect === undefined
  933. )
  934. return that.$util.Tips({
  935. title: "产品库存不足,请选择其它属性"
  936. });
  937. }
  938. let q = {
  939. product_id: id,
  940. num: duo ? that.attr.productSelect.cart_num : 1,
  941. type: type,
  942. unique: duo ? that.attr.productSelect.unique : cart ? unique : ""
  943. };
  944. postCartNum(q)
  945. .then(function(res) {
  946. if (duo) {
  947. that.attr.cartAttr = false;
  948. that.$util.Tips({
  949. title: "添加购物车成功"
  950. });
  951. // that.page = 1;
  952. // that.loadend = false;
  953. that.tempArr.forEach((item, index) => {
  954. if (item.id == that.id) {
  955. let arrtStock = that.attr.productSelect.stock
  956. let objNum = parseInt(item.cart_num) + parseInt(that.attr.productSelect.cart_num);
  957. item.cart_num = objNum > arrtStock ? arrtStock : objNum
  958. }
  959. })
  960. // that.productslist();
  961. }
  962. that.getCartNum();
  963. if (!cart) {
  964. that.getCartList(1);
  965. }
  966. })
  967. .catch(err => {
  968. return that.$util.Tips({
  969. title: err
  970. });
  971. });
  972. },
  973. goCartDuo(item) {
  974. if (!this.isLogin) {
  975. this.getIsLogin();
  976. } else {
  977. // uni.showLoading({
  978. // title: '加载中'
  979. // });
  980. this.storeName = item.store_name;
  981. this.getAttrs(item.id);
  982. this.$set(this, 'id', item.id);
  983. this.$set(this.attr, 'cartAttr', true);
  984. }
  985. },
  986. getIsLogin() {
  987. toLogin();
  988. },
  989. // 商品详情接口;
  990. getAttrs(id) {
  991. let that = this;
  992. getAttr(id, 0).then(res => {
  993. // uni.hideLoading();
  994. that.$set(that.attr, 'productAttr', res.data.productAttr);
  995. that.$set(that, 'productValue', res.data.productValue);
  996. that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
  997. that.$set(that, 'storeInfo', res.data.storeInfo);
  998. that.DefaultSelect();
  999. })
  1000. },
  1001. // 去详情页
  1002. goDetail(item) {
  1003. goShopDetail(item, this.uid).then(res => {
  1004. uni.navigateTo({
  1005. url: `/pages/goods_details/index?id=${item.id}&fromType=1`
  1006. });
  1007. });
  1008. },
  1009. openTap() {
  1010. this.iSlong = false
  1011. },
  1012. closeTap() {
  1013. this.iSlong = true
  1014. },
  1015. // 分类数据
  1016. getAllCategory: function() {
  1017. let that = this;
  1018. getStoreCategory().then(res => {
  1019. let data = res.data;
  1020. data.forEach(item => {
  1021. item.children.unshift({
  1022. 'id': 0,
  1023. 'cate_name': '全部'
  1024. })
  1025. })
  1026. that.categoryTitle = data[0].cate_name;
  1027. that.cid = data[0].id;
  1028. that.sid = 0;
  1029. that.navActive = 0;
  1030. that.tabClick = 0;
  1031. that.categoryList = data;
  1032. that.categoryErList = res.data[0].children ? res.data[0].children : [];
  1033. that.page = 1;
  1034. that.loadend = false;
  1035. that.loading = false;
  1036. that.tempArr = [];
  1037. that.info.default_delivery
  1038. that.switchNumFun(that.info.default_delivery);
  1039. that.getProducts();
  1040. })
  1041. },
  1042. tapNav(index, item) {
  1043. uni.pageScrollTo({
  1044. duration: 0,
  1045. scrollTop: 0
  1046. })
  1047. let list = this.categoryList[index];
  1048. this.navActive = index;
  1049. this.categoryTitle = list.cate_name;
  1050. this.categoryErList = item.children ? item.children : [];
  1051. this.tabClick = 0;
  1052. this.tabLeft = 0;
  1053. this.cid = list.id;
  1054. this.sid = 0;
  1055. this.page = 1;
  1056. this.loadend = false;
  1057. this.tempArr = [];
  1058. this.getProducts();
  1059. },
  1060. // 导航栏点击
  1061. longClick(index) {
  1062. if (this.categoryErList.length > 3) {
  1063. this.tabLeft = (index - 1) * (this.isWidth + 6) //设置下划线位置
  1064. };
  1065. this.tabClick = index; //设置导航点击了哪一个
  1066. this.iSlong = true;
  1067. this.sid = this.categoryErList[index].id;
  1068. this.page = 1;
  1069. this.loadend = false;
  1070. this.tempArr = [];
  1071. this.getProducts();
  1072. },
  1073. },
  1074. onReachBottom: function() {
  1075. this.getProducts();
  1076. }
  1077. }
  1078. </script>
  1079. <style lang="scss">
  1080. /* #ifdef MP || APP-PLUS */
  1081. .mp-header {
  1082. z-index: 30;
  1083. position: fixed;
  1084. left: 0;
  1085. top: 0;
  1086. width: 100%;
  1087. background: #fff;
  1088. border-bottom: 1px solid #F0F0F0;
  1089. .serch-wrapper {
  1090. height: 100%;
  1091. /* #ifdef MP */
  1092. padding: 0 220rpx 0 30rpx;
  1093. /* #endif */
  1094. /* #ifdef APP-PLUS */
  1095. padding: 0 50rpx 0 40rpx;
  1096. /* #endif */
  1097. .input {
  1098. flex: 1;
  1099. height: 55rpx;
  1100. // padding: 0 0 0 30rpx;
  1101. background: #F8F8F8;
  1102. color: #ADADAD;
  1103. font-size: 26rpx;
  1104. /* #ifdef MP */
  1105. width: 70%;
  1106. /* #endif */
  1107. /* #ifdef APP-PLUS */
  1108. width: 100%;
  1109. /* #endif */
  1110. border-radius: 50rpx;
  1111. .iconfont {
  1112. margin-right: 20rpx;
  1113. }
  1114. }
  1115. }
  1116. }
  1117. /* #endif */
  1118. page {
  1119. background-color: #fff;
  1120. }
  1121. /deep/.product-window.joinCart {
  1122. z-index: 999;
  1123. }
  1124. ::-webkit-scrollbar {
  1125. width: 0;
  1126. height: 0;
  1127. color: transparent;
  1128. display: none
  1129. }
  1130. .goodCate {
  1131. /deep/.mask {
  1132. z-index: 99;
  1133. }
  1134. /deep/.attrProduct {
  1135. .mask {
  1136. z-index: 100;
  1137. }
  1138. }
  1139. .header {
  1140. position: fixed;
  1141. background-color: #fff;
  1142. top: 0;
  1143. left: 0;
  1144. width: 100%;
  1145. z-index: 99;
  1146. border-bottom: 1px solid #F0F0F0;
  1147. /* #ifdef H5 */
  1148. padding-top: 20rpx;
  1149. /* #endif */
  1150. .pageIndex {
  1151. width: 68rpx;
  1152. height: 68rpx;
  1153. border-radius: 50%;
  1154. background-color: #F7F7F7;
  1155. .iconfont {
  1156. color: #666666;
  1157. font-size: 30rpx;
  1158. }
  1159. // image{
  1160. // width: 29rpx;
  1161. // height: 30rpx;
  1162. // }
  1163. }
  1164. .search {
  1165. flex: 1;
  1166. // width: 690rpx;
  1167. height: 68rpx;
  1168. border-radius: 36rpx;
  1169. background-color: #F7F7F7;
  1170. font-size: 26rpx;
  1171. color: #cccccc;
  1172. padding: 0 30rpx;
  1173. box-sizing: border-box;
  1174. .iconfont {
  1175. font-size: 30rpx;
  1176. margin-right: 18rpx;
  1177. color: #666666;
  1178. }
  1179. }
  1180. }
  1181. .conter {
  1182. /* #ifdef H5 */
  1183. padding-top: 288rpx;
  1184. /* #endif */
  1185. height: 100vh;
  1186. background-color: #fff;
  1187. .aside {
  1188. position: fixed;
  1189. width: 23%;
  1190. left: 0;
  1191. bottom: 0;
  1192. /* #ifdef H5 */
  1193. top: 288rpx;
  1194. /* #endif */
  1195. background-color: #F7F7F7;
  1196. overflow-y: auto;
  1197. overflow-x: hidden;
  1198. /* #ifdef H5 */
  1199. // margin-top: 128rpx;
  1200. /* #endif */
  1201. z-index: 99;
  1202. padding-bottom: 194rpx;
  1203. .item {
  1204. height: 100rpx;
  1205. width: 100%;
  1206. font-size: 26rpx;
  1207. color: #333333;
  1208. &.on {
  1209. background-color: #FFFFFF;
  1210. width: 100%;
  1211. text-align: center;
  1212. color: var(--view-theme);
  1213. font-weight: 500;
  1214. position: relative;
  1215. &::after {
  1216. content: "";
  1217. position: absolute;
  1218. width: 6rpx;
  1219. height: 46rpx;
  1220. background: var(--view-theme);
  1221. border-radius: 0 4rpx 4rpx 0;
  1222. left: 0
  1223. }
  1224. }
  1225. }
  1226. }
  1227. .wrapper {
  1228. margin-top: 104rpx;
  1229. padding-bottom: 250rpx;
  1230. /* #ifdef H5 */
  1231. padding-bottom: 200rpx;
  1232. /* #endif */
  1233. width: 77%;
  1234. float: right;
  1235. background-color: #FFFFFF;
  1236. // padding-bottom: 240rpx;
  1237. .bgcolor {
  1238. width: 100%;
  1239. background-color: #FFFFFF;
  1240. }
  1241. // .goodsList {
  1242. // margin-top: 0 !important;
  1243. // }
  1244. .mask {
  1245. z-index: 9;
  1246. }
  1247. .longTab {
  1248. width: 65%;
  1249. position: fixed;
  1250. /* #ifdef H5 */
  1251. top: 288rpx;
  1252. /* #endif */
  1253. height: 100rpx;
  1254. z-index: 99;
  1255. background-color: #FFFFFF;
  1256. .longItem {
  1257. height: 44rpx;
  1258. display: inline-block;
  1259. line-height: 44rpx;
  1260. text-align: center;
  1261. font-size: 26rpx;
  1262. overflow: hidden;
  1263. text-overflow: ellipsis;
  1264. white-space: nowrap;
  1265. color: #333333;
  1266. background-color: #F7F7F7;
  1267. border-radius: 22rpx;
  1268. margin-left: 12rpx;
  1269. &.click {
  1270. font-weight: bold;
  1271. background-color: var(--view-theme);
  1272. color: #ffffff;
  1273. }
  1274. }
  1275. .underlineBox {
  1276. height: 3px;
  1277. width: 20%;
  1278. display: flex;
  1279. align-content: center;
  1280. justify-content: center;
  1281. transition: .5s;
  1282. .underline {
  1283. width: 33rpx;
  1284. height: 4rpx;
  1285. background-color: #FFFFFF;
  1286. }
  1287. }
  1288. }
  1289. .openList {
  1290. width: 12%;
  1291. height: 100rpx;
  1292. background-color: #FFFFFF;
  1293. line-height: 100rpx;
  1294. padding-left: 30rpx;
  1295. position: fixed;
  1296. right: 0;
  1297. /* #ifdef H5 */
  1298. top: 288rpx;
  1299. /* #endif */
  1300. z-index: 99;
  1301. .iconfont {
  1302. font-size: 22rpx;
  1303. color: #666666;
  1304. }
  1305. }
  1306. .downTab {
  1307. width: 78%;
  1308. position: fixed;
  1309. top: 0rpx;
  1310. /* #ifdef H5 */
  1311. top: 288rpx;
  1312. /* #endif */
  1313. z-index: 102;
  1314. background-color: #FFFFFF;
  1315. .title {
  1316. height: 100rpx;
  1317. font-size: 26rpx;
  1318. color: #999999;
  1319. padding-left: 20rpx;
  1320. .closeList {
  1321. width: 90rpx;
  1322. height: 100%;
  1323. line-height: 100rpx;
  1324. padding-left: 30rpx;
  1325. transform: rotate(180deg);
  1326. .iconfont {
  1327. font-size: 22rpx;
  1328. color: #666666;
  1329. }
  1330. }
  1331. }
  1332. .children {
  1333. max-height: 500rpx;
  1334. overflow-x: hidden;
  1335. overflow-y: auto;
  1336. padding-bottom: 20rpx;
  1337. .item {
  1338. height: 60rpx;
  1339. background-color: #F7F7F7;
  1340. border-radius: 30rpx;
  1341. line-height: 60rpx;
  1342. padding: 0 15rpx;
  1343. margin: 0 0 20rpx 20rpx;
  1344. width: 165rpx;
  1345. text-align: center;
  1346. &.click {
  1347. font-weight: bold;
  1348. background-color: var(--view-theme);
  1349. color: #ffffff;
  1350. }
  1351. }
  1352. }
  1353. }
  1354. .goodsList {
  1355. margin-top: 0rpx;
  1356. padding: 0 30rpx 0 20rpx;
  1357. /deep/.item {
  1358. margin-bottom: 33rpx !important;
  1359. .text {
  1360. font-size: 26rpx;
  1361. }
  1362. .bottom {
  1363. .sales {
  1364. .money {
  1365. font-size: 34rpx;
  1366. text {
  1367. font-size: 26rpx;
  1368. }
  1369. }
  1370. }
  1371. .cart {
  1372. .pictrue {
  1373. width: 50rpx;
  1374. height: 50rpx;
  1375. }
  1376. }
  1377. }
  1378. }
  1379. }
  1380. }
  1381. }
  1382. .store-address {
  1383. width: 100%;
  1384. margin-top: 15rpx;
  1385. position: relative;
  1386. padding: 12rpx 30rpx 0 30rpx;
  1387. height: 185rpx;
  1388. background-color: #fff;
  1389. .address {
  1390. font-size: 32rpx;
  1391. font-weight: 500;
  1392. color: #333333;
  1393. .name{
  1394. max-width: 400rpx;
  1395. }
  1396. .icon-xiangyou {
  1397. font-size: 24rpx;
  1398. margin-left: 10rpx;
  1399. }
  1400. }
  1401. .distance {
  1402. margin-top: 16rpx;
  1403. font-size: 24rpx;
  1404. font-weight: 400;
  1405. color: #999999;
  1406. }
  1407. .time {
  1408. margin-top: 16rpx;
  1409. font-size: 24rpx;
  1410. font-weight: 400;
  1411. color: #333333;
  1412. }
  1413. .switch {
  1414. position: absolute;
  1415. top: 15rpx;
  1416. /* #ifdef H5 */
  1417. top: 20rpx;
  1418. /* #endif */
  1419. right: 30rpx;
  1420. width: 194rpx;
  1421. height: 58rpx;
  1422. background: #F5F5F5;
  1423. border-radius: 33rpx;
  1424. .title {
  1425. width: 94rpx;
  1426. height: 100%;
  1427. line-height: 58rpx;
  1428. border-radius: 33rpx;
  1429. text-align: center;
  1430. // padding-right: 20rpx;
  1431. &.onLeft {
  1432. // padding-left: 20rpx;
  1433. // padding-right: 0;
  1434. }
  1435. &.on {
  1436. width: 100rpx;
  1437. background-color: var(--view-theme) !important;
  1438. color: #fff;
  1439. padding: 0 !important;
  1440. }
  1441. }
  1442. }
  1443. }
  1444. .footer {
  1445. width: 100%;
  1446. position: fixed;
  1447. left: 0;
  1448. background-color: #fff;
  1449. box-shadow: 0px -3px 16px rgba(36, 12, 12, 0.05);
  1450. z-index: 100;
  1451. padding-left: 30rpx;
  1452. box-sizing: border-box;
  1453. height: 100rpx;
  1454. // #ifdef H5
  1455. bottom: 94rpx;
  1456. bottom: calc(94rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1457. bottom: calc(94rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1458. // #endif
  1459. // #ifndef H5
  1460. bottom: 98rpx;
  1461. bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1462. bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1463. // #endif
  1464. &.on {
  1465. // #ifndef H5
  1466. bottom: 0rpx;
  1467. // #endif
  1468. }
  1469. /deep/.cartIcon {
  1470. width: 80rpx;
  1471. height: 80rpx;
  1472. border-radius: 50%;
  1473. position: relative;
  1474. margin-top: -36rpx;
  1475. .iconfont {
  1476. font-size: 94rpx;
  1477. margin-top: 12rpx;
  1478. color: var(--view-theme);
  1479. }
  1480. &.noCart {
  1481. .iconfont {
  1482. color: #CBCBCB;
  1483. }
  1484. }
  1485. .num {
  1486. min-width: 14rpx;
  1487. background-color: #fff;
  1488. color: var(--view-theme);
  1489. border-radius: 15px;
  1490. position: absolute;
  1491. right: -10rpx;
  1492. top: 20rpx;
  1493. font-size: 20rpx;
  1494. padding: 0 10rpx;
  1495. border: 1px solid var(--view-theme);
  1496. }
  1497. }
  1498. .money {
  1499. font-size: 26rpx;
  1500. font-weight: bold;
  1501. color: var(--view-priceColor);
  1502. margin-right: 34rpx;
  1503. .num {
  1504. font-size: 34rpx;
  1505. }
  1506. }
  1507. .bnt {
  1508. width: 192rpx;
  1509. height: 76rpx;
  1510. background-color: var(--view-theme);
  1511. border-radius: 46px;
  1512. line-height: 76rpx;
  1513. text-align: center;
  1514. color: #fff;
  1515. font-size: 28rpx;
  1516. margin-right: 30rpx;
  1517. }
  1518. .noCart {
  1519. .money {
  1520. color: #CBCBCB;
  1521. }
  1522. .bnt {
  1523. background-color: #CBCBCB;
  1524. }
  1525. }
  1526. }
  1527. }
  1528. .group-button {
  1529. transform: rotateZ(360deg);
  1530. padding: 19rpx 24rpx;
  1531. border: 1rpx solid #DDDDDD;
  1532. border-radius: 32rpx;
  1533. margin-right: 40rpx;
  1534. font-weight: 500;
  1535. font-size: 26rpx;
  1536. line-height: 26rpx;
  1537. color: #333333;
  1538. .iconfont {
  1539. margin-right: 10rpx;
  1540. font-size: 26rpx;
  1541. color: var(--view-theme);
  1542. }
  1543. }
  1544. /* #ifdef H5 || MP */
  1545. .dialog {
  1546. position: fixed;
  1547. right: 0;
  1548. left: 0;
  1549. z-index: 101;
  1550. padding: 36rpx 40rpx 40rpx;
  1551. border-radius: 12rpx 12rpx 0 0;
  1552. background-color: #FFFFFF;
  1553. transform: translateY(100%);
  1554. transition: 0.3s;
  1555. /* #ifdef H5 */
  1556. bottom: 94rpx;
  1557. bottom: calc(94rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1558. bottom: calc(94rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1559. /* #endif */
  1560. /* #ifdef MP */
  1561. bottom: 0rpx;
  1562. bottom: calc(0rpx + constant(safe-area-inset-bottom));
  1563. bottom: calc(0rpx + env(safe-area-inset-bottom));
  1564. /* #endif */
  1565. &.dialog-footer {
  1566. /* #ifdef MP */
  1567. bottom: 98rpx;
  1568. bottom: calc(98rpx + constant(safe-area-inset-bottom));
  1569. bottom: calc(98rpx + env(safe-area-inset-bottom));
  1570. /* #endif */
  1571. }
  1572. &.active {
  1573. transform: translateY(0);
  1574. }
  1575. }
  1576. .dialog-head {
  1577. display: flex;
  1578. .button {
  1579. flex: 1;
  1580. display: flex;
  1581. justify-content: center;
  1582. align-items: center;
  1583. height: 138rpx;
  1584. border: 4rpx solid #DDDDDD;
  1585. border-radius: 12rpx;
  1586. font-weight: 500;
  1587. font-size: 32rpx;
  1588. color: #333333;
  1589. cursor: pointer;
  1590. +.button {
  1591. margin-left: 46rpx;
  1592. }
  1593. .iconfont {
  1594. margin-right: 40rpx;
  1595. font-size: 80rpx;
  1596. color: #999999;
  1597. }
  1598. &.active {
  1599. border: 4rpx solid var(--view-theme);
  1600. .iconfont {
  1601. color: var(--view-theme);
  1602. }
  1603. }
  1604. }
  1605. }
  1606. .dialog-body {
  1607. margin-top: 60rpx;
  1608. font-size: 24rpx;
  1609. color: #999999;
  1610. .dialog-body-main {
  1611. .dialog-body-main-inner {
  1612. display: flex;
  1613. margin-top: 32rpx;
  1614. }
  1615. .dialog-body-main-btn {
  1616. display: flex;
  1617. justify-content: center;
  1618. align-items: center;
  1619. margin-top: 56rpx;
  1620. .iconfont {
  1621. margin-left: 12rpx;
  1622. font-size: 22rpx;
  1623. color: #666666;
  1624. }
  1625. }
  1626. }
  1627. .dialog-body-left {
  1628. flex: 1;
  1629. min-width: 0;
  1630. margin-right: 20rpx;
  1631. }
  1632. .dialog-body-right {
  1633. display: flex;
  1634. justify-content: center;
  1635. align-items: center;
  1636. width: 40rpx;
  1637. height: 40rpx;
  1638. border-radius: 50%;
  1639. background-color: var(--view-minorColorT);
  1640. font-size: 22rpx;
  1641. color: var(--view-theme);
  1642. cursor: pointer;
  1643. }
  1644. .dialog-body-name {
  1645. font-weight: 500;
  1646. font-size: 24rpx;
  1647. line-height: 1.2;
  1648. color: #333333;
  1649. .tag {
  1650. margin-left: 14rpx;
  1651. font-size: 24rpx;
  1652. color: #888888;
  1653. }
  1654. }
  1655. .dialog-body-info {
  1656. margin-top: 28rpx;
  1657. .item {
  1658. display: flex;
  1659. font-size: 22rpx;
  1660. line-height: 1.5;
  1661. color: #888888;
  1662. +.item {
  1663. margin-top: 20rpx;
  1664. }
  1665. .iconfont {
  1666. margin-right: 5rpx;
  1667. font-size: 22rpx;
  1668. line-height: 1.5;
  1669. color: #CCCCCC;
  1670. }
  1671. }
  1672. }
  1673. }
  1674. .dialog-foot {
  1675. display: flex;
  1676. margin-top: 78rpx;
  1677. .button {
  1678. display: flex;
  1679. justify-content: center;
  1680. align-items: center;
  1681. flex: 1;
  1682. min-width: 0;
  1683. height: 92rpx;
  1684. border-radius: 46rpx;
  1685. background-color: #EEEEEE;
  1686. font-size: 30rpx;
  1687. color: #666666;
  1688. cursor: pointer;
  1689. +.button {
  1690. margin-left: 46rpx;
  1691. }
  1692. &.primary {
  1693. background-color: var(--view-theme);
  1694. color: #FFFFFF;
  1695. }
  1696. }
  1697. }
  1698. /* #endif */
  1699. .search-box {
  1700. flex: 1;
  1701. padding: 0 30rpx;
  1702. }
  1703. </style>