qiubinghui
/
zhywpt-h5
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

调整样式

ms
zhoujie 1 yıl önce
ebeveyn
ba2255eea2
işleme
3acd5eaeb6
1 değiştirilmiş dosya ile 314 ekleme ve 250 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 314
    250
      pages/productSelection/productSelection.vue

+ 314
- 250
pages/productSelection/productSelection.vue Dosyayı Görüntüle

@@ -1,33 +1,60 @@
<template>
<view class='bg-content'>
<image class='bg-image' mode="widthFix"
src="https://qtzl.etcjz.cn/sett-minio/20240326/35ca98a43c7d4b7fb4c05013_bingjingxin.png"></image>
<view class="content-re" style="height: 100%;">
<view class="bg-content">
<image
class="bg-image"
mode="widthFix"
src="https://qtzl.etcjz.cn/sett-minio/20240326/35ca98a43c7d4b7fb4c05013_bingjingxin.png"
></image>
<view class="content-re" style="height: 100%">
<!-- <custom-header :back="false" title="选择产品"></custom-header> -->
<view class="content-title">请选择办理产品类型</view>
<view class="product-content">
<scroll-view scroll-y="true" style="height: 100%">
<view class="product-car" v-for="item in productList" :key="item.promoteId">
<view
class="product-car"
v-for="item in productList"
:key="item.promoteId"
>
<view class="product-car-top">
<view class="car-title">{{ item.releaseProductStandards.productName }}</view>
<view class="car-title">
{{ item.releaseProductStandards.productName }}
</view>
<view class="car-type">{{ item.cardTypeArr }}</view>
</view>
<!-- <view class="equity-car" @click="handleProduct(item, equityItem)"> -->
<view class="equity-car" @click="handleProduct(item, equityItem)" v-for="(equityItem, index) in item.releaseProductStandards
.equityList" :key="index" :class="{ noClick: equityItem.isClick === 1 }">
<view
class="equity-car"
@click="handleProduct(item, equityItem)"
v-for="(equityItem, index) in item.releaseProductStandards
.equityList"
:key="index"
:class="{ noClick: equityItem.isClick === 1 }"
>
<view class="l-info">
<view class="info-top">
<view class="equity-title">
{{ equityItem.productName }}
<!-- 途虎无忧套餐 -->
</view>
<u-icon name="arrow-right" size="28" style="flex-shrink: 0"></u-icon>
<u-icon
name="arrow-right"
size="28"
style="flex-shrink: 0"
></u-icon>
</view>
<view class="selling-point">{{ equityItem.sellingPoint }}</view>
<!-- <view class="selling-point">尊享套餐330元汽车养美服务</view> -->
</view>
<view class="r-price">
￥{{ handleAmount(equityItem.discountPrice) }}
<view class="top-discount">
￥{{ handleAmount(equityItem.discountPrice) }}
</view>
<view class="bottom-original" v-if="equityItem.originalPrice">
原价:
<text class="original-pri">
{{ handleAmount(equityItem.originalPrice) }}元
</text>
</view>
</view>
</view>
</view>
@@ -38,31 +65,55 @@
</view>
</view>

<u-modal v-model="show" :show-confirm-button="false" title="请选择办理车辆类型">
<u-modal
v-model="show"
:show-confirm-button="false"
title="请选择办理车辆类型"
>
<view class="slot-content">
<view class="select-content">
<view class="select-item" @click="handleVanType(1)">
<image :src="fileURL + 'image/index/icon-car.png'" mode="aspectFit" class="select-img"></image>
<image
:src="fileURL + 'image/index/icon-car.png'"
mode="aspectFit"
class="select-img"
></image>
<view>客车办理</view>
</view>
<view class="fen"></view>
<view class="select-item" @click="handleVanType(2)">
<image :src="fileURL + 'image/index/icon-truck.png'" mode="aspectFit" class="select-img"></image>
<image
:src="fileURL + 'image/index/icon-truck.png'"
mode="aspectFit"
class="select-img"
></image>
<view>货车办理</view>
</view>
</view>
</view>
</u-modal>
<u-modal v-model="isUserTypeshow" :show-confirm-button="false" title="请选择ETC用户类型">
<u-modal
v-model="isUserTypeshow"
:show-confirm-button="false"
title="请选择ETC用户类型"
>
<view class="slot-content">
<view class="select-content">
<view class="select-item" @click="handleUserType(1)">
<image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFit" class="select-img"></image>
<image
:src="fileURL + 'image/index/icon-personal.png'"
mode="aspectFit"
class="select-img"
></image>
<view>个人办理</view>
</view>
<view class="fen"></view>
<view class="select-item" @click="handleUserType(2)">
<image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFit" class="select-img"></image>
<image
:src="fileURL + 'image/index/icon-unit.png'"
mode="aspectFit"
class="select-img"
></image>
<view>单位办理</view>
</view>
</view>
@@ -71,274 +122,287 @@
</view>
</template>
<script setup lang="ts">
import { unifyTemplate } from '@/hooks/unifyTemplate';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { request } from '@/utils/network/request';
import { fileURL } from '@/utils/network/api.js';
import handleAmount from '@/utils/handleAmount.js';
let config = ref<any>({
submitName: '下一步',
titleWidth: 160
import { unifyTemplate } from '@/hooks/unifyTemplate';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { request } from '@/utils/network/request';
import { fileURL } from '@/utils/network/api.js';
import handleAmount from '@/utils/handleAmount.js';
let config = ref<any>({
submitName: '下一步',
titleWidth: 160
});
const {
CustomHeader, //头部组件
initData, //初始化数据
qdOrderVal, //qdOrder中数据 ref
cusQdOrderVal
} = unifyTemplate(); //初始化数据
let show = ref(false);
//获取页面配置
onLoad((opin) => {
initData(opin, -2).then((data) => {
console.log(data);
// getLoti()
if (data.qdOrder.vanType === undefined) {
// 不存在客户类型，开启弹窗
setTimeout(() => {
show.value = true;
}, 200);
} else {
setTimeout(() => {
show.value = false;
}, 200);
handleUserTypeShow();
}
// isShow.value = true
delete data.config.tableConfig;
config.value = Object.assign(data.config, config.value);
});
const {
CustomHeader, //头部组件
initData, //初始化数据
qdOrderVal, //qdOrder中数据 ref
cusQdOrderVal
} = unifyTemplate(); //初始化数据
let show = ref(false);
//获取页面配置
onLoad((opin) => {
initData(opin, -2).then((data) => {
console.log(data);
// getLoti()
if (data.qdOrder.vanType === undefined) {
// 不存在客户类型，开启弹窗
setTimeout(() => {
show.value = true;
}, 200);
} else {
setTimeout(() => {
show.value = false;
}, 200);
handleUserTypeShow();
});
const productList = ref([]);
const loaing = ref(true);
// 获取产品
function getList() {
// 请求数据
let data = {
// type: 1,
// agencyId: '52010188919'
agencyId: qdOrderVal.value.promoterChannelNum,
vanType: qdOrderVal.value.vanType || cusQdOrderVal.value.vanType,
userType: qdOrderVal.value.userType || cusQdOrderVal.value.userType
};
// request('58ac9653fdb24ee08409f94dde70dfa6', {
console.log('请求参数', data);
request('f01002fa6ded4162afaec1139e503641', {
data
})
.then((res) => {
if (res.statusCode === 0) {
const data = JSON.parse(res.bizContent);
console.log(res, data, '产品数据');

let opt = {
1: '记账卡',
2: '储值卡',
3: '记存卡'
};
let proList = data.list || [];
proList.forEach((ele) => {
let cardTypeArr = '';
ele.releaseProductStandards.productStandards.cardType.forEach(
(item) => {
cardTypeArr = cardTypeArr + ' ' + opt[item];
console.log(opt[item]);
}
);
ele.cardTypeArr = cardTypeArr;
});
productList.value = proList;
}
// isShow.value = true
delete data.config.tableConfig;
config.value = Object.assign(data.config, config.value);
});
});
const productList = ref([]);
const loaing = ref(true);
// 获取产品
function getList() {
// 请求数据
let data = {
// type: 1,
// agencyId: '52010188919'
agencyId: qdOrderVal.value.promoterChannelNum,
vanType: qdOrderVal.value.vanType || cusQdOrderVal.value.vanType,
userType: qdOrderVal.value.userType || cusQdOrderVal.value.userType
};
// request('58ac9653fdb24ee08409f94dde70dfa6', {
console.log('请求参数', data);
request('f01002fa6ded4162afaec1139e503641', {
data
})
.then((res) => {
if (res.statusCode === 0) {
const data = JSON.parse(res.bizContent);
console.log(res, data, '产品数据');

let opt = {
1: '记账卡',
2: '储值卡',
3: '记存卡'
};
let proList = data.list || [];
proList.forEach((ele) => {
let cardTypeArr = '';
ele.releaseProductStandards.productStandards.cardType.forEach(
(item) => {
cardTypeArr = cardTypeArr + ' ' + opt[item];
console.log(opt[item]);
}
);
ele.cardTypeArr = cardTypeArr;
});
productList.value = proList;
}
})
.finally(() => {
loaing.value = false;
});
}
// 客货类型选择
function handleVanType(type) {
console.log(type);
cusQdOrderVal.value.vanType = type;
handleUserTypeShow();
show.value = false;
}
.finally(() => {
loaing.value = false;
});
}
// 客货类型选择
function handleVanType(type) {
console.log(type);
cusQdOrderVal.value.vanType = type;
handleUserTypeShow();
show.value = false;
}

let isUserTypeshow = ref(false);
function handleUserTypeShow() {
if (!qdOrderVal.value.userType) {
isUserTypeshow.value = true;
} else {
getList();
}
}
// 用户类型选择
function handleUserType(val) {
cusQdOrderVal.value.userType = val;
isUserTypeshow.value = false;
let isUserTypeshow = ref(false);
function handleUserTypeShow() {
if (!qdOrderVal.value.userType) {
isUserTypeshow.value = true;
} else {
getList();
}
}
// 用户类型选择
function handleUserType(val) {
cusQdOrderVal.value.userType = val;
isUserTypeshow.value = false;
getList();
}

// 产品选择
function handleProduct(product, equityItem) {
// let { jumpPage } = config.value;
if (equityItem.isClick) {
uni.showModal({
title: '提示',
content: equityItem.noClickCase + '请选择其他权益'
});
return;
}
cusQdOrderVal.value.promoteId = product.promoteId;
cusQdOrderVal.value.productIntro = equityItem.productIntro;
uni.navigateTo({
url:
'/pages/equitySelection/equitySelection?equityId=' + equityItem.equityId,
animationType: 'pop-in',
animationDuration: 500
// 产品选择
function handleProduct(product, equityItem) {
// let { jumpPage } = config.value;
if (equityItem.isClick) {
uni.showModal({
title: '提示',
content: equityItem.noClickCase + '请选择其他权益'
});
return;
}
function getLoti() {
console.log('获取经纬度111');
uni.getLocation({
type: 'gcj02',
// type: 'wgs84',
accuracy: 'best',
isHighAccuracy: true,
cusQdOrderVal.value.promoteId = product.promoteId;
cusQdOrderVal.value.productIntro = equityItem.productIntro;
uni.navigateTo({
url:
'/pages/equitySelection/equitySelection?equityId=' + equityItem.equityId,
animationType: 'pop-in',
animationDuration: 500
});
}
function getLoti() {
console.log('获取经纬度111');
uni.getLocation({
type: 'gcj02',
// type: 'wgs84',
accuracy: 'best',
isHighAccuracy: true,

success: function (res) {
console.log('当前位置的经度高德：' + res.longitude);
console.log('当前位置的纬度高德：' + res.latitude);
console.log(res);
},
fail: (error) => {
console.error('err:', error);
}
});
}
success: function (res) {
console.log('当前位置的经度高德：' + res.longitude);
console.log('当前位置的纬度高德：' + res.latitude);
console.log(res);
},
fail: (error) => {
console.error('err:', error);
}
});
}
</script>
<style lang="scss" scoped>
.bg-content {
height: 100%;
width: 100%;
background: #F4F6FA;
}
.content-title {
font-size: 38rpx;
height: 540rpx;
box-sizing: border-box;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom:40rpx;
}
.bg-content {
height: 100%;
width: 100%;
background: #f4f6fa;
}
.content-title {
font-size: 38rpx;
height: 540rpx;
box-sizing: border-box;
display: flex;
color: #394357;
align-items: flex-end;
justify-content: center;
padding-bottom: 40rpx;
}

.product-content {
padding: 0 44rpx 40rpx;
height: calc(100% - 540rpx);
box-sizing: border-box;
overflow: hidden;
}
.product-content {
padding: 0 44rpx 40rpx;
height: calc(100% - 540rpx);
box-sizing: border-box;
overflow: hidden;
}

.empty {
text-align: center;
margin-top: 40rpx;
}
.empty {
text-align: center;
margin-top: 40rpx;
}

.product-car:nth-child(n + 2) {
margin-top: 40rpx;
}
.product-car:nth-child(n + 2) {
margin-top: 40rpx;
}

.product-car {
overflow: hidden;
padding: 50rpx 26rpx;
// border: 1rpx solid rgba(187, 187, 187, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 14rpx;
.product-car {
overflow: hidden;
padding: 50rpx 26rpx;
// border: 1rpx solid rgba(187, 187, 187, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 14rpx;

.product-car-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 30rpx;
.product-car-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 30rpx;

.car-title {
font-size: 45rpx;
font-weight: bold;
}
.car-type{
flex-shrink: 0;
}
.car-title {
font-size: 45rpx;
font-weight: bold;
}
.car-type {
flex-shrink: 0;
}
}

.equity-car {
&.noClick {
background-color: #bbb;
color: #fff;
}

display: flex;
align-items: center;
justify-content: space-between;
.equity-car {
&.noClick {
background-color: #bbb;
color: #fff;
background-color: #4095e5;
margin-top: 30rpx;
padding: 30rpx 20rpx;
border-radius: 16rpx;
}

.l-info {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
background-color: #4095e5;
margin-top: 30rpx;
padding: 30rpx 20rpx;
border-radius: 16rpx;

.info-top {
display: flex;
align-items: center;
font-size: 34rpx;
font-weight: bold;
margin-bottom: 10rpx;
.l-info {
flex-grow: 1;

.equity-title {
margin-right: 5rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.info-top {
display: flex;
align-items: center;
font-size: 34rpx;
font-weight: bold;
margin-bottom: 10rpx;

.selling-point {
font-size: 26rpx;
.equity-title {
margin-right: 5rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}

.r-price {
font-size: 34rpx;
color: #ffbf6b;
font-weight: bold;
padding-left: 20rpx;
flex-shrink: 0;
.selling-point {
font-size: 26rpx;
}
}

.r-price {
font-size: 34rpx;
color: #ffbf6b;
font-weight: bold;
padding-left: 20rpx;
flex-shrink: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.bottom-original {
font-size: 24rpx;
font-weight: normal;
color: #fff;
.original-pri {
text-decoration: line-through;
}
}
}
}
}

.select-content {
display: flex;
align-items: center;
padding: 30rpx;
.select-content {
display: flex;
align-items: center;
padding: 30rpx;

.fen {
width: 2rpx;
height: 150rpx;
background-color: #eee;
}
.fen {
width: 2rpx;
height: 150rpx;
background-color: #eee;
}

.select-item {
flex: 1 1 auto;
text-align: center;
.select-item {
flex: 1 1 auto;
text-align: center;

.select-img {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
}
.select-img {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
}
}
</style>
}
</style>

Write Preview
Loading…
İptal
Kaydet