my-product.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. <template>
  2. <view class="container product clearfix">
  3. <view class="superv-header">
  4. <view class="superv-header-click" v-if="!isSuperv">
  5. <view class="oltext" @click="supervClickFn">管理</view>
  6. <view class="ortext" @click="searchClickFn">筛选</view>
  7. </view>
  8. <view class="superv-header-checked" v-else>
  9. <view class="oltext" @click="isCheckedAll">
  10. <view class="checkbox iconfont" :class="[isAllChecked ?'icon-yixuanze':'icon-weixuanze']"></view>
  11. <view class="text">全选</view>
  12. </view>
  13. <view class="ortext" @click="closeSupervFn">完成</view>
  14. </view>
  15. </view>
  16. <view class="product-content">
  17. <view :class="{'tui-order-list':scrollTop >= 0}" class="clearfix">
  18. <!-- 空白页 -->
  19. <view class="empty-container" v-if="isEmpty">
  20. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
  21. <text class="error-text">暂无数据^_^</text>
  22. </view>
  23. <!-- 列表 -->
  24. <checkbox-group @change="buyChange" class="tui-group">
  25. <view class="tui-cart-cell tui-mtop" v-for="(item,index) in dataList" :key="index">
  26. <tui-swipe-actions :actions="item.actions" @click="handlerButton($event,item)" :params="item">
  27. <template v-slot:content>
  28. <view class="tui-goods-item">
  29. <view class="tui-goods-checkBox" v-if="isSuperv">
  30. <view class="checkbox iconfont" :class="[item.isChecked ?'icon-yixuanze':'icon-weixuanze']" @click="checkedSoperv(item)"></view>
  31. </view>
  32. <view class="tui-goods-image">
  33. <image :src="item.mainImage" class="tui-goods-img"/>
  34. </view>
  35. <view class="tui-goods-info" :style="{width:isSuperv ? '360rpx' : '420rpx'}">
  36. <view class="tui-goods-title">{{ item.name }}</view>
  37. <view class="tui-price-box">
  38. <view class="tui-goods-price">¥{{item.price1 | NumFormat}}</view>
  39. </view>
  40. <view class="tui-goods-pip">市场价:¥{{item.normalPrice | NumFormat}}</view>
  41. <view class="tui-goods-pip">分类:{{ item.typeName }}</view>
  42. </view>
  43. <view class="tui-goods-status">
  44. <view class="status-text" :style="{ color: verifyColorFilter(item.validFlag)}">
  45. {{ item.validFlag | verifyStatusFilter }}
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50. </tui-swipe-actions>
  51. </view>
  52. </checkbox-group>
  53. <!--加载loadding-->
  54. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  55. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  56. <!--加载loadding-->
  57. </view>
  58. </view>
  59. <tui-modal :show="modal" @click="handleClick" @cancel="hideMobel" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
  60. <!--右抽屉-->
  61. <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
  62. <view class="d-container clearfix" :style="{paddingTop:CustomBar+10+'px'}">
  63. <view class="d-label">商品名称:</view>
  64. <view class="d-input">
  65. <input class="input" type="text" value="" v-model="listQuery.name" placeholder="输入商品名称"/>
  66. </view>
  67. <view class="d-label">商品货号:</view>
  68. <view class="d-input">
  69. <input class="input" type="text" value="" v-model="listQuery.productCode" placeholder="输入商品货号"/>
  70. </view>
  71. <view class="d-label">状态:</view>
  72. <view class="d-input">
  73. <picker @change="bindPickerChange(1,$event)" :value="index" :range="statusActions" range-key="name">
  74. <input class="input" type="text" disabled="false" v-model="validFlagText" value="" placeholder="请选择审核状态"/>
  75. <text class="iconfont icon-xiangyou"></text>
  76. </picker>
  77. </view>
  78. <view class="d-label">主推商品:</view>
  79. <view class="d-input">
  80. <picker @change="bindPickerChange(2,$event)" :value="index" :range="recommendActions" range-key="name">
  81. <input class="input" type="text" disabled="false" v-model="featuredFlagText" value="" placeholder="请选择"/>
  82. <text class="iconfont icon-xiangyou"></text>
  83. </picker>
  84. </view>
  85. <view class="d-label">分类:</view>
  86. <view class="d-input">
  87. <picker @change="bindPickerChange(3,$event)" :value="index" :range="classificationFirstList" range-key="name">
  88. <input class="input" type="text" disabled="false" v-model="firstClassificationText" value="" placeholder="请选择一分类"/>
  89. <text class="iconfont icon-xiangyou"></text>
  90. </picker>
  91. </view>
  92. <view class="d-input">
  93. <picker @change="bindPickerChange(4,$event)" :value="index" :range="classificationTwoList" range-key="name">
  94. <input class="input" type="text" disabled="false" v-model="twoClassificationText" value="" placeholder="请选择二级分类"/>
  95. <text class="iconfont icon-xiangyou"></text>
  96. </picker>
  97. </view>
  98. <view class="d-input">
  99. <picker @change="bindPickerChange(5,$event)" :value="index" :range="classificationThreeList" range-key="name">
  100. <input class="input" type="text" disabled="false" v-model="threeClassificationText" value="" placeholder="请选择三级分类"/>
  101. <text class="iconfont icon-xiangyou"></text>
  102. </picker>
  103. </view>
  104. <view class="d-input btn">
  105. <view class="d-btn comfrim" @click="handSearchList">确定</view>
  106. <view class="d-btn clear" @click="handSearchClear">重置</view>
  107. </view>
  108. </view>
  109. </tui-drawer>
  110. <!-- 批量操作 -->
  111. <tui-bottom-popup :radius="false" :mask="false" :show="isSuperv">
  112. <view class="tui-popup-box clearfix">
  113. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
  114. <view class="tui-flex-1">
  115. <view class="tui-button" :class="isProductChecked ? 'active' : ''" @click="handleAllUnder()">批量下架</view>
  116. </view>
  117. </view>
  118. </view>
  119. </tui-bottom-popup>
  120. </view>
  121. </template>
  122. <script>
  123. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  124. import tuiNomore from "@/components/tui-components/nomore/nomore"
  125. import modalLayer from "@/components/modal-layer"
  126. import { mapState,mapMutations } from 'vuex'
  127. const defaultListQuery = {
  128. shopID:'',
  129. pageNum:1,
  130. pageSize:10,
  131. productCode:'',//货号
  132. name:'',//商品名称
  133. validFlag:'',//状态
  134. featuredFlag:'',//是否主推
  135. bigTypeID:0,//一级
  136. smallTypeID:0,//二级
  137. tinyTypeID:0//三级
  138. };
  139. export default{
  140. components: {
  141. tuiLoadmore,
  142. tuiNomore
  143. },
  144. data() {
  145. return{
  146. shopID:0,
  147. isSuperv:false,
  148. isProductChecked:false,
  149. validFlagText:'',
  150. featuredFlagText:'',
  151. firstClassificationText:'',
  152. twoClassificationText:'',
  153. threeClassificationText:'',
  154. recommendActions: [{name:'是',value:1},{name: '否',value:0}],
  155. statusActions: [
  156. {name:'全部',value:''},
  157. {name: '未审核',value:1},
  158. {name: '审核未通过',value:8},
  159. {name: '已上架',value:2},
  160. {name: '已下架',value:3},
  161. {name: '已冻结',value:10},
  162. {name: '已隐身',value:9},
  163. {name: '已删除',value:0},
  164. ],
  165. classificationFirstList:[],
  166. classificationTwoList:[],
  167. classificationThreeList:[],
  168. currents:0,
  169. userID:0,
  170. listQuery:Object.assign({}, defaultListQuery),
  171. dataList: [],
  172. btnoRderID: 0, //点击按钮传入的的订单ID
  173. scrollTop: 0,
  174. deteleType:'',
  175. skeletonShow: true,
  176. isEmpty: false,
  177. isDelete:false,
  178. isAllChecked:false,
  179. isModalLayer: false,
  180. loadding: false,
  181. pullUpOn: true,
  182. pullFlag: true,
  183. hasNextPage: false,
  184. navbarHeight:'',
  185. nomoreText: '上拉显示更多',
  186. contentModalText:'',//操作文字提示语句
  187. modal:false,
  188. rightDrawer: false,
  189. handlerProduct:{},//储存监听商品信息
  190. OperationType:'',//操作类型
  191. isCmcustomClass : 'left',
  192. featuredNum:0,
  193. productIds:'',//批量下架操作商品ID
  194. }
  195. },
  196. onLoad(option){
  197. switch(option.listType){
  198. case '0':
  199. this.listQuery.validFlag =''
  200. break;
  201. case '1':
  202. this.listQuery.validFlag = 2
  203. break;
  204. case '2':
  205. this.listQuery.validFlag = 3
  206. break;
  207. }
  208. this.$api.getComStorage('userInfo').then((resolve) =>{
  209. this.listQuery.shopID = this.shopID = resolve.shopID
  210. this.GetProductListInfo()
  211. this.GetPrimaryClassification()
  212. })
  213. },
  214. filters: {
  215. NumFormat:function(text) {//处理金额
  216. return Number(text).toFixed(2);
  217. },
  218. verifyStatusFilter: function(state){
  219. let stateText = '',
  220. stateTextObject={
  221. '2':'已上架',
  222. '3':'已下架',
  223. '1':'待审核',
  224. '8':'审核未通过',
  225. '9':'已隐身',
  226. '10':'已冻结',
  227. '0':'已删除'
  228. };
  229. Object.keys(stateTextObject).forEach(function(key) {
  230. if(key == state){
  231. stateText = stateTextObject[key]
  232. }
  233. });
  234. return stateText;
  235. },
  236. },
  237. computed: {
  238. ...mapState(['hasLogin','userInfo'])
  239. },
  240. methods:{
  241. ...mapMutations(['login','logout']),
  242. GetProductListInfo(){
  243. this.listQuery.pageNum = 1
  244. this.ShopService.GetSupplierPyProduct(this.listQuery).then(response =>{
  245. let data = response.data.productPage
  246. this.featuredNum = response.data.featuredNum
  247. this.hasNextPage = data.hasNextPage
  248. if(data.results && data.results.length > 0){
  249. this.isEmpty = false;
  250. this.dataList = data.results;
  251. this.handleDataList()
  252. if(this.hasNextPage){
  253. this.pullUpOn = false
  254. this.nomoreText = '上拉显示更多'
  255. }else{
  256. if(this.dataList.length < 5){
  257. this.pullUpOn = true
  258. }else{
  259. this.pullUpOn = false
  260. this.nomoreText = '已至底部'
  261. }
  262. }
  263. }else{
  264. this.dataList = []
  265. this.isEmpty = true
  266. this.pullUpOn = true
  267. }
  268. }).catch(error =>{
  269. this.$util.msg(error.msg,2000);
  270. })
  271. },
  272. GetOnReachBottomData(index){//上拉加载
  273. this.listQuery.pageNum += 1
  274. this.ShopService.GetSupplierPyProduct(this.listQuery).then(response =>{
  275. let data = response.data.productPage
  276. this.featuredNum = response.data.featuredNum
  277. this.hasNextPage = data.hasNextPage;
  278. this.dataList = this.dataList.concat(data.results)
  279. this.handleDataList()
  280. this.pullFlag = false;// 防上拉暴滑
  281. setTimeout(()=>{this.pullFlag = true;},500)
  282. if(this.hasNextPage){
  283. this.pullUpOn = false
  284. this.nomoreText = '上拉显示更多'
  285. }else{
  286. this.loadding = false
  287. this.pullUpOn = false
  288. this.nomoreText = '已至底部'
  289. }
  290. })
  291. },
  292. handleDataList(){//根据商品状态set不同的tabAction返回新的数据
  293. this.dataList.forEach(item =>{
  294. if(item.validFlag === '0' || item.validFlag === '3' || item.validFlag === '8' || item.validFlag === '9'){
  295. item.actions = [
  296. {name: '无操作',color: '#fff',fontsize: 26,width: 50,background: '#e1e1e1'},
  297. ]
  298. }else if(item.validFlag === '1' || item.validFlag === '10'){
  299. item.actions = [
  300. {name: '查看详情',color: '#fff',fontsize: 26,width: 50,background: '#f9a94b'},
  301. ]
  302. }else if(item.validFlag === '2'){
  303. if(item.featuredFlag ==='1'){
  304. item.actions = [
  305. {name: '查看详情',color: '#fff',fontsize: 26,width: 50,background: '#f9a94b'},
  306. {name: '删除主页推荐',color: '#fff',fontsize: 26,width: 50,background: '#ff7a51'},
  307. {name: '下架',color: '#fff',fontsize: 26,width: 50,background: '#fea785'},
  308. ]
  309. }else{
  310. item.actions = [
  311. {name: '查看详情',color: '#fff',fontsize: 26,width: 50,background: '#f9a94b'},
  312. {name: '添加主页推荐',color: '#fff',fontsize: 26,width: 50,background: '#ff7a51'},
  313. {name: '下架',color: '#fff',fontsize: 26,width: 50,background: '#fea785'},
  314. ]
  315. }
  316. }
  317. })
  318. },
  319. handSearchList(){//搜索
  320. this.GetProductListInfo()
  321. this.leftDrawer = false;
  322. this.rightDrawer = false;
  323. },
  324. handSearchClear(){//重置搜索条件
  325. this.listQuery = Object.assign({}, defaultListQuery)
  326. this.listQuery.shopID = this.shopID
  327. this.validFlagText='';
  328. this.featuredFlagText='';
  329. this.firstClassificationText='';
  330. this.twoClassificationText='';
  331. this.threeClassificationText='';
  332. this.classificationTwoList = [];
  333. this.classificationThreeList = [];
  334. },
  335. handlerButton(e,item){//监听侧滑按钮点击事件
  336. if(item.validFlag === '0' || item.validFlag === '3' || item.validFlag === '8' || item.validFlag === '9'){
  337. if(e.index == 0){
  338. return
  339. }
  340. }else if(item.validFlag === '1' || item.validFlag === '10'){
  341. if(e.index == 0){
  342. this.$api.navigateTo(`/pages/goods/product?id=${item.productID}`)
  343. }
  344. }else if(item.validFlag === '2'){
  345. switch(e.index){
  346. case 0:
  347. this.$api.navigateTo(`/pages/goods/product?id=${item.productID}`)
  348. break;
  349. case 1:
  350. if(item.featuredFlag ==='1'){
  351. this.handleDeleteShopRemb(item)
  352. }else{
  353. this.handleAddShopRemb(item)
  354. }
  355. break;
  356. case 2:
  357. this.handleUnder(item)
  358. }
  359. }
  360. },
  361. handleAddShopRemb(item){//添加主页推荐
  362. console.log(this.featuredNum);
  363. let num = 4- this.featuredNum;
  364. console.log(num);
  365. this.OperationType = 'add'
  366. this.handlerProduct = item
  367. this.modal = true;
  368. this.contentModalText = `总共能添加4个主推商品,您还能添加${num}个确定将该商品添加为主推商品吗?`;
  369. },
  370. handleDeleteShopRemb(item){//删除主页推荐
  371. this.OperationType = 'delete'
  372. this.handlerProduct = item
  373. this.modal = true;
  374. this.contentModalText = '是否把该商品从主推商品中删除?';
  375. },
  376. handleUnder(item){//下架操作
  377. this.OperationType = 'under'
  378. this.handlerProduct = item
  379. this.modal = true;
  380. this.contentModalText = '确定下架该商品吗?';
  381. },
  382. handleAllUnder(){//批量下架操作
  383. let isValidFlag = false
  384. if(this.isProductChecked){
  385. this.dataList.forEach(el => {
  386. if(el.isChecked) {
  387. if(el.validFlag != 2){
  388. isValidFlag = true;
  389. }else{
  390. isValidFlag = false
  391. this.productIds += el.productID+','
  392. }
  393. }
  394. })
  395. if(isValidFlag){
  396. this.$util.modal('','部分选中的商品暂未上架,不能进行下架操作','确定','',false,() =>{})
  397. }else{
  398. this.OperationType = 'allunder'
  399. this.modal = true;
  400. this.contentModalText = '确定下架选中的商品吗?';
  401. }
  402. }else{
  403. return;
  404. }
  405. },
  406. handleClick(e) {//弹窗提示用户操作
  407. if(e.index == 1){
  408. switch(this.OperationType){
  409. case 'delete'://删除主页推荐
  410. this.SupplierDeleteSwitchFeatured(this.handlerProduct)
  411. break;
  412. case 'add'://添加主页推荐
  413. this.SupplierAddSwitchFeatured(this.handlerProduct)
  414. break;
  415. case 'under'://下架商品
  416. this.SupplierSoldOutProduct(this.handlerProduct)
  417. break;
  418. case 'allunder'://批量下架
  419. this.SupplierAllSoldOutProduct(this.productIds)
  420. break;
  421. }
  422. }
  423. this.modal = false;
  424. },
  425. SupplierDeleteSwitchFeatured(item){//操作删除主页推荐
  426. this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productID,featuredFlag:0}).then(response =>{
  427. this.$util.msg('删除成功',2000,true,'success');
  428. setTimeout(() => {
  429. this.GetProductListInfo()
  430. },2000)
  431. }).catch(error =>{
  432. this.$util.msg(error.msg,2000)
  433. })
  434. },
  435. SupplierAddSwitchFeatured(item){//操作添加主页推荐
  436. this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productID,featuredFlag:1}).then(response =>{
  437. this.$util.msg('添加成功',2000,true,'success');
  438. setTimeout(() => {
  439. this.GetProductListInfo()
  440. },2000)
  441. }).catch(error =>{
  442. this.$util.msg(error.msg,2000)
  443. })
  444. },
  445. SupplierSoldOutProduct(item){//操作下架商品
  446. this.ShopService.SupplierSoldOutProduct({productIds:item.productID}).then(response =>{
  447. this.$util.msg('下架成功',2000,true,'success');
  448. setTimeout(() => {
  449. this.GetProductListInfo()
  450. },2000)
  451. }).catch(error =>{
  452. this.$util.msg(error.msg,2000)
  453. })
  454. },
  455. SupplierAllSoldOutProduct(ids){//操作批量下架商品
  456. this.ShopService.SupplierSoldOutProduct({productIds:ids}).then(response =>{
  457. this.$util.msg('下架成功',2000,true,'success');
  458. setTimeout(() => {
  459. this.GetProductListInfo()
  460. },2000)
  461. }).catch(error =>{
  462. this.$util.msg(error.msg,2000)
  463. })
  464. },
  465. bindPickerChange: function(type,e) {//选择筛选条件
  466. switch(type){
  467. case 1:
  468. this.validFlagText = this.statusActions[e.target.value].name
  469. this.listQuery.validFlag = this.statusActions[e.target.value].value
  470. break;
  471. case 2:
  472. this.featuredFlagText = this.recommendActions[e.target.value].name
  473. this.listQuery.featuredFlag = this.recommendActions[e.target.value].value
  474. break;
  475. case 3:
  476. this.firstClassificationText = this.classificationFirstList[e.target.value].name
  477. this.listQuery.bigTypeID = this.classificationFirstList[e.target.value].value
  478. this.GetPrimarySecondaryClassification(this.listQuery.bigTypeID)
  479. this.twoClassificationText = ''
  480. this.threeClassificationText=''
  481. break;
  482. case 4:
  483. if(this.listQuery.bigTypeID == 0){
  484. this.$util.msg('请先选择一级分类',2000)
  485. return
  486. }
  487. this.twoClassificationText = this.classificationTwoList[e.target.value].name
  488. this.listQuery.smallTypeID = this.classificationTwoList[e.target.value].value
  489. this.GetPrimaryThreeLevelClassification(this.listQuery.smallTypeID)
  490. break;
  491. case 5:
  492. if(this.listQuery.smallTypeID == 0){
  493. this.$util.msg('请先选择二级分类',2000)
  494. return
  495. }
  496. this.threeClassificationText = this.classificationThreeList[e.target.value].name
  497. this.listQuery.tinyTypeID = this.classificationThreeList[e.target.value].value
  498. break;
  499. }
  500. },
  501. GetPrimaryClassification(){//获取筛选条件一级分类
  502. this.ShopService.GetPrimaryClassification().then(response =>{
  503. const data = response.data
  504. data.forEach(item =>{
  505. let _obj = {name:item.name,value:item.bigTypeID}
  506. this.classificationFirstList.push(_obj)
  507. })
  508. }).catch(error =>{
  509. this.$util.msg(error.msg,2000)
  510. })
  511. },
  512. GetPrimarySecondaryClassification(value){//获取筛选条件二级分类
  513. this.classificationTwoList = []
  514. this.ShopService.GetPrimarySecondaryClassification({bigTypeId:value}).then(response =>{
  515. const data = response.data
  516. data.forEach(item =>{
  517. let _obj = {name:item.name,value:item.smallTypeID}
  518. this.classificationTwoList.push(_obj)
  519. })
  520. }).catch(error =>{
  521. this.$util.msg(error.msg,2000)
  522. })
  523. },
  524. GetPrimaryThreeLevelClassification(value){//获取筛选条件三级分类
  525. this.classificationThreeList = []
  526. this.ShopService.GetPrimaryThreeLevelClassification({smallTypeId:value}).then(response =>{
  527. const data = response.data
  528. data.forEach(item =>{
  529. let _obj = {name:item.name,value:item.tinyTypeID}
  530. this.classificationThreeList.push(_obj)
  531. })
  532. }).catch(error =>{
  533. this.$util.msg(error.msg,2000)
  534. })
  535. },
  536. hideMobel(){
  537. this.modal = false;
  538. },
  539. updateCheckAllBtn() {//勾选单个判断全选
  540. let goodsCheckedLength = 0
  541. this.dataList.forEach(item => {
  542. if(item.isChecked) { goodsCheckedLength++; }
  543. })
  544. this.isAllChecked = goodsCheckedLength === this.dataList.length;
  545. if(goodsCheckedLength>0){
  546. this.isProductChecked = true
  547. }else{
  548. this.isProductChecked = false
  549. }
  550. },
  551. updateBothCheckBtn() {//全选勾选判断
  552. this.dataList.forEach((item)=>{
  553. item.isChecked = this.isAllChecked
  554. })
  555. },
  556. isCheckedAll(){//全选
  557. this.isAllChecked = !this.isAllChecked
  558. if(this.isAllChecked){
  559. this.isProductChecked = true
  560. }else{
  561. this.isProductChecked = false
  562. }
  563. this.updateBothCheckBtn()
  564. },
  565. checkedSoperv(item){//选择
  566. item.isChecked = !item.isChecked
  567. this.updateCheckAllBtn()
  568. },
  569. supervClickFn(){//管理全选
  570. this.isSuperv = true
  571. },
  572. closeSupervFn(){
  573. this.isSuperv = false
  574. },
  575. searchClickFn() {//弹出抽屉
  576. this.rightDrawer = true;
  577. },
  578. closeDrawer(e) {//关闭抽屉
  579. this.leftDrawer = false;
  580. this.rightDrawer = false;
  581. },
  582. orderPriceToFixed (n){
  583. let price ='';
  584. price = Number(n).toFixed(2);
  585. return price
  586. },
  587. verifyColorFilter: function(state){
  588. let stateColor = '',
  589. stateColorObject={
  590. '2':'#1890f9',
  591. '1':'#f9a94b',
  592. '0':'#FFB12A',
  593. '3':'#627386',
  594. '8':'#FF2A2A',
  595. '9':'#f94b4b'
  596. };
  597. Object.keys(stateColorObject).forEach(function(key){
  598. if(key == state){
  599. stateColor = stateColorObject[key]
  600. }
  601. });
  602. return stateColor;
  603. },
  604. },
  605. onPageScroll(e){//实时获取到滚动的值
  606. if(e.scrollTop>30){
  607. this.isCmcustomClass = 'fiexd'
  608. }else{
  609. this.isCmcustomClass = 'left'
  610. }
  611. },
  612. onReachBottom() {
  613. if(this.hasNextPage){
  614. this.loadding = true
  615. this.pullUpOn = true
  616. this.GetOnReachBottomData()
  617. }
  618. },
  619. onPullDownRefresh() {
  620. setTimeout(() => {
  621. this.listQuery.pageNum = 1
  622. uni.stopPullDownRefresh()
  623. }, 200)
  624. },
  625. onShow(){
  626. }
  627. }
  628. </script>
  629. <style lang="scss">
  630. @import "@/uni.scss";
  631. page{
  632. background:#FFF;
  633. }
  634. .superv-header{
  635. width: 100%;
  636. height: 80rpx;
  637. background-color: #F7F7F7;
  638. line-height: 80rpx;
  639. position: fixed;
  640. top: 0;
  641. left: 0;
  642. box-sizing: border-box;
  643. padding: 0 24rpx;
  644. z-index: 999;
  645. .superv-header-click{
  646. width: 100%;
  647. height: 80rpx;
  648. font-size: $font-size-30;
  649. .oltext{
  650. width: 120rpx;
  651. float: left;
  652. color: #666666;
  653. }
  654. .ortext{
  655. width: 120rpx;
  656. float: right;
  657. color: $color-system;
  658. text-align: right;
  659. }
  660. }
  661. .superv-header-checked{
  662. width: 100%;
  663. height: 80rpx;
  664. font-size: $font-size-30;
  665. .oltext{
  666. width: 120rpx;
  667. float: left;
  668. color: #666666;
  669. display: flex;
  670. margin-left: 10rpx;
  671. .checkbox{
  672. display: flex;
  673. margin: 0;
  674. padding: 0;
  675. display: flex;
  676. flex-direction: column;
  677. align-items: center;
  678. box-sizing: border-box;
  679. text-align: center;
  680. text-decoration: none;
  681. border-radius: 0;
  682. -webkit-tap-highlight-color: transparent;
  683. overflow: hidden;
  684. font-size: 34rpx;
  685. color:$color-system;
  686. line-height: 80rpx;
  687. }
  688. .text{
  689. float: left;
  690. line-height: 80rpx;
  691. margin-left: 15rpx;
  692. }
  693. }
  694. .ortext{
  695. width: 120rpx;
  696. float: right;
  697. color: $color-system;
  698. text-align: right;
  699. }
  700. }
  701. }
  702. .d-container {
  703. width: 560rpx;
  704. padding: 80rpx 30rpx;
  705. .d-title{
  706. width: 100%;
  707. height:80rpx;
  708. line-height: 80rpx;
  709. text-align: center;
  710. color: #4688fa;
  711. font-size: $font-size-32;
  712. float: left;
  713. }
  714. .d-time{
  715. width: 100%;
  716. height: 70rpx;
  717. float: left;
  718. box-sizing: border-box;
  719. padding: 0 10rpx;
  720. border: 1px solid rgba(0,0,0,0.2);
  721. border-radius: 4rpx;
  722. margin-bottom: 30rpx;
  723. .iconfont{
  724. width:70rpx;
  725. height: 60rpx;
  726. display: block;
  727. float: left;
  728. font-size: 50rpx;
  729. color: #666666;
  730. line-height: 70rpx;
  731. text-align: left;
  732. }
  733. .input{
  734. width: 220rpx;
  735. height: 70rpx;
  736. line-height: 70rpx;
  737. float: left;
  738. box-sizing: border-box;
  739. font-size: $font-size-24;
  740. color: #333333;
  741. padding: 0 10rpx;
  742. }
  743. }
  744. .d-label{
  745. width: 100%;
  746. height: 44rpx;
  747. line-height: 44rpx;
  748. text-align: left;
  749. color: #666666;
  750. font-size: $font-size-26;
  751. float: left;
  752. }
  753. .d-input{
  754. width: 100%;
  755. height: 70rpx;
  756. float: left;
  757. box-sizing: border-box;
  758. padding: 0 10rpx;
  759. border: 1px solid rgba(0,0,0,0.2);
  760. border-radius: 4rpx;
  761. margin-bottom: 30rpx;
  762. position: relative;
  763. &.btn{
  764. border: none;
  765. margin-top: 40rpx;
  766. }
  767. .input{
  768. width: 100%;
  769. height: 70rpx;
  770. line-height: 70rpx;
  771. float: left;
  772. box-sizing: border-box;
  773. font-size: $font-size-24;
  774. color: #333333;
  775. padding: 0 10rpx;
  776. padding-right: 68rpx;
  777. }
  778. .iconfont{
  779. width: 50rpx;
  780. height: 68rpx;
  781. display: block;
  782. line-height: 68rpx;
  783. text-align: center;
  784. font-size: 30rpx;
  785. color: #999999;
  786. position: absolute;
  787. right: 0;
  788. top: 0;
  789. }
  790. .d-btn{
  791. width: 210rpx;
  792. height: 84rpx;
  793. border-radius: 42rpx;
  794. background: $btn-confirm;
  795. line-height: 84rpx;
  796. text-align: center;
  797. font-size: $font-size-26;
  798. color: #FFFFFF;
  799. float: right;
  800. &.comfrim{
  801. background: $btn-confirm;
  802. margin-left: 20rpx;
  803. }
  804. &.clear{
  805. background: #e1e1e1;
  806. }
  807. }
  808. }
  809. }
  810. .tui-header {
  811. width: 100%;
  812. font-size: 16px;
  813. font-weight: 500;
  814. height: 32px;
  815. display: flex;
  816. align-items: center;
  817. justify-content: center;
  818. position: relative;
  819. padding: 0 40rpx;
  820. }
  821. .header-sit{
  822. width:100%;
  823. box-sizing: border-box;
  824. height: 80rpx;
  825. line-height: 80rpx;
  826. box-sizing: border-box;
  827. padding:0 40rpx;
  828. text-align: left;
  829. font-size: $font-size-40;
  830. color: #FFFFFF;
  831. font-weight: 600;
  832. font-family: '正楷';
  833. margin-top: 30rpx;
  834. .iconfont{
  835. font-size: 42rpx;
  836. margin-left: 30rpx;
  837. }
  838. }
  839. .mine{
  840. width: 100%;
  841. height: 100%;
  842. position:relative;
  843. }
  844. .product-content{
  845. width: 100%;
  846. height: auto;
  847. position: relative;
  848. padding:0;
  849. padding-top: 80rpx;
  850. box-sizing: border-box;
  851. .header-tabs{
  852. width: 100%;
  853. height: auto;
  854. margin-bottom: 40rpx;
  855. padding: 20rpx;
  856. border-radius: 20rpx;
  857. background:#4688fa;
  858. box-sizing: border-box;
  859. &.day{
  860. background:#FFFFFF;
  861. padding:40rpx 20rpx;
  862. box-shadow:0px 3px 6px rgba(0,0,0,0.2);
  863. }
  864. .title{
  865. font-size: $font-size-36;
  866. line-height: 60rpx;
  867. color: #FFF;
  868. font-weight: bold;
  869. margin-bottom: 20rpx;
  870. }
  871. .main{
  872. width: 100%;
  873. height: 110rpx;
  874. .main-item{
  875. float: left;
  876. width:20%;
  877. text-align: center;
  878. color: #FFFFFF;
  879. box-sizing: border-box;
  880. &.active{
  881. .iconfont{
  882. color: #576efa;
  883. }
  884. .text{
  885. font-weight: bold;
  886. color:#576efa ;
  887. font-size: $font-size-28;
  888. }
  889. }
  890. .text{
  891. width: 100%;
  892. height:60rpx;
  893. line-height: 60rpx;
  894. display: block;
  895. float: left;
  896. font-size:$font-size-24;
  897. color: #666666;
  898. text-align: center;
  899. &.nm{
  900. color: #222222;
  901. height:40rpx;
  902. line-height: 40rpx;
  903. font-size: $font-size-32;
  904. font-weight: bold;
  905. }
  906. }
  907. .iconfont{
  908. font-size:50rpx;
  909. color: #7aa5fa ;
  910. position: relative;
  911. .badg{
  912. padding: 0 10rpx;
  913. height: 30rpx;
  914. display: inline-block;
  915. font-size: $font-size-24;
  916. text-align: center;
  917. line-height: 30rpx;
  918. background-color: #ff4759;
  919. color: #FFF;
  920. position: absolute;
  921. top: -15rpx;
  922. right:20rpx;
  923. border-radius: 15rpx;
  924. }
  925. }
  926. }
  927. }
  928. }
  929. .tui-header-btm {
  930. width: 100%;
  931. padding: 0 30rpx;
  932. box-sizing: border-box;
  933. display: flex;
  934. align-items: center;
  935. justify-content: space-between;
  936. color: #fff;
  937. }
  938. .tui-btm-item {
  939. flex: 1;
  940. display: flex;
  941. flex-direction: column;
  942. align-items: center;
  943. justify-content: center;
  944. }
  945. .tui-btm-num {
  946. font-size: 32rpx;
  947. font-weight: 600;
  948. position: relative;
  949. }
  950. .tui-btm-text {
  951. font-size: 24rpx;
  952. opacity: 0.85;
  953. padding-top: 4rpx;
  954. }
  955. }
  956. .tui-goods-item {
  957. display: flex;
  958. padding: 30rpx 20rpx;
  959. box-sizing: border-box;
  960. border-bottom: 1px solid #EBEBEB;
  961. position: relative;
  962. }
  963. .tui-goods-checkBox{
  964. display: flex;
  965. align-items: center;
  966. margin: 0 15rpx;
  967. .checkbox{
  968. display: flex;
  969. margin: 0;
  970. padding: 0;
  971. display: flex;
  972. flex-direction: column;
  973. align-items: center;
  974. box-sizing: border-box;
  975. text-align: center;
  976. text-decoration: none;
  977. border-radius: 0;
  978. -webkit-tap-highlight-color: transparent;
  979. overflow: hidden;
  980. background-color:#FFFFFF;
  981. font-size: 36rpx;
  982. color:$color-system;
  983. }
  984. .text{
  985. font-size: $font-size-24;
  986. margin-left: 10rpx;
  987. }
  988. }
  989. .tui-goods-image{
  990. width: 180rpx;
  991. height: 180rpx !important;
  992. border-radius: 12rpx;
  993. .tui-goods-img {
  994. width: 180rpx;
  995. height: 180rpx !important;
  996. border-radius: 12rpx;
  997. flex-shrink: 0;
  998. display: block;
  999. }
  1000. }
  1001. .tui-goods-info {
  1002. padding-left: 20rpx;
  1003. display: flex;
  1004. flex-direction: column;
  1005. align-items: flex-start;
  1006. justify-content: space-between;
  1007. box-sizing: border-box;
  1008. overflow: hidden;
  1009. position: relative;
  1010. }
  1011. .tui-goods-status{
  1012. width: 160rpx;
  1013. position: absolute;
  1014. right: 0;
  1015. .status-text{
  1016. font-size: $font-size-24;
  1017. line-height: 44rpx;
  1018. text-align: center;
  1019. color: #666666;
  1020. }
  1021. }
  1022. .tui-goods-title {
  1023. white-space: normal;
  1024. word-break: break-all;
  1025. overflow: hidden;
  1026. text-overflow: ellipsis;
  1027. display: -webkit-box;
  1028. -webkit-box-orient: vertical;
  1029. -webkit-line-clamp: 2;
  1030. font-size: 26rpx;
  1031. color: #333;
  1032. line-height: 44rpx;
  1033. }
  1034. .tui-goods-pip{
  1035. white-space: normal;
  1036. word-break: break-all;
  1037. overflow: hidden;
  1038. text-overflow: ellipsis;
  1039. display: -webkit-box;
  1040. -webkit-box-orient: vertical;
  1041. -webkit-line-clamp: 2;
  1042. font-size: 24rpx;
  1043. color: #999;
  1044. line-height: 44rpx;
  1045. }
  1046. .tui-goods-ediet{
  1047. width: 60rpx;
  1048. height: 60rpx;
  1049. background: linear-gradient(90deg,rgba(122,165,250,1) 0%,rgba(87,110,250,1) 100%);
  1050. border-radius: 50%;
  1051. line-height: 60rpx;
  1052. text-align: center;
  1053. position: absolute;
  1054. right: 0;
  1055. top: 50%;
  1056. .icon-bianji1 {
  1057. flex-shrink: 0;
  1058. display: flex;
  1059. align-items: center;
  1060. justify-content: center;
  1061. color: #FFFFFF;
  1062. font-size: 24rpx;
  1063. }
  1064. }
  1065. .tui-goods-model {
  1066. max-width: 100%;
  1067. color: #FFFFFF;
  1068. background: #4688fa;
  1069. border-radius: 40rpx;
  1070. display: flex;
  1071. align-items: center;
  1072. justify-content: space-between;
  1073. padding: 0 20rpx;
  1074. box-sizing: border-box;
  1075. margin-top: 10rpx;
  1076. }
  1077. .tui-model-text {
  1078. max-width: 100%;
  1079. transform: scale(0.9);
  1080. transform-origin: 0 center;
  1081. font-size: 24rpx;
  1082. line-height: 40rpx;
  1083. white-space: nowrap;
  1084. overflow: hidden;
  1085. text-overflow: ellipsis;
  1086. }
  1087. .tui-price-box {
  1088. width: 100%;
  1089. display: flex;
  1090. align-items: flex-end;
  1091. justify-content: space-between;
  1092. }
  1093. .tui-goods-price {
  1094. font-size: $font-size-28;
  1095. font-weight: 500;
  1096. color: #FF201F;
  1097. }
  1098. .tui-popup-box {
  1099. position: relative;
  1100. box-sizing: border-box;
  1101. min-height: 200rpx;
  1102. padding:6rpx 24rpx;
  1103. }
  1104. .tui-popup-btn {
  1105. width: 100%;
  1106. height: auto;
  1107. float: left;
  1108. box-sizing: border-box;
  1109. padding: 0 75rpx;
  1110. margin-top: 30rpx;
  1111. .tui-button{
  1112. width: 600rpx;
  1113. height: 88rpx;
  1114. background: #e1e1e1;
  1115. line-height: 88rpx;
  1116. text-align: center;
  1117. color: #FFFFFF;
  1118. font-size: $font-size-28;
  1119. border-radius: 44rpx;
  1120. &.active{
  1121. background: $btn-confirm;
  1122. }
  1123. }
  1124. }
  1125. </style>