shop.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819
  1. <template>
  2. <view class="box">
  3. <view class="topbox">
  4. <view class="sstop">
  5. <image src="../../static/timg/icon_search@2x.png" mode="" class="sstopimg"></image>
  6. <input type="text" v-model="name" placeholder="请输入商品名称" class="sstopInput" @confirm="ssList">
  7. <image src="../../static/img/icon_close.png" mode="" @click="empty" v-if="inputChShow" class="inputCh"></image>
  8. </view>
  9. <scroll-view scroll-x="true" class="scroll-Y" >
  10. <view class="classificationBox">
  11. <view class="classification" v-for="(item,index) in categoryList" @click="topClick(index,item)">
  12. <view class="classificationName classificationNameActive" v-if="topIndex==index" :style="{color:'#'+themeColor}">{{item.name}}</view>
  13. <view class="classificationName" v-else >{{item.name}}</view>
  14. <view class="classificationHx" :style="{background:'#'+themeColor}" v-if="topIndex==index"></view>
  15. </view>
  16. </view>
  17. </scroll-view>
  18. </view>
  19. <view style="height: 180rpx;"></view>
  20. <view class="paixuBox">
  21. <view class="paixuLine" @click="defaultpx" :class="{pxActive:defaultpxActive}">
  22. 默认排序
  23. </view>
  24. <view class="paixuLine" @click="xlPx(1)">
  25. <view :class="{pxActive:salessort}">销量</view>
  26. <view class="paixuLineTbBox">
  27. <view class="paixuLineTbtop" >
  28. <image v-if="salessorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
  29. <image v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
  30. </view>
  31. <view class="paixuLineTbtop">
  32. <image v-if="salessortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
  33. <image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="paixuLine" @click="jgpx(1)">
  38. <view :class="{pxActive:pricesort}">价格</view>
  39. <view class="paixuLineTbBox">
  40. <view class="paixuLineTbtop" >
  41. <image v-if="pricesorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
  42. <image v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
  43. </view>
  44. <view class="paixuLineTbtop">
  45. <image v-if="pricesortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
  46. <image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <scroll-view scroll-y="true" class="scroll-Y goodsSw goodsBox" :scroll-top="scrollTop" @scroll="onscroll" >
  52. <view style="padding-bottom: 30rpx;"><!-- class="goodsBox" -->
  53. <view class="hotGoodsLine" v-for="(item,index) in list" @click="goDetail(item)">
  54. <view>
  55. <image :src="item.url" v-if="item.url" mode="" @error="defImg()" class="hotGoodsLineImg"></image>
  56. <image v-else src="../../static/timg/noimg.png" mode="" class="hotGoodsLineImg"></image>
  57. </view>
  58. <view class="hotGoodsLineRIght">
  59. <view class="goodsName">{{item.name}}</view>
  60. <view class="timeTbox" v-if="item.goodsDownTime">
  61. <view class="timeK" style="margin-left: 0;">{{item.shengyuD}}</view>
  62. <view class="timeviewTxt" > 天</view>
  63. <view class="timeK">{{item.shengyuH}}</view>
  64. <view class="timeviewTxt"> 时</view>
  65. <view class="timeK">{{item.shengyuM}}</view>
  66. <view class="timeviewTxt" > 分 &nbsp;后结束抢购</view>
  67. </view>
  68. <view class="hotGoodsLineRIghtBottom">
  69. <view class="goodsPrice">
  70. <view class="goodsPrice1" >{{item.saleLabel}}</view><!-- :style="{color:'#'+themeColor}" -->
  71. <view class="goodsPrice2" >¥</view><!-- :style="{color:'#'+themeColor}" -->
  72. <view class="goodsPrice3" >{{item.salePrice?item.salePrice:item.scribingPrice}}
  73. <span v-if="item.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
  74. </view>
  75. <view class="goodsPrice4" v-if="item.showLabel&&item.scribingPrice">
  76. <span v-if="item.showLabel.indexOf('1')!=-1">¥{{item.scribingPrice}}</span>
  77. </view>
  78. </view>
  79. <view class="Sold" >
  80. <view v-if="item.showLabel&&item.showLabel.indexOf('3')!=-1">
  81. 已售 {{item.saleQty>0?item.saleQty:0}}
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. <nodata v-if="list.length==0"></nodata>
  88. </view>
  89. </scroll-view>
  90. <!-- 手机号授权 -->
  91. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  92. <view class="authorizCont" @click.stop="">
  93. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  94. <view class="authorizMs">未注册的手机号登录后将自动创建会员账号,如果您不同意授权获取手机号,会影响您使用我们的产品和服务。</view>
  95. <view class="sqLine">
  96. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  97. <view class="sqRefuse" @click="authorizShowHide">拒绝</view>
  98. </view>
  99. </view>
  100. <view style="text-align: center;padding-top: 56rpx;">
  101. <image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  102. </view>
  103. </view>
  104. <img src="../../static/timg/btn_top@2x.png" alt="" class="btn_top" @click="btnTop">
  105. </view>
  106. </template>
  107. <script>
  108. import nodata from '../../components/nodata/nodata.vue'
  109. export default {
  110. components: {
  111. nodata
  112. },
  113. data() {
  114. return {
  115. userInfo:'',
  116. salessort:false,
  117. salessorts:false,
  118. salessortx:false,
  119. pricesort:false,
  120. pricesorts:false,
  121. pricesortx:false,
  122. topIndex:0,
  123. categoryList:'',
  124. page:1,
  125. limit:10,
  126. name:'',
  127. categoryID:'',
  128. order:'',
  129. orderBy:'',
  130. list:[],
  131. defaultImg: require("../../static/timg/noimg.png"),
  132. defaultpxActive:false,
  133. authorizShow:false,
  134. code:'',
  135. wxOpenData:'',
  136. shopcategoryID:'',
  137. inputChShow:false,
  138. ext:'',
  139. scrollTop:0,
  140. themeColor:'',
  141. }
  142. },
  143. watch:{
  144. name(val){
  145. console.log(val)
  146. if(val){
  147. this.inputChShow=true
  148. }
  149. },
  150. },
  151. onLoad(opt) {
  152. console.log(getApp().globalData.shopcategoryID)
  153. //this.userInfo = uni.getStorageSync("userInfo");
  154. /* this.shopcategoryID=getApp().globalData.shopcategoryID;
  155. if(this.shopcategoryID){
  156. this.categoryID=this.shopcategoryID
  157. } */
  158. this.userInfo=this.$store.state.userInfo;
  159. this.wxOpenData=this.$store.state.wxOpenData;
  160. this.themeColor = uni.getStorageSync("themeColor");
  161. if(this.themeColor){
  162. if(this.themeColor=='6F2BE8'){
  163. var backgroundImage='/static/tabimg/shop6F2BE8.png'
  164. }
  165. if(this.themeColor=='1677FF'){
  166. var backgroundImage='/static/tabimg/shop1677FF.png'
  167. }
  168. if(this.themeColor=='FF4F00'){
  169. var backgroundImage='/static/tabimg/shopFF4F00.png'
  170. }
  171. if(this.themeColor=='D53533'){
  172. var backgroundImage='/static/tabimg/shop1.png'
  173. }
  174. uni.setTabBarStyle({
  175. // color: '#FF0000',
  176. selectedColor: '#'+this.themeColor,
  177. })
  178. uni.setTabBarItem({
  179. index: 1,
  180. text: '商城',
  181. selectedIconPath: backgroundImage
  182. })
  183. }
  184. this.ext=this.$common.getExtStoreId();
  185. this.getcategoryList();
  186. this.getlistOpenGoodsPage();
  187. /* uni.getLocation({
  188. type: 'gcj02',
  189. success: function(res) {
  190. console.log(res)
  191. },
  192. fail(err) {
  193. console.log(err)
  194. }
  195. }); */
  196. },
  197. onShow() {
  198. var shopcategoryID = uni.getStorageSync("shopcategoryID")
  199. if(shopcategoryID){
  200. uni.removeStorageSync('shopcategoryID');
  201. if(this.categoryList){
  202. this.categoryList.forEach((item,index)=>{
  203. //console.log(item.id)
  204. if(item.id==shopcategoryID){
  205. this.topIndex=index
  206. }
  207. })
  208. console.log("this.categoryID"+this.categoryID)
  209. if(this.topIndex){
  210. this.categoryID=shopcategoryID;
  211. }else{
  212. this.categoryID=''
  213. }
  214. this.list=[];
  215. this.page=1;
  216. this.getlistOpenGoodsPage()
  217. }
  218. }
  219. },
  220. methods: {
  221. onPageScroll(e){
  222. //console.log(e)
  223. //this.scrollTop=e.scrollTop
  224. },
  225. btnTop(){
  226. uni.pageScrollTo({
  227. scrollTop: 0,
  228. });
  229. // console.log(this.scrollTop)
  230. // this.$nextTick(function() {
  231. // this.scrollTop = 0
  232. // });
  233. },
  234. onscroll(e){
  235. //console.log(e)
  236. this.scrollTop = e.detail.scrollTop
  237. },
  238. empty(){
  239. console.log("情况")
  240. this.name='';
  241. this.inputChShow=false;
  242. this.list=[];
  243. this.page=1;
  244. this.getlistOpenGoodsPage()
  245. },
  246. decryptPhoneNumber: function(e) {
  247. console.log(e);
  248. this.code=e.detail.code
  249. this.wxPhoneLogin()
  250. this.authorizShow=false;
  251. },
  252. wxPhoneLogin(){
  253. var that=this;
  254. this.$http('miniApp2/sys/wxPhoneLogin', {
  255. appId:'wx33053a645546ec31',
  256. unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
  257. code:this.code,
  258. openId:this.wxOpenData.openid
  259. },'POST').then(res => {
  260. var data = res.data;
  261. if(data.newCustomer){
  262. uni.showModal({
  263. title: '提示',
  264. content: data.newCustomerMsg,
  265. success: function(resTK) {
  266. }
  267. });
  268. var token=res.data.token
  269. data.loginInfo={}
  270. data.loginInfo.token=token
  271. this.$store.commit('mutationswxOpenData', data);
  272. return false;
  273. }
  274. if(data.loginInfo){
  275. this.userInfo=data.loginInfo.openUser;
  276. this.wxOpenData=data.loginInfo;
  277. this.$store.commit('mutationswxOpenData', data)
  278. this.$store.commit('mutationsuserInfo', this.userInfo)
  279. this.topIndex=1;
  280. this.list=[];
  281. this.page=1;
  282. this.getlistOpenGoodsPage()
  283. }
  284. })
  285. },
  286. xlPx(num){
  287. this.salessort=true;
  288. this.defaultpxActive=false;
  289. this.pricesort=false;
  290. this.pricesort=false;
  291. this.pricesorts=false;
  292. this.pricesortx=false;
  293. if(this.salessorts){
  294. num=2
  295. }
  296. if(num==1){
  297. this.salessorts=true;
  298. this.salessortx=false;
  299. this.orderBy='asc';
  300. }else{
  301. this.salessorts=false;
  302. this.salessortx=true;
  303. this.orderBy='desc';
  304. }
  305. this.order='SaleQty';
  306. this.list=[];
  307. this.page=1;
  308. this.getlistOpenGoodsPage()
  309. },
  310. jgpx(type){
  311. this.salessort=false;
  312. this.defaultpxActive=false;
  313. this.pricesort=true;
  314. this.salessort=false;
  315. this.salessorts=false;
  316. this.salessortx=false;
  317. if(this.pricesorts){
  318. type=2
  319. }
  320. if(type==1){
  321. this.pricesorts=true;
  322. this.pricesortx=false;
  323. this.orderBy='asc';
  324. }else{
  325. this.pricesorts=false;
  326. this.pricesortx=true;
  327. this.orderBy='desc';
  328. }
  329. this.order='SalePrice';
  330. this.list=[];
  331. this.page=1;
  332. this.getlistOpenGoodsPage()
  333. },
  334. defaultpx(){
  335. this.defaultpxActive=true;
  336. this.order='';
  337. this.orderBy='';
  338. this.salessort=false;
  339. this.salessorts=false;
  340. this.salessortx=false;
  341. this.pricesort=false;
  342. this.pricesorts=false;
  343. this.pricesortx=false;
  344. //this.topIndex=0;
  345. this.list=[];
  346. this.page=1;
  347. this.getlistOpenGoodsPage()
  348. },
  349. defImg(event){
  350. // console.log(event)
  351. /* let img = event.srcElement;
  352. img.src = this.defaultImg;
  353. img.onerror = null; //防止闪图 */
  354. },
  355. topClick(index,item){
  356. //console.log(item)
  357. this.topIndex=index;
  358. this.list=[];
  359. this.page=1;
  360. this.categoryID=item.id;
  361. this.getlistOpenGoodsPage()
  362. },
  363. ssList(){
  364. this.topIndex=0;
  365. this.list=[];
  366. this.page=1;
  367. this.getlistOpenGoodsPage()
  368. },
  369. goDetail(item){
  370. // if(!this.userInfo){
  371. // this.authorizShow=true;
  372. // }else{
  373. // }
  374. uni.navigateTo({
  375. url:'goodsDetail?id='+item.id
  376. })
  377. },
  378. getcategoryList(){
  379. this.$http('openMall/categoryList', {
  380. unionId:this.ext.unionId
  381. },'GET').then(res => {
  382. this.categoryList=res.data;
  383. var obj={
  384. id:'',
  385. name:'全部'
  386. }
  387. this.categoryList.unshift(obj);
  388. var shopcategoryID = uni.getStorageSync("shopcategoryID")
  389. if(shopcategoryID){
  390. //console.log(this.shopcategoryID)
  391. this.categoryList.forEach((item,index)=>{
  392. //console.log(item.id)
  393. if(item.id==this.shopcategoryID){
  394. this.topIndex=index
  395. }
  396. })
  397. if(this.topIndex){
  398. this.categoryID=shopcategoryID;
  399. }else{
  400. this.categoryID=''
  401. }
  402. }
  403. })
  404. },
  405. getlistOpenGoodsPage(){
  406. uni.showLoading({ title: '加载中'});
  407. console.log(this.categoryID)
  408. var that=this;
  409. this.$http('openMall/listOpenGoodsPage', {
  410. page:this.page,
  411. limit:this.limit,
  412. name:this.name,
  413. categoryID:this.categoryID,
  414. orderBy:this.order,
  415. order:this.orderBy,
  416. unionId:this.ext.unionId
  417. },'GET').then(res => {
  418. uni.hideLoading();
  419. res.data.Items.forEach(item=>{
  420. if(item.goodsDownTime){
  421. item.shengyuM=''
  422. item.shengyuD=''
  423. item.shengyuH=''
  424. //console.log(item)
  425. //that.clock(item)
  426. let _this = this
  427. let today = new Date() // 当前时间
  428. let h = today.getHours()
  429. let m = today.getMinutes()
  430. let s = today.getSeconds()
  431. let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
  432. if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
  433. this.activityEnd = true
  434. return
  435. }
  436. let stopH = stopTime.getHours()
  437. let stopM = stopTime.getMinutes()
  438. let stopS = stopTime.getSeconds()
  439. let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
  440. let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
  441. let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
  442. let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
  443. let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
  444. let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
  445. let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
  446. let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
  447. item.shengyuM=shengyuM;
  448. item.shengyuD=shengyuD;
  449. item.shengyuH=shengyuH;
  450. }
  451. })
  452. var data=res.data.Items;
  453. this.list=this.list.concat(data);
  454. console.log(this.list)
  455. })
  456. },
  457. clock(item){
  458. console.log(item)
  459. if(!item){
  460. return false;
  461. }
  462. let _this = this
  463. let today = new Date() // 当前时间
  464. let h = today.getHours()
  465. let m = today.getMinutes()
  466. let s = today.getSeconds()
  467. let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
  468. if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
  469. this.activityEnd = true
  470. return
  471. }
  472. let stopH = stopTime.getHours()
  473. let stopM = stopTime.getMinutes()
  474. let stopS = stopTime.getSeconds()
  475. let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
  476. let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
  477. let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
  478. let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
  479. let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
  480. let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
  481. let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
  482. let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
  483. this.shengyuM=shengyuM;
  484. this.shengyuD=shengyuD;
  485. this.shengyuH=shengyuH;
  486. setTimeout(_this.clock, 500)
  487. },
  488. },
  489. onReachBottom(){
  490. this.page++;
  491. this.getlistOpenGoodsPage()
  492. //console.log("shanglas")
  493. },
  494. onPullDownRefresh(){
  495. this.list=[];
  496. this.page=1;
  497. this.getlistOpenGoodsPage();
  498. setTimeout(() => {
  499. uni.stopPullDownRefresh(); // 关闭下拉刷新
  500. }, 2000);
  501. }
  502. }
  503. </script>
  504. <style scoped lang="less">
  505. .btn_top{
  506. width: 100rpx;
  507. height: 100rpx;
  508. position: fixed;
  509. right: 24rpx;
  510. bottom: 40rpx;
  511. }
  512. .timeTbox{
  513. height: 60rpx;
  514. display: flex;
  515. padding-top: 15rpx;
  516. font-size: 24rpx;
  517. font-family: PingFangSC-Regular, PingFang SC;
  518. font-weight: 400;
  519. color: #764D49;
  520. }
  521. .timeviewTxt{
  522. line-height: 41rpx;
  523. padding-top: 10rpx;
  524. }
  525. .timeDivTxt{
  526. line-height: 60rpx;
  527. padding: 0 10rpx;
  528. }
  529. .timeK{
  530. height: 41rpx;
  531. line-height: 41rpx;
  532. color: #FFFFFF;
  533. width: 41rpx;
  534. text-align: center;
  535. background: #F03B3B;
  536. border-radius: 6rpx;
  537. margin-top: 9rpx;
  538. margin-left: 10rpx;
  539. margin-right: 10rpx;
  540. }
  541. .hotGoodsLineRIghtBottom{
  542. display: flex;
  543. justify-content: space-between;
  544. width: 470rpx;
  545. }
  546. .topbox{
  547. position: fixed;
  548. width: 750rpx;
  549. top: -1rpx;
  550. left: 0;
  551. z-index: 11;
  552. }
  553. .inputCh{
  554. width:40rpx;
  555. height: 40rpx;
  556. position: absolute;
  557. right: 60rpx;
  558. top: 40rpx;
  559. z-index: 11;
  560. }
  561. .pxActive{
  562. color: #FF0000 !important;
  563. }
  564. .paixuLineTbtopIcon{
  565. width: 16rpx;
  566. height: 8rpx;
  567. display: block;
  568. padding-left: 10rpx;
  569. }
  570. .paixuLineTbtopIconx{
  571. padding-bottom:24rpx;
  572. }
  573. .paixuLineTbtopIcons{
  574. padding-top: 8rpx;
  575. }
  576. .paixuLineTbBox{
  577. display: flex;
  578. flex-direction: column;
  579. justify-content: space-between;
  580. }
  581. .box{
  582. background: #F4F5F7;
  583. min-height: 100vh;
  584. }
  585. .sstopInput{
  586. width: 626rpx;
  587. height: 72rpx;
  588. background: #F4F5F7;
  589. border-radius: 36rpx;
  590. line-height: 72rpx;
  591. font-size: 28rpx;
  592. padding-left: 76rpx;
  593. }
  594. .sstop{
  595. position: relative;
  596. padding-top: 24rpx;
  597. padding-left: 24rpx;
  598. background: #ffffff;
  599. }
  600. .sstopimg{
  601. width: 40rpx;
  602. height: 40rpx;
  603. position: absolute;
  604. left: 44rpx;
  605. top: 40rpx;
  606. }
  607. .scroll-Y{
  608. background: #ffffff;
  609. width: 750rpx;
  610. }
  611. .goodsBox{
  612. // height: calc(100vh - 280rpx);
  613. // padding-bottom: 120rpx;
  614. }
  615. .classificationBox{
  616. display: flex;
  617. padding-bottom: 12rpx;
  618. }
  619. .classificationName{
  620. white-space: nowrap;
  621. font-size: 28rpx;
  622. color: #3C3C3C;
  623. line-height: 40rpx;
  624. padding:24rpx 24rpx 8rpx 24rpx;
  625. font-weight: 400;
  626. }
  627. .classificationNameActive{
  628. font-weight: 500 !important;
  629. /* color: #FF0000 ; */
  630. }
  631. .classificationHx{
  632. width: 40rpx;
  633. height: 4rpx;
  634. // background: #FF0000;
  635. margin: 0 auto;
  636. }
  637. .paixuBox{
  638. width: 750rpx;
  639. height: 72rpx;
  640. background: #FFFFFF;
  641. margin-top: 20rpx;
  642. display: flex;
  643. justify-content: space-around;
  644. border-bottom: 1px solid #EEEEEE;
  645. }
  646. .paixuLine{
  647. line-height: 37rpx;font-size: 26rpx;color: #666666;padding-top: 18rpx;
  648. display: flex;
  649. }
  650. .hotGoodsLine{
  651. margin-top: 30rpx;
  652. padding:0rpx 20rpx;
  653. background: #FFFFFF;
  654. border-radius: 16rpx;
  655. display: flex;
  656. }
  657. .hotGoodsLineImg{
  658. width: 208rpx;
  659. height: 194rpx;
  660. border-radius: 16rpx;
  661. border: 1px solid #EEEEEE;
  662. display: block;
  663. }
  664. .goodsName{
  665. font-size: 28rpx;
  666. font-family: PingFangSC-Regular, PingFang SC;
  667. font-weight: 400;
  668. color: #333333;
  669. line-height: 40rpx;
  670. text-overflow: -o-ellipsis-lastline;
  671. overflow: hidden;
  672. text-overflow: ellipsis;
  673. display: -webkit-box;
  674. -webkit-line-clamp: 2;
  675. line-clamp: 2;
  676. -webkit-box-orient: vertical;
  677. }
  678. .hotGoodsLineRIght{
  679. padding-left: 24rpx;
  680. }
  681. .goodsPrice{
  682. display: flex;
  683. padding-top: 10rpx;
  684. }
  685. .goodsPrice1{
  686. font-size: 24rpx;
  687. font-weight: 400;
  688. color: #FF0000;
  689. padding-top: 8rpx;
  690. }
  691. .goodsPrice2{
  692. font-size: 22rpx;
  693. font-weight: 400;
  694. color: #FF0000;
  695. padding-top: 10rpx;
  696. }
  697. .goodsPrice3{
  698. font-size: 32rpx;
  699. font-weight: 500;
  700. color: #FF0000;
  701. }
  702. .goodsPrice4{
  703. font-size: 24rpx;
  704. font-weight: 400;
  705. color: #999999;
  706. padding-top: 8rpx;
  707. text-decoration:line-through;
  708. padding-left: 10rpx;
  709. }
  710. .Sold{
  711. font-weight: 400;
  712. color: #999999;
  713. font-size: 24rpx;
  714. padding-top: 20rpx;
  715. line-height: 30rpx;
  716. height: 30rpx;
  717. }
  718. .authorizBox{
  719. width: 100vw;
  720. height: 100vh;
  721. background: rgba(0, 0, 0, 0.5);
  722. position: fixed;
  723. top: 0;
  724. left: 0;
  725. }
  726. .authorizCont{
  727. margin-top: 30vh;
  728. width: 564rpx;
  729. height: 408rpx;
  730. background: #FFFFFF;
  731. border-radius: 24rpx;
  732. margin-left: 93rpx;
  733. position: relative;
  734. }
  735. .authorizCloseImg{
  736. width: 62rpx;
  737. height: 62rpx;
  738. }
  739. .sqLogoBox{
  740. width: 180rpx;
  741. height: 180rpx;
  742. background: #FFFFFF;
  743. border-radius: 90rpx;
  744. text-align: center;
  745. position: absolute;
  746. top: -50rpx;
  747. left: 192rpx;
  748. }
  749. .authorizName{
  750. color: #333333;
  751. line-height: 42rpx;
  752. font-size: 30rpx;
  753. text-align: center;
  754. padding-top: 58rpx;
  755. }
  756. .authorizMs{
  757. color: #999999;
  758. line-height: 36rpx;
  759. font-size: 26rpx;
  760. width: 452rpx;
  761. padding-top: 24rpx;
  762. text-align: center;
  763. margin-left: 56rpx;
  764. }
  765. .authorizContbutton{
  766. width: 210rpx;
  767. height: 66rpx;
  768. background: #D53533;
  769. border-radius: 44rpx;
  770. line-height: 66rpx;
  771. text-align: center;
  772. font-size:30rpx;
  773. color: #FFFFFF;
  774. margin-left:40rpx;
  775. }
  776. .sqRefuse{
  777. width: 210rpx;
  778. height: 66rpx;
  779. border: 1px solid #eaeaea;
  780. line-height: 66rpx;
  781. border-radius: 36rpx;
  782. text-align: center;
  783. font-size:30rpx;
  784. margin-right:40rpx;
  785. color: #999999;
  786. }
  787. .sqLine{
  788. margin-top: 62rpx;
  789. display: flex;
  790. justify-content: space-between;
  791. }
  792. </style>