byItem.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  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="title">机油推荐</view>
  19. <view class="lineBox flex">
  20. <view class="line" @click="goEngineOil">
  21. <view class="lineTitle">机油</view>
  22. <view class="lineEnglish">Engine Oil</view>
  23. <view class="lineImgbox">
  24. <image src="../../static/img/icon_jiyou.png" mode="" class="lineImg1"></image>
  25. </view>
  26. </view>
  27. <view class="line" @click="goGearboxOil">
  28. <view class="lineTitle">变速箱油</view>
  29. <view class="lineEnglish">Gearbox Oil</view>
  30. <view class="lineImgbox">
  31. <image src="../../static/img/icon_biansuxiang.png" mode="" class="lineImg2"></image>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="lineBox flex" style="margin-top: 20rpx;">
  36. <view class="line" @click="godifferential">
  37. <view class="lineTitle">分动箱差速器</view>
  38. <view class="lineEnglish">Transfer case differential </view>
  39. <view class="lineImgbox">
  40. <image src="../../static/img/icon_jiyou.png" mode="" class="lineImg1"></image>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- <picker-view v-if="visible" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
  45. <picker-view-column>
  46. <view class="item" v-for="(item,index) in engineList" :key="index">{{item.engineModel}}</view>
  47. </picker-view-column>
  48. </picker-view> -->
  49. <uni-popup ref="popup" type="bottom" background-color="#fff">
  50. <view class="popupTitle">请选择发动机</view>
  51. <view style="popupLineBox">
  52. <view @click="ckengin(item)" class="popupLine" v-for="(item,index) in engineList">{{item.engineModel}}</view>
  53. </view>
  54. </uni-popup>
  55. </view>
  56. </template>
  57. <script>
  58. import homenav from "../../components/homenav/nav.vue"
  59. export default {
  60. components: {
  61. homenav
  62. },
  63. data() {
  64. return {
  65. optdata:'',
  66. isVin:'',
  67. vin:'',
  68. scarid:'',
  69. iStatusBarHeight:'',
  70. engineList:'',
  71. visible:false,
  72. indicatorStyle: `height: 50px;`
  73. }
  74. },
  75. onLoad(opt) {
  76. console.log(opt);
  77. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  78. this.optdata=opt;
  79. if(opt.scarid){
  80. this.scarid=opt.scarid;
  81. this.queryCarModelGroupInfo()
  82. }else{
  83. if(opt.isVin==1){
  84. this.isVin=1;
  85. this.vin=opt.vin
  86. }
  87. this.saveQueryHistory()
  88. }
  89. this.queryEnginemodel()
  90. },
  91. methods: {
  92. bindChange(){
  93. },
  94. queryEnginemodel(){
  95. this.$http('matchingByOpen/queryEnginemodel', {
  96. ids:this.optdata.id,
  97. },'POST').then(res => {
  98. this.engineList=res.data
  99. })
  100. },
  101. queryCarModelGroupInfo(){
  102. uni.showLoading({ title: '加载中'});
  103. this.$http('matchingByOpen/queryCarModelGroupInfo', {
  104. id:this.scarid,
  105. },'POST').then(res => {
  106. uni.hideLoading();
  107. var data={
  108. value:res.data.value,
  109. id:res.data.id,
  110. nLevelID:res.data.carModelInfo.nLevelID,
  111. logo:res.data.carModelInfo.logo,
  112. }
  113. this.optdata=data;
  114. this.saveQueryHistory()
  115. })
  116. },
  117. saveQueryHistory(){
  118. this.$http2('saveQueryHistory', {
  119. nLevelID:this.optdata.nLevelID,
  120. logo:this.optdata.logo,
  121. title:this.optdata.value,
  122. groupId:this.optdata.id,
  123. isVin:this.isVin,
  124. vin:this.vin
  125. },'POST').then(res => {
  126. })
  127. },
  128. ckengin(item){
  129. console.log(item)
  130. uni.navigateTo({
  131. url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+item.ids+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
  132. })
  133. },
  134. goEngineOil(){
  135. if(this.engineList.length>1){
  136. this.$refs.popup.open()
  137. }else{
  138. uni.navigateTo({
  139. url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+this.optdata.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
  140. })
  141. }
  142. },
  143. goGearboxOil(){
  144. uni.navigateTo({
  145. url:'/pages/index/gearboxOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+this.optdata.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
  146. })
  147. },
  148. godifferential(){
  149. uni.navigateTo({
  150. url:'/pages/index/differential?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+this.optdata.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
  151. })
  152. }
  153. }
  154. }
  155. </script>
  156. <style scoped>
  157. .content{
  158. min-height: 100vh;
  159. background: #F4F5F7;
  160. }
  161. .box{
  162. padding: 0 24rpx;
  163. background: #ffffff;
  164. }
  165. .historylinecarImg{
  166. width: 54rpx;
  167. height: 54rpx;
  168. }
  169. .historyLogoBox{
  170. display: flex;align-items: center;
  171. padding-right: 14rpx;
  172. }
  173. .historylinecar{
  174. font-weight: 500;font-size: 26rpx;
  175. color: #1A1A1A;
  176. line-height: 46rpx;width: 636rpx;
  177. }
  178. .historyLine{
  179. display: flex;
  180. padding: 30rpx 0;
  181. }
  182. .title{
  183. font-weight: 500;font-size: 28rpx;
  184. color: #1A1A1A;padding: 30rpx 24rpx;
  185. line-height: 40rpx;
  186. }
  187. .lineBox{
  188. padding: 0 24rpx;
  189. }
  190. .line{
  191. width: 332rpx;
  192. height: 206rpx;
  193. background: #FFFFFF;
  194. border-radius: 16rpx;
  195. }
  196. .lineTitle{
  197. font-weight: 500;font-size: 28rpx;padding-top: 32rpx;
  198. color: #1A1A1A;padding-left: 30rpx;
  199. line-height: 40rpx;
  200. }
  201. .lineEnglish{
  202. font-weight: 400;font-size: 24rpx;
  203. color: #999999;padding-left: 30rpx;
  204. line-height: 34rpx;padding-top: 10rpx;
  205. }
  206. .lineImg1{
  207. width: 82rpx;height: 92rpx;
  208. }
  209. .lineImgbox{
  210. text-align: right;
  211. }
  212. .lineImg2{
  213. width: 106rpx;height: 82rpx; margin-top: 10rpx;
  214. }
  215. .historyLineVin{
  216. display: flex;background: #ffffff;
  217. }
  218. .historyLineCar{
  219. display: flex;justify-content: space-between;
  220. }
  221. .vinNum{
  222. font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
  223. color: #999999;line-height: 30rpx;
  224. }
  225. .vinms{
  226. width: 38rpx;
  227. height: 26rpx;
  228. background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
  229. border-radius: 4rpx;
  230. text-align: center;
  231. line-height: 26rpx;
  232. font-weight: 600;
  233. color: #FFFFFF;
  234. font-size: 18rpx;
  235. margin-top: 2rpx;
  236. }
  237. .picker-view {
  238. width: 750rpx;
  239. height: 600rpx;
  240. margin-top: 20rpx;
  241. }
  242. .popupLine {
  243. line-height: 100rpx;
  244. text-align: center;
  245. font-size: 28rpx;
  246. display: block;
  247. }
  248. .popupLineBox{
  249. padding-bottom: env(safe-area-inset-bottom);
  250. }
  251. .popupTitle{
  252. line-height: 100rpx;
  253. text-align: center;
  254. font-size: 30rpx;
  255. color: #999999;
  256. }
  257. </style>