|
|
@@ -0,0 +1,509 @@
|
|
|
+<template>
|
|
|
+<view class="box">
|
|
|
+ <view class="top" >
|
|
|
+ <view class="topTitle">天天低价买贵退差</view>
|
|
|
+ <view class="msBox">
|
|
|
+ <view class="msLine">
|
|
|
+ <image class="msIcon" src="../../static/img2/yczg.png" mode=""></image>
|
|
|
+ <view class="msTxt">原厂直供</view>
|
|
|
+ </view>
|
|
|
+ <view class="msLine">
|
|
|
+ <image class="msIcon" src="../../static/img2/zszb.png" mode=""></image>
|
|
|
+ <view class="msTxt">终身质保</view>
|
|
|
+ </view>
|
|
|
+ <view class="msLine">
|
|
|
+ <image class="msIcon" src="../../static/img2/smfw.png" mode=""></image>
|
|
|
+ <view class="msTxt">上门服务</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="inputBox">
|
|
|
+ <view class="iBline">
|
|
|
+ <span>雪佛兰 科沃兹</span>
|
|
|
+ <image class="xiaIcon" src="../../static/img2/xia.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="iBsx"></view>
|
|
|
+ <view class="iBline">
|
|
|
+ <view style="display: flex;">
|
|
|
+ <span>215/55 R16</span>
|
|
|
+ <span class="shipei">适配</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <image class="xiaIcon" src="../../static/img2/xia.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+<view class="contBox">
|
|
|
+ <view class="contTabBox">
|
|
|
+ <view class="contTab contTabActive">综合</view>
|
|
|
+ <view class="tabprice">
|
|
|
+ <view>价格</view>
|
|
|
+ <view class="tabpriceImg">
|
|
|
+ <image src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
|
|
|
+ <image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contTab">销量</view>
|
|
|
+ </view>
|
|
|
+ <view class="contLineBox">
|
|
|
+ <view class="contLine" v-for="(item,index) in 3" @click="goDetail">
|
|
|
+ <image class="lineImg" src="../../static/timg/noimg.png" mode=""></image>
|
|
|
+ <view class="goodsRight">
|
|
|
+ <view class="bygoodsNameBox">
|
|
|
+ <span class="isRecommend" >适配</span>
|
|
|
+ <span class="bygoodsName"> 路博路博（ROADBOSS）轮胎 195/65R5 91H HP601</span>
|
|
|
+ </view>
|
|
|
+ <view class="tireMS">耐磨 静音</view>
|
|
|
+ <view class="goodsbq">
|
|
|
+ <view class="goodsbqLine">第二条半价</view>
|
|
|
+ <view class="goodsbqLine">双11轮胎节</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodspriceBox">
|
|
|
+ <view class="goodsprice1">¥</view>
|
|
|
+ <view class="goodsprice2">294.5</view>
|
|
|
+ <view class="goodsprice3">¥414</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodsk">
|
|
|
+ <view class="goodsKline">
|
|
|
+ <view class="goodsKlineLeft">送</view>
|
|
|
+ <view class="goodsKlineRgiht">动平衡</view>
|
|
|
+ </view>
|
|
|
+ <view class="goodsKline">
|
|
|
+ <view class="goodsKlineLeft">送</view>
|
|
|
+ <view class="goodsKlineRgiht">动平衡</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ /*保养 1 */
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ themeColor:'',
|
|
|
+ ext:'',
|
|
|
+
|
|
|
+ carInfo:'',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.ext = this.$common.getExtStoreId();
|
|
|
+ this.themeColor = uni.getStorageSync("themeColor");
|
|
|
+ uni.setNavigationBarColor({
|
|
|
+ frontColor: "#ffffff",
|
|
|
+ backgroundColor: 'FD3142'// + this.themeColor
|
|
|
+ })
|
|
|
+ this.carInfo=this.$store.state.carInfo;
|
|
|
+
|
|
|
+ this.maintainProjectID=opt.maintainProjectID
|
|
|
+ if(this.carInfo){
|
|
|
+ //this.getRecommend()
|
|
|
+ }else{
|
|
|
+ /* uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请先选择车辆',
|
|
|
+ showCancel:false,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../user/addCar/cailist?type=5'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }); */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ var car =uni.getStorageSync("byCar")
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goDetail(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'tireDetail'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clearAll(){
|
|
|
+ var that=this
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定清空吗？',
|
|
|
+ success: function(resTK) {
|
|
|
+ if (resTK.confirm) {
|
|
|
+ that.list.forEach(item=>{
|
|
|
+ item.packageItems.forEach(v=>{
|
|
|
+ v.select=false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ that.itemDefault=''
|
|
|
+ that.qdNum=0
|
|
|
+ that.totalPrice=0
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ goCkcar(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../user/addCar/cailist?type=5'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goItem(item){
|
|
|
+ uni.removeStorageSync('byCar');
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'maintainItem?maintainId='+item.id+'&isRecommend='+item.isRecommend
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goSubmit(){
|
|
|
+ if(this.itemDefault){
|
|
|
+ if(this.itemDefault.content){
|
|
|
+ this.itemDefault.content=this.itemDefault.content.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto" ');
|
|
|
+ }
|
|
|
+ this.itemDefault.goodsnum=this.goodsnum
|
|
|
+ this.itemDefault.goodsname=this.lineItem.title
|
|
|
+ this.itemDefault.itemId=this.lineItem.id
|
|
|
+ this.itemDefault.mainImgUrl=this.lineItem.mainImgUrl
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'itemDefault',
|
|
|
+ data: this.itemDefault,
|
|
|
+ success: function () {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'maintainSubmit'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择商品规格',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.box {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F4F4;
|
|
|
+}
|
|
|
+.contBox{
|
|
|
+ background: linear-gradient( 180deg, #FED3C1 0%, #F3F3F3 14%, #F2F2F2 100%);
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
+ min-height: 500rpx;
|
|
|
+ margin-top: -20rpx;
|
|
|
+}
|
|
|
+.goodsk{
|
|
|
+ display: flex;padding-top: 8rpx;
|
|
|
+}
|
|
|
+.goodsKline{
|
|
|
+ display: flex;font-size: 15rpx;
|
|
|
+color: #FF063A;
|
|
|
+border-radius: 2rpx;
|
|
|
+border: 1rpx solid #FF063A;
|
|
|
+margin-right: 8rpx;
|
|
|
+}
|
|
|
+.goodsKlineLeft{
|
|
|
+ padding: 2rpx 4rpx;
|
|
|
+ border-right: 1rpx solid #FF063A;
|
|
|
+}
|
|
|
+.goodsKlineRgiht{
|
|
|
+ padding: 2rpx 4rpx;
|
|
|
+}
|
|
|
+.bygoodsNameBox{
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ width: 440rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.goodsRight{
|
|
|
+ padding-left: 24rpx;
|
|
|
+}
|
|
|
+.bygoodsName{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+.goodspriceBox{
|
|
|
+ display: flex;padding-top: 8rpx;
|
|
|
+}
|
|
|
+.goodsprice1{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #EC0F0A;
|
|
|
+ padding-top: 8rpx;
|
|
|
+}
|
|
|
+.goodsprice2{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #EC0F0A;
|
|
|
+}
|
|
|
+.goodsprice3{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9A9A9A;
|
|
|
+ padding-top: 8rpx;
|
|
|
+}
|
|
|
+.isRecommend{
|
|
|
+ font-size: 20rpx;
|
|
|
+ background: #57C73D;
|
|
|
+ height: 30rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 5rpx;
|
|
|
+ /* margin-right: 10rpx; */
|
|
|
+ }
|
|
|
+.contLineBox{
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.contLine{
|
|
|
+ padding: 22rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.lineImg{
|
|
|
+ width: 230rpx;border-radius: 13rpx;
|
|
|
+ height: 230rpx;
|
|
|
+}
|
|
|
+.goodsbq{
|
|
|
+ display: flex;padding-top: 10rpx;
|
|
|
+}
|
|
|
+.goodsbqLine{
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #FF063A;
|
|
|
+ background: rgba(236, 15, 10, 0.1);
|
|
|
+ border-radius: 2rpx;
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+.tireMS{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #434340;
|
|
|
+}
|
|
|
+.tabprice{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.tabpriceImg{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.contTabBox{
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+ padding: 20rpx 60rpx;font-weight: 500;
|
|
|
+font-size: 26rpx;
|
|
|
+color: #222222;
|
|
|
+}
|
|
|
+.paixuLineTbtopIcon{
|
|
|
+ width: 16rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ padding-bottom: 6rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+.contTabActive{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #EC0F0A;
|
|
|
+}
|
|
|
+.top{
|
|
|
+ height: 260rpx;
|
|
|
+ padding: 40rpx 24rpx;
|
|
|
+ background: linear-gradient( 180deg, #FD3142 0%, #FE9045 100%);
|
|
|
+}
|
|
|
+.inputBox{
|
|
|
+ background: rgba(255,255,255,0.4);
|
|
|
+ border-radius: 38rpx;line-height: 42rpx;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ padding: 18rpx 30rpx;font-size: 26rpx;color: #222222;
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+ margin-top: 32rpx;
|
|
|
+}
|
|
|
+.iBsx{
|
|
|
+ width: 2rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+.shipei{
|
|
|
+ width: 48rpx;text-align: center;
|
|
|
+ height: 28rpx;margin-top: 8rpx;
|
|
|
+ background: #57C73D;margin-left: 10rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 28rpx;
|
|
|
+}
|
|
|
+.xiaIcon{
|
|
|
+ width: 12rpx;height: 9rpx;margin-top: 18rpx;margin-left: 10rpx;
|
|
|
+}
|
|
|
+.iBline{
|
|
|
+ width: 300rpx;display: flex;justify-content: space-between;
|
|
|
+}
|
|
|
+.ibCarIcon{
|
|
|
+ height: 42rpx;width: 42rpx;
|
|
|
+}
|
|
|
+.glIcon{
|
|
|
+ width: 34rpx;height: 34rpx;margin-top: 6rpx;
|
|
|
+}
|
|
|
+.ibLeft{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.ibRight{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.ibCarBox{
|
|
|
+ display: flex;padding-left: 10rpx;
|
|
|
+}
|
|
|
+.glInput{
|
|
|
+ width: 120rpx;line-height: 42rpx;height: 42rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+.msIcon{
|
|
|
+ width: 26rpx;height: 26rpx;
|
|
|
+}
|
|
|
+.msTxt{
|
|
|
+ font-weight: 500;margin-left: 12rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #FCD903;
|
|
|
+ padding-top: 2rpx;
|
|
|
+}
|
|
|
+.msLine{
|
|
|
+ display: flex;line-height: 28rpx; width: 180rpx;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.msBox{
|
|
|
+ display: flex;justify-content: center;padding-top: 24rpx;
|
|
|
+ padding-left: 30rpx;padding-right: 30rpx;
|
|
|
+}
|
|
|
+.spBox{
|
|
|
+ background: linear-gradient( 180deg, #FFFFFF 0%, #F4F4F4 440rpx);
|
|
|
+ border-radius: 23rpx;
|
|
|
+ padding: 24rpx 20rpx 0 24rpx;
|
|
|
+ margin-top: -50rpx;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+}
|
|
|
+.spTop{
|
|
|
+ display: flex;justify-content: space-between;line-height: 40rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+}
|
|
|
+.spTitle{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+}
|
|
|
+.spMs{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.znBox{
|
|
|
+ height: 200rpx;
|
|
|
+ background: #FDC856;
|
|
|
+ border-radius: 21rpx;
|
|
|
+}
|
|
|
+.znCont{
|
|
|
+ background: url('http://dmsimg.66km.com/marketing/be56733ed0464993b9e71d351d82062e.jpg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+}
|
|
|
+.hxIcon{
|
|
|
+ height: 4rpx;width: 360rpx;
|
|
|
+ margin-left: 18rpx;margin-top: 20rpx;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.znMs{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 33rpx;
|
|
|
+ padding-left: 18rpx;padding-top: 16rpx;
|
|
|
+}
|
|
|
+.znCar{
|
|
|
+ font-weight: 500;padding-left: 18rpx;
|
|
|
+ font-size: 32rpx;padding-top: 24rpx;
|
|
|
+ color: #8C5E24;
|
|
|
+ line-height: 45rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.goodsMs{
|
|
|
+ font-weight: 400;padding-top: 10rpx;
|
|
|
+ padding-bottom: 6rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #8B8B8B;
|
|
|
+ line-height: 28rpx;
|
|
|
+ white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
+ overflow: hidden; /* 超出容器部分隐藏 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 480rpx;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.nodataImg{
|
|
|
+ width: 176rpx;height: 180rpx;
|
|
|
+}
|
|
|
+.nodataTxt{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 37rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+.nodataBox{
|
|
|
+ padding-top: 186rpx;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+.topTitle{
|
|
|
+ font-family: PangMenZhengDao;
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #FFF99F;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
