engineOil.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <template>
  2. <view class="content">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'机油'"></homenav>
  4. <view class="box">
  5. <view class="historyLine">
  6. <view class="historyLogoBox">
  7. <image :src="optdata.logo" mode="" class="historylinecarImg"></image>
  8. </view>
  9. <view>
  10. <view class="historylinecar">{{optdata.value}}</view>
  11. <view class="historyLineVin" v-if="optdata.isVin==1">
  12. <view class="vinms">VIN</view>
  13. <view class="vinNum">{{optdata.vin}}</view>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="cont">
  19. <view class="topBox">
  20. <view class="topLine" @click="goby">
  21. <image src="../../static/img/icon_baoyang.png" mode="" class="toplineImg"></image>
  22. <view class="topName">保养周期</view>
  23. </view>
  24. <view class="topsx"></view>
  25. <view class="topLine" @click="gopz">
  26. <image src="../../static/img/icon_cheliang.png" mode="" class="toplineImg"></image>
  27. <view class="topName">车辆配置</view>
  28. </view>
  29. </view>
  30. <view class="jiyouBox" v-if="loading">
  31. <view class="modelRemarkBox">
  32. <view class="modelRemarkLine" v-for="(item,index) in brandArr"
  33. @click="modelRemarkTab(item.id)" :class="{activeMr:modelRemarkNum==item.id}">{{item.name}}</view>
  34. </view>
  35. <view class="jiyouTop">
  36. <view class="jiyoutopTitle">机油推荐</view>
  37. <!-- <view class="jyzl">机油加注量:<span style="color: #FF4F00;">{{oilusage}}</span> </view> -->
  38. </view>
  39. <view class="jylineBox">
  40. <view class="jyline" v-for="(item,index) in MaintainPartList" @click="godetail(item)">
  41. <view class="jyimgBox">
  42. <image v-if="item.imgs.split(',')[0]" :src="item.imgs.split(',')[0]" mode="aspectFit" class="jyimg"></image>
  43. <image v-else src="../../static/img/noimg.png" mode="aspectFit" class="jyimg"></image>
  44. </view>
  45. <view class="jyName">
  46. <!-- <span class="best">最佳</span> -->
  47. <!-- <span class="jyNametxt">{{item.name}} </span>| -->
  48. {{item.specificationModel}}
  49. </view>
  50. <view class="ruleList">
  51. <view class="ruleListSpan">{{item.modelRemark}}</view>
  52. <!-- <view class="ruleListSpan" v-for="(v,i) in item.ruleList"><span style="">{{v.version}}:</span> {{v.versionvalue}}</view> -->
  53. </view>
  54. </view>
  55. </view>
  56. <nodata v-if="MaintainPartList.length==0"></nodata>
  57. </view>
  58. <view class="jiyouBox" v-if="loading">
  59. <view class="jiyouTop">
  60. <view class="jiyoutopTitle">原厂售后推荐</view>
  61. </view>
  62. <view class="salesLine">
  63. <view class="salesLeft">建议加注量</view>
  64. <view class="salesRight">{{oilusage}}</view>
  65. </view>
  66. <view class="salesLine">
  67. <view class="salesLeft">规格型号</view>
  68. <view class="salesRight">{{spec}}</view>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. </template>
  74. <script>
  75. import nodata from '../../components/nodata/nodata.vue'
  76. import homenav from "../../components/homenav/nav.vue"
  77. export default {
  78. components: {
  79. nodata,homenav
  80. },
  81. data() {
  82. return {
  83. optdata:'',
  84. MaintainPartList:[],
  85. oilusage:'',
  86. iStatusBarHeight:'',
  87. loading:false,
  88. spec:'',
  89. modelRemarkNum:"283915b2-ae34-4238-90aa-7be4be9815c8",
  90. oldMaintainPartList:'',
  91. brandArr:[
  92. {name:'漠驼',id:'283915b2-ae34-4238-90aa-7be4be9815c8'},
  93. {name:'领航',id:'3e7395a1-c10a-4df4-8639-34de044fd9cc'},
  94. {name:'领航100',id:'0ef3e44c-59c7-4911-bc68-8723a1d05c31'},
  95. {name:'领航氢洁',id:'e653bf0a-9885-4c25-a96d-986e4e285819'},
  96. ]
  97. }
  98. },
  99. onLoad(opt) {
  100. console.log(opt)
  101. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  102. this.optdata=opt;
  103. this.queryMaintainPartList()
  104. this.queryOilInfoByGroupID()
  105. },
  106. methods: {
  107. modelRemarkTab(id){
  108. this.modelRemarkNum=id
  109. this.queryMaintainPartList()
  110. /*
  111. var arr=[]
  112. this.oldMaintainPartList.forEach(item=>{
  113. var state=false
  114. if(item.brandId == id){
  115. state=true
  116. }
  117. if(state){
  118. arr.push(item)
  119. }
  120. })
  121. this.MaintainPartList=arr */
  122. //this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
  123. },
  124. queryMaintainPartList(){
  125. this.loading=false;
  126. uni.showLoading({ title: '加载中'});
  127. this.$http('partsByOpen/queryMaintainPartList', {
  128. groupId:this.optdata.id,
  129. componentCode:'015001',
  130. brandId:this.modelRemarkNum
  131. },'POST').then(res => {
  132. this.loading=true;
  133. uni.hideLoading();
  134. this.MaintainPartList=res.data
  135. //this.oldMaintainPartList=res.data
  136. //this.modelRemarkTab("283915b2-ae34-4238-90aa-7be4be9815c8")
  137. })
  138. },
  139. queryOilInfoByGroupID(){
  140. var that=this;
  141. this.$http('matchingByOpen/queryOilInfoByGroupID', {
  142. // mileage:'30000',
  143. groupId:this.optdata.id,
  144. },'POST').then(res => {
  145. var arr = res.data
  146. arr.forEach(item=>{
  147. if(item[0]=='机油'){
  148. that.oilusage=item[2]
  149. that.spec=item[1]
  150. }
  151. })
  152. console.log(that.oilusage)
  153. })
  154. },
  155. goby(){
  156. uni.navigateTo({
  157. url:'/pages/index/maintenance?nLevelID='+this.optdata.nLevelID+'&id='+this.optdata.id
  158. })
  159. },
  160. godetail(e){
  161. uni.navigateTo({
  162. url:'/pages/index/goodsDetail?id='+e.id
  163. })
  164. },
  165. gopz(){
  166. uni.navigateTo({
  167. url:'/pages/index/carConfiguration?nLevelID='+this.optdata.nLevelID
  168. })
  169. }
  170. }
  171. }
  172. </script>
  173. <style scoped>
  174. .salesLine{
  175. display: flex;
  176. font-size: 26rpx;
  177. line-height: 30rpx;
  178. padding: 20rpx 0;
  179. }
  180. .salesLeft{
  181. width: 200rpx;
  182. color: #999999;
  183. }
  184. .content {
  185. min-height: 100vh;
  186. background: #F4F5F7;
  187. }
  188. .jyimgBox{
  189. border: 1px solid #EEEEEE; width: 302rpx;border-radius: 10rpx;
  190. }
  191. .box {
  192. padding: 0 24rpx;
  193. background: #ffffff;
  194. }
  195. .historylinecarImg{
  196. width: 54rpx;
  197. height: 54rpx;
  198. }
  199. .historyLogoBox{
  200. display: flex;align-items: center;
  201. padding-right: 14rpx;
  202. }
  203. .historylinecar {
  204. font-weight: 500;
  205. font-size: 26rpx;
  206. color: #1A1A1A;
  207. line-height: 46rpx;
  208. width: 636rpx;
  209. }
  210. .historyLine {
  211. display: flex;
  212. padding: 30rpx 0;
  213. /* border-top: 1rpx solid #EEEEEE; */
  214. }
  215. .cont {
  216. padding: 30rpx 24rpx;
  217. }
  218. .toplineImg{
  219. width: 35rpx;
  220. height: 34rpx;
  221. }
  222. .topName{
  223. line-height: 34rpx;font-weight: 400;
  224. color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
  225. }
  226. .topBox{
  227. width: 702rpx;
  228. height: 98rpx;
  229. background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
  230. border-radius: 16rpx;
  231. display: flex;justify-content: center;
  232. }
  233. .topsx{
  234. width: 2rpx;background: #ffffff;
  235. margin-left: 85rpx;margin-right: 85rpx;
  236. height: 54rpx;margin-top: 22rpx;
  237. }
  238. .topLine{
  239. display: flex;padding-top: 34rpx;
  240. }
  241. .jiyouTop{
  242. display: flex;justify-content: space-between;
  243. }
  244. .jiyouBox{
  245. margin-top: 30rpx;border-radius: 16rpx;
  246. background: #ffffff;padding: 30rpx;
  247. }
  248. .jiyoutopTitle{
  249. font-weight: 500;font-size: 28rpx;
  250. color: #1A1A1A;
  251. line-height: 40rpx;
  252. }
  253. .jyzl{
  254. font-weight: 400;line-height: 40rpx;
  255. color: #666666;font-size: 24rpx;
  256. }
  257. .jyimg{
  258. width: 302rpx;
  259. height: 302rpx;
  260. border-radius: 10rpx;
  261. }
  262. .jyline{
  263. width: 302rpx;padding-top: 30rpx;
  264. }
  265. .jyName{
  266. font-weight: 400;font-size: 26rpx;
  267. color: #1A1A1A;
  268. line-height:36rpx ;
  269. /* overflow: hidden;
  270. text-overflow: ellipsis;
  271. display: -webkit-box;
  272. -webkit-box-orient: vertical;
  273. -webkit-line-clamp: 2; */
  274. padding-top: 10rpx;
  275. }
  276. .best{
  277. color: #FF4F00;border-radius: 6rpx;
  278. padding: 0 8rpx;border: 1px solid #FF4F00;
  279. }
  280. .jylineBox{
  281. display: flex;justify-content: space-between;flex-wrap: wrap;
  282. }
  283. .historyLineVin{
  284. display: flex;background: #ffffff;
  285. }
  286. .historyLineCar{
  287. display: flex;justify-content: space-between;
  288. }
  289. .vinNum{
  290. font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
  291. color: #999999;line-height: 30rpx;
  292. }
  293. .vinms{
  294. width: 38rpx;
  295. height: 26rpx;
  296. background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
  297. border-radius: 4rpx;
  298. text-align: center;
  299. line-height: 26rpx;
  300. font-weight: 600;
  301. color: #FFFFFF;
  302. font-size: 18rpx;
  303. margin-top: 2rpx;
  304. }
  305. .ruleListSpan{
  306. font-weight: 400;
  307. font-size: 24rpx;
  308. color: #999999;
  309. line-height: 36rpx;
  310. padding-right: 6rpx;
  311. padding-top: 4rpx;
  312. }
  313. .modelRemarkBox{
  314. display: flex;padding-bottom: 20rpx;
  315. }
  316. .modelRemarkLine{
  317. background: #eee;
  318. padding: 6rpx 20rpx;
  319. border-radius: 6rpx;
  320. margin-right: 20rpx;
  321. font-size: 26rpx;
  322. }
  323. .activeMr{
  324. background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
  325. color: #FFF;
  326. }
  327. </style>