qiubinghui
/
zhywpt-sp
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

调整ui

master
zhoujie 6 months ago
parent
64e90bcbd4 0d5ad7f906
commit
8aa9ca6ac3
13 changed files with 373 additions and 625 deletions
Unified View Show Diff Stats
  1. 2
    2
      composables/order/useOrderList.ts
  2. 1
    1
      composables/order/useOrderListItem.ts
  3. 3
    8
      pages.json
  4. 1
    2
      pages/order/components/order-list-item.vue
  5. 0
    32
      pages/order/order.vue
  6. 61
    13
      subpackage/after-sale/activation-once-again/select-car.vue
  7. 0
    179
      subpackage/carPark/channelSing/select-car.vue
  8. 0
    165
      subpackage/orders/order-confirm-receipt-删除.vue
  9. 4
    6
      subpackage/orders/sign-up.vue
  10. 122
    177
      subpackage/service/equity/equity.vue
  11. 130
    9
      subpackage/service/equityInfo/equityInfo.vue
  12. 46
    29
      subpackage/service/equityList/equityList.vue
  13. 3
    2
      utils/network/api.js

+ 2
- 2
composables/order/useOrderList.ts View File

//是否刷新 //是否刷新
refresh: false, refresh: false,
//当前切换的index 0-全部 1-待发货 2-待收货 3-待激活 xx-退款/换货 //当前切换的index 0-全部 1-待发货 2-待收货 3-待激活 xx-退款/换货
tabIndex: 0,
tabIndex: -1,
//导航栏数据 //导航栏数据
tabsList: [ tabsList: [
{ id: 0, name: '全部' }, { id: 0, name: '全部' },
data.tabIndex = 0 data.tabIndex = 0
} else { } else {
data.tabIndex = Number(option.index) data.tabIndex = Number(option.index)
}
} console.log('===========111==输出内容',data.tabIndex)
//监听订单刷新信息 //监听订单刷新信息
uni.$on('refreshOrder', () => { uni.$on('refreshOrder', () => {
data.refresh = true; data.refresh = true;

+ 1
- 1
composables/order/useOrderListItem.ts View File

}); });
onShow(() => { onShow(() => {
console.log("一进页面就刷新", searchKeyWords.value) console.log("一进页面就刷新", searchKeyWords.value)
refreshList(true);
// refreshList(true);
}) })
return { return {
config, config,

+ 3
- 8
pages.json View File

{ {
"path": "equityList/equityList", "path": "equityList/equityList",
"style": { "style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "权益详情",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path": "equity/equity", "path": "equity/equity",
"style": { "style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "我的权益",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
"provider": "wxa2d9acdd1054e69b" "provider": "wxa2d9acdd1054e69b"
} }
}, },
"pages": [{
"path": "channelSing/select-car",
"style": {
"navigationBarTitleText": "选择车辆"
}
},
"pages": [
{ {
"path": "etc/etcDeviceInfo", "path": "etc/etcDeviceInfo",
"style": { "style": {

+ 1
- 2
pages/order/components/order-list-item.vue View File

<script setup lang="ts"> <script setup lang="ts">
import orderListItemNew from "./order-list-item-new.vue"; import orderListItemNew from "./order-list-item-new.vue";
import useOrderListItem from "@/composables/order/useOrderListItem"; import useOrderListItem from "@/composables/order/useOrderListItem";
import { reactive, watch } from "vue";
import { reactive} from "vue";


const state = reactive({ const state = reactive({
triggered: false, //设置当前下拉刷新的状态 triggered: false, //设置当前下拉刷新的状态
default: true default: true
} }
}) })
console.log("props.index", props)
const { config, params, ordersList, onKeyInput, refreshList, searchKeyWords } = useOrderListItem(props); const { config, params, ordersList, onKeyInput, refreshList, searchKeyWords } = useOrderListItem(props);
//自定义下拉刷新被触发 //自定义下拉刷新被触发
const onRefresh = () => { const onRefresh = () => {

+ 0
- 32
pages/order/order.vue View File

<empty-view v-if="!data.login" mode="permission" content="请先登录再查看订单" btnTxt="立即登录" <empty-view v-if="!data.login" mode="permission" content="请先登录再查看订单" btnTxt="立即登录"
@btnClick="$util.navTo('/login/login')"> @btnClick="$util.navTo('/login/login')">
</empty-view> </empty-view>

<view class="list-wrapper" v-else> <view class="list-wrapper" v-else>
<view class="top-content"> <view class="top-content">
<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex" <order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
v-if="data.tabsList.length > 0"></order-tabbar> v-if="data.tabsList.length > 0"></order-tabbar>
</view> </view>

<order-list-item ref="mescrollItem" :index="data.tabIndex" <order-list-item ref="mescrollItem" :index="data.tabIndex"
:refresh="data.refresh"> :refresh="data.refresh">
</order-list-item> </order-list-item>
import orderListItem from "./components/order-list-item"; import orderListItem from "./components/order-list-item";
import useOrderList from "@/composables/order/useOrderList"; import useOrderList from "@/composables/order/useOrderList";
import filter from '@/components/filter/filter.vue'; import filter from '@/components/filter/filter.vue';
import useOrderListItem from "@/composables/order/useOrderListItem";
import { PageData } from "@/datas/enum";
import {
reactive,
} from "vue";
const state = reactive({
index: 0
})
const { const {
data, data,
tabbarRef tabbarRef
} = useOrderList(); } = useOrderList();
//请求参数
const params = reactive({
pageNum: PageData.NUM,
pageSize: PageData.SIZE,
total: 0,
status: 'more',
reload: false,
})

const props = defineProps({
index: {
type: Number,
default() {
return 0
}
},
refresh: { //是否刷新列表
type: Boolean,
default: true
}
})

</script> </script>



+ 61
- 13
subpackage/after-sale/activation-once-again/select-car.vue View File

import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { navTo} from "@/utils/utils"; import { navTo} from "@/utils/utils";
import { onLoad,onShow} from "@dcloudio/uni-app"; import { onLoad,onShow} from "@dcloudio/uni-app";
import { afterSaleCommQuery } from "@/utils/network/api.js";
import { afterSaleCommQuery,queryPage } from "@/utils/network/api.js";
import { requestNew } from "@/utils/network/request.js"; import { requestNew } from "@/utils/network/request.js";
import { getItem, StorageKeys} from "@/utils/storage"; import { getItem, StorageKeys} from "@/utils/storage";
import { jump } from "@/datas/9901Jump.js"; import { jump } from "@/datas/9901Jump.js";
list: [], list: [],
type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备 type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备
// 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用 // 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用
// 34月结单查询 35ETC通行流水记录 36 黑名单查询
// 34月结单查询 35ETC通行流水记录 36 黑名单查询 37恢复签约
}); });
onLoad((options) => { onLoad((options) => {
console.log("options", options) console.log("options", options)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '黑名单查询-选择车辆' title: '黑名单查询-选择车辆'
}); });
}else if (options.type == "37") {
uni.setNavigationBarTitle({
title: '恢复签约-选择车辆'
});
} }
}); });
onShow(()=>{ onShow(()=>{
quanCheckActionTrue().then((item : any) => {
if (state.type == "32") {
let data = item.result
for (var k = 0; k < data.length; k++) {
if (data[k]['orderStatus'] != "99999") {
state.list.push(data[k])
if(state.type=='37'){
// 恢复签约查询订单接口
list().then((item : any) => {
console.log("item",item)
state.list = item.data;
})
}else{
quanCheckActionTrue().then((item : any) => {
if (state.type == "32") {
let data = item.result
for (var k = 0; k < data.length; k++) {
if (data[k]['orderStatus'] != "99999") {
state.list.push(data[k])
}
} }
}else{
state.list = item.result;
} }
}else{
state.list = item.result;
}
console.log(item);
});
console.log(item);
});
}
}) })
const list=()=>{
let newsource = "WECHAT"
// #ifdef MP-ALIPAY
newsource = "ALI"
// #endif
const options = {
type: 2,
data: {
"source": newsource,
"orderStatus": "ACTIVE",
"tabIndex":"-1"
},
method: "POST",
showLoading: true,
};
return new Promise(async (resolve, reject) => {
const res = await requestNew(queryPage, options);
const data = res;
resolve(data);
}).catch((error) => {
reject(error);
});
}
const quanCheckActionTrue = () => { const quanCheckActionTrue = () => {
let source = "" let source = ""
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
navTo(`/subpackage/after-sale/transfer-ownership/transfer-confirm?id=${item.id}`) navTo(`/subpackage/after-sale/transfer-ownership/transfer-confirm?id=${item.id}`)
}else if (state.type == "33") { }else if (state.type == "33") {
navTo(`/subpackage/after-sale/card-deactivation-activation/deactivation-activation-confirm?id=${item.id}`) navTo(`/subpackage/after-sale/card-deactivation-activation/deactivation-activation-confirm?id=${item.id}`)
}else if (state.type == "37") {
// #ifdef MP-ALIPAY
uni.navigateTo({
url: `/subpackage/orders/sign-up-ali?orderId=${item.orderId}&&channelSing=1&&vehiclePlate=${item.vehiclePlate}`,
});
// #endif
// #ifdef MP-WEIXIN
uni.navigateTo({
url: `/subpackage/orders/sign-up?orderId=${item.orderId}&&channelSing=1&&vehiclePlate=${item.vehiclePlate}`,
});
// #endif
} }
} }
} }

+ 0
- 179
subpackage/carPark/channelSing/select-car.vue View File

<template>
<view class="selectCar-box">
<view v-if="state.list.length > 0" @click="choose(i, item)" class="item" v-for="(item, i) in state.list"
:key="i">
<view class="iten-left">
<image :src="`${$imgUrl}che.png`" mode="aspectFill"></image>
<view class="message">
<view>车牌号：{{ item.vehiclePlate }}</view>
<view>车牌颜色：{{ getVehiclePlateColor(item.vehiclePlateColor) }}</view>
<view v-if="item.cardId">卡号：{{ item.cardId }}</view>
<view v-if="item.cardStatus">卡状态：{{getCodeName('CARD_STATE_TYPE',item.cardStatus)}}</view>
<view v-if="item.obuId">签号：{{ item.obuId }}</view>
<view v-if="item.obuStatus">签状态：{{ getCodeName('OBU_STATE_TYPE',item.obuStatus) }}</view>
</view>
</view>
<view class="choose-item">
<view class="active" v-if="flag == i"> </view>
</view>
</view>
<view v-else class="flex"> 暂无车辆订单信息 </view>
<view style="text-align: center;margin: 20rpx;font-size: 30rpx;" v-if="state.flags">我是有底线的~</view>
</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
import { orderList } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { getItem, StorageKeys } from "@/utils/storage";
import { stringToJson } from "@/utils/network/encryption";
import {
getCodeName
} from "@/datas/queryKey.js";
import {
getVehiclePlateColor
} from "@/datas/vehiclePlateColor";
import { deviceType } from "@/utils/network/difference";
import { jump } from "@/datas/9901Jump.js";
const state = reactive({
list: [],
starts: false,
pageSize: 10,
pageNo: 1,
flags: false,
});
onLoad(() => {
quanCheckActionTrue()
});


const quanCheckActionTrue = () => {
let source = ""
// #ifdef MP-ALIPAY
source = "ALI"
// #endif
// #ifdef MP-WEIXIN
source = "WECHAT"
// #endif
var data = {
opId: getItem(StorageKeys.OpenId),
source: source,
tabIndex: "0",
isValueCard: "",
pageNo: state.pageNo,
pageSize: state.pageSize,
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(orderList, options).then((res) => {
let dataAll = [...state.list, ...stringToJson(res.bizContent).data]
state.list =dataAll;
console.log("state.list",state.list)
})
};

const flag = ref("0");
const choose = (i,item) => {
console.log("item", item);
if (item.deviceType == deviceType) {
const params = encodeURIComponent(JSON.stringify(item))
jump('19', params)
}else{
// #ifdef MP-ALIPAY
uni.navigateTo({
url: `/subpackage/orders/sign-up-ali?orderId=${item.orderId}&&channelSing=1&&vehiclePlate=${item.vehiclePlate}`,
});
// #endif
// #ifdef MP-WEIXIN
uni.navigateTo({
url: `/subpackage/orders/sign-up?orderId=${item.orderId}&&channelSing=1&&vehiclePlate=${item.vehiclePlate}`,
});
// #endif
}
};
onReachBottom(() => {
if (state.list.length < state.pageNo * 10) return state.flags = true
console.log("触底了")
state.pageNo++
quanCheckActionTrue();
});
</script>

<style>
page {
width: 100%;
height: 100%;
background-color: #eef7f7;
}
</style>
<style lang="scss" scoped>
.flex {
display: flex;
justify-content: center;
}

.selectCar-box {
height: 100%;
padding: 30rpx;

.item {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
margin-bottom: 30rpx;

.iten-left {
display: flex;
align-items: center;

image {
width: 150rpx;
height: 90rpx;
}

text {
margin-left: 20rpx;
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}
}

.choose-item {
width: 44rpx;
height: 44rpx;
background: #ffffff;
border: 2rpx solid #00b38b;
border-radius: 50%;
margin-right: 20rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: content-box;
}

.active {
width: 34rpx;
height: 34rpx;
background: #00b38b;
border-radius: 50%;
}
}
}
.message{
font-size: 26rpx;
margin-left: 6rpx;
}
</style>

+ 0
- 165
subpackage/orders/order-confirm-receipt-删除.vue View File

<!-- 订单详情-确认收货 -->
<template>
<view class="card-box">
<view class="as-layout-horizontal as-gravity-center-start title">
<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon"></image>
<text class="txt-title">{{ state.orderInfo.productName }}</text>
</view>
<view style="border-bottom: 1px solid #dcdcdc" />

<!-- 订单信息 -->
<view class="order-box">
<view class="order-item" v-for="(item, index) in state.list" :key="index">
<order-info-item :label="item.label" :value="item.value"></order-info-item>
</view>
</view>
</view>

<view class="hint">请核对实收货物与上述货物编号是否一致！</view>
<view class="btn">
<submit-button title="确认收货" @submit="$util.confirm('是否确认收到货？', confirmReceipt, '收货确认')"></submit-button>
</view>
</template>

<script setup lang="ts">
import orderInfoItem from "./components/order-info-item";
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {requestNew } from "@/utils/network/request.js";
import {confirm, getOrderStatusName } from "@/utils/utils";
import {orderReceiveGoods,orderDetailQuery } from "@/utils/network/api";
import { getItem, StorageKeys } from "@/utils/storage";

const state = reactive({
//订单信息
orderInfo: {} as any,
//显示订单信息
list: [
{
label: "订单编号：",
value: "",
},
{
label: "订单车牌：",
value: "",
},
{
label: "订单状态：",
value: "",
},
{
label: "发货卡号：",
value: "",
},
{
label: "发货签号：",
value: "",
},
],
});

//确认收货
const confirmReceipt = (e) => {
const options = {
type: 2,
data: {
opId: getItem(StorageKeys.OpenId),
orderId:state.orderInfo.orderNo
},
method: "POST",
showLoading: true,
};
requestNew(orderReceiveGoods, options).then((res) => {
confirm(
"您已完成订单收货",
() => {
uni.$emit("refreshOrder");
uni.navigateBack();
},
"收货完成",
false
);
});
}
// onUnload(() => {
// //移除监听
// uni.$off('bluetoothLink')
// })
//确认收货
const confirmReceiptClick = (e) => {
navTo("/pages/bluetooth/bluetooth?routeType=5&id=" + state.orderInfo.id); //去连接蓝牙
};

//获取订单详情
const getOrderDetails = (id) => {
const options = {
type: 2,
data: { id: id },
method: "POST",
showLoading: true,
};
requestNew(orderDetailQuery, options).then((res) => {
console.log("获取订单详情",res)
state.orderInfo =res.data;

state.list[0].value = state.orderInfo.orderNo;
state.list[1].value = state.orderInfo.vehiclePlate;
state.list[2].value = getOrderStatusName(state.orderInfo.orderStep);
state.list[3].value = state.orderInfo.cardId ? state.orderInfo.cardId : "";
state.list[4].value = state.orderInfo.obuId ? state.orderInfo.obuId : "";
});
};

onLoad((options) => {
getOrderDetails(options.id);
});
</script>

<style>
page {
background-color: #eef7f7;
}
</style>
<style lang="scss" scoped>
.card-box {
background-color: white;
border-radius: 20rpx;
box-shadow: 0px 0px 6rpx 2rpx rgba(223, 223, 223, 0.3);
margin: 30rpx;
padding: 20rpx 0;

.title {
padding: 0 20rpx 20rpx;
}

.icon {
width: 48rpx;
height: 48rpx;
margin-right: 10rpx;
}

.txt-title {
font-size: 30rpx;
color: #333333;
}

.order-box {
padding: 0px 24rpx 10rpx;

.order-item {
padding: 28rpx 0px 0px;
}
}
}

.hint {
font-size: 28rpx;
color: #ff8000;
margin-top: 60rpx;
text-align: center;
}

.btn {
margin: 500rpx 40rpx 50rpx;
}
</style>

+ 4
- 6
subpackage/orders/sign-up.vue View File

if (option.channelSing) { if (option.channelSing) {
state.channelSing = option.channelSing; state.channelSing = option.channelSing;
} }
console.log("state.channelSing",option.channelSing,option)
state.vehiclePlate = option.vehiclePlate; state.vehiclePlate = option.vehiclePlate;
getInfo(); getInfo();
}); });
// #endif // #endif
} }
const savaHandle = () => { const savaHandle = () => {
// if (!state.checked) {
// msg("请勾选协议！")
// return;
// }
console.log("openid*******", state.openid); console.log("openid*******", state.openid);
//如果获取openId成功 //如果获取openId成功
if (state.openid) { if (state.openid) {
const data = res; const data = res;
console.log("data", data) console.log("data", data)
if (data.userState === "UNAUTHORIZED") { if (data.userState === "UNAUTHORIZED") {
console.log("state.channelSing",state.channelSing,state.channelSing=="0")
if (state.channelSing == "0") { if (state.channelSing == "0") {
uni.navigateToMiniProgram({ uni.navigateToMiniProgram({
appId: "wxbcad394b3d99dac9", appId: "wxbcad394b3d99dac9",
method: "POST", method: "POST",
showLoading: true, showLoading: true,
}; };
request(channelSingQueryApi, optionss)
requestNew(channelSingQueryApi, optionss)
.then((res) => { .then((res) => {
let data = stringToJson(res.bizContent)
let data = res
uni.navigateToMiniProgram({ uni.navigateToMiniProgram({
appId: "wxbcad394b3d99dac9", appId: "wxbcad394b3d99dac9",
path: "pages/route/index", path: "pages/route/index",

+ 122
- 177
subpackage/service/equity/equity.vue View File

<template> <template>
<view class="container" style="background-color:#F4F6FA;">
<image style="width: 100%;" mode="widthFix"
src="https://qtzl.etcjz.cn/default-bucket/20240322/7380a0422a1e49fdb2fefc9d_beijing.png"></image>

<view style="position: absolute;width: 100%;top: 30%;">
<view class="top"
style="display: flex;flex-direction: column; justify-content: center;padding: 20px 40px;background-color: rgb(246, 246, 250);">

<view style="margin-bottom: 20px;font-size: 38rpx; text-align: center;font-family: Microsoft Yahei;">
我的权益</view>
<!-- <view v-if="exchangeCodes.length > 0" style="text-align: center;">暂无权益内容</view> @scrolltolower="loadMore" -->
<scroll-view scroll-y="true">

<view v-for="(item, index) in exchangeCodes" :key="index" class="item" @click.stop="click(item)">
<view style="display: flex;flex-direction: column;flex: 1;margin: 10px;">
<view style="display: flex;flex-direction: column;">

<text style="margin-top: 10rpx;">车牌号：{{item.vehiclePlate}}</text>

<text v-if="item.drawTime" style="margin-top: 10rpx;">领取时间：{{item.drawTime}}</text>
<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>
<text style="margin-top: 10rpx;">有效期：{{ item.periodOfValidity }}</text>
<view
style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">
<text v-if="item.redeemCodeStr" class="code">券码：{{ item.redeemCodeStr}}</text>
</view>
</view>
<view v-for="(list, index) in item.equityInfoItems">
<view v-if="list.equityType == 'COUPONS'">
<div class="horizontal-line"></div>
<view style="display: flex;flex-direction: column;">
<text style="width: 100%;">权益名称：{{list.productName}}</text>
<view
style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
<text class="text-w" style="flex: 1;margin-top: 5rpx;"
:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'color: orange;' : functBackName(list) == 'USED' ? 'color: green;' : 'color: gray;'">卡卷状态：{{functBackName(list) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(list) == 'WAIT_USE' ? '待领取' : functBackName(list) == 'USED' ? '已领取' : '已失效'}}</text>
<button
v-if="functBackName(list) != 'EXPIRED' && list && list.equityType !='ZFB'"
:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'background-color: orange;' : functBackName(list) == 'USED' ? 'background-color: green;' : 'background-color: gray;'"
class="copy-btn" data-code="{{item}}"
@click.stop="copyCode(list,functBackName(list),item)">
{{functBackName(list) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(list) == 'WAIT_USE' ? '立即领取' :
functBackName(list) == 'USED' ? '复制' : '已失效'}}</button>
</view>
</view>
</view>
<view v-if="list.equityType == 'ZFB'">
<div class="horizontal-line"></div>
<view style="display: flex;flex-direction: column;">
<text style="width: 100%;">权益名称：{{list.productName}}</text>
<view
style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
<text class="text-w" style="flex: 1;margin-top: 5rpx;color: #4caf50;">
卡卷状态：正常
</text>
<button style="background-color: #4caf50;" class="copy-btn"
data-code="{{item}}" @click.stop="copyCode(list,'EXPIRED',null)">
去使用
</button>
</view>
</view>
</view>
</view>
</view>
<view class="container" style="background-color:#E9EDF0;overflow: hidden;min-height: 100vh;">
<view class="item" v-for="(item, index) in exchangeCodes" :key="index" @click.stop="click(item)">
<view class="top">
<view>
<view style="display: flex;align-items: center;line-height: 58rpx;" v-if="item.vehiclePlate">
<image class="car" :src="`${$imgUrl}equity-car.png`" mode=""></image>
<text class="car-num">{{item.vehiclePlate}}</text>
</view> </view>

<view v-for="(item, index) in alonePurchaseData" :key="index" class="item"
@click.stop="click(item)">
<view style="display: flex;flex-direction: column;flex: 1;margin: 10px;">
<view style="display: flex;flex-direction: column;">

<!-- <text style="margin-top: 10rpx;">车牌号：{{item.vehiclePlate}}</text> -->

<text v-if="item.drawTime" style="margin-top: 10rpx;">领取时间：{{item.drawTime}}</text>
<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>
<text style="margin-top: 10rpx;">有效期：{{ item.periodOfValidity }}</text>
<view
style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">
<text v-if="item.redeemCodeStr" class="code">券码：{{ item.redeemCodeStr}}</text>
</view>
</view>
<view>
<view v-if="item.equityType == 'COUPONS'">
<div class="horizontal-line"></div>
<view style="display: flex;flex-direction: column;">
<text style="width: 100%;">权益名称：{{item.productName}}</text>
<view
style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
<text class="text-w" style="flex: 1;margin-top: 5rpx;"
:style="functBackName(item) == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : functBackName(item) == 'WAIT_USE' ? 'color: orange;' : functBackName(item) == 'USED' ? 'color: green;' : 'color: gray;'">卡卷状态：{{functBackName(item) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(item) == 'WAIT_USE' ? '待领取' : functBackName(item) == 'USED' ? '已领取' : '已失效'}}</text>
<button
v-if="functBackName(item) != 'EXPIRED' && item && item.equityType !='ZFB'"
:style="functBackName(item) == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : functBackName(item) == 'WAIT_USE' ? 'background-color: orange;' : functBackName(item) == 'USED' ? 'background-color: green;' : 'background-color: gray;'"
class="copy-btn" data-code="{{item}}"
@click.stop="copyCode(item,functBackName(item),item['couponInfoItem'])">
{{functBackName(item) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(item) == 'WAIT_USE' ? '立即领取' :
functBackName(item) == 'USED' ? '复制' : '已失效'}}</button>
</view>
</view>
</view>
<view v-if="item.equityType == 'ZFB'">
<div class="horizontal-line"></div>
<view style="display: flex;flex-direction: column;">
<text style="width: 100%;">权益名称：{{item.productName}}</text>
<view
style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
<text class="text-w" style="flex: 1;margin-top: 5rpx;color: #4caf50;">
卡卷状态：正常
</text>
<button style="background-color: #4caf50;" class="copy-btn"
data-code="{{item}}"
@click.stop="copyCode(item,'EXPIRED',item['couponInfoItem'])">
去使用
</button>
</view>
</view>
</view>
</view>
</view>
<view class="youxiao">有效期：{{ item.periodOfValidity }}</view>
</view>
<view class="activate" :style="{'--bgimg':`url(${$imgUrl}equity-bg3.png)`}">{{item.getStatus}}</view>
</view>
<view v-for="(list, index) in item.equityInfoItems">
<view class="go" v-if="item.equityType == 'COUPONS'">
<view>
<view class="title">权益名称：{{list.productName}}</view>
<view class="title">卡券状态：<text style="color: #01243A;">卡卷状态：{{functBackName(list) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(list) == 'WAIT_USE' ? '待领取' : functBackName(list) == 'USED' ? '已领取' : '已失效'}}</text></view>
</view> </view>
</scroll-view>
<view class="btn" data-code="{{item}}"
@click.stop="copyCode(list,functBackName(list),item)" v-if="functBackName(list) != 'EXPIRED' && list && list.equityType !='ZFB'">{{functBackName(list) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(list) == 'WAIT_USE' ? '立即领取' :
functBackName(list) == 'USED' ? '复制' : '已失效'}}</view>
</view>
<view class="go" v-if="list.equityType == 'ZFB'">
<view>
<view class="title">权益名称：{{list.productName}}</view>
<view class="title">卡卷状态：正常</view>
</view>
<view class="btn" data-code="{{item}}" @click.stop="copyCode(list,'EXPIRED',null)">去使用</view>
</view>
</view> </view>
</view> </view>
<!-- <view style="width: 100%; text-align: center;margin-top: 20rpx; ">暂无更多数据内容!</view> -->
<view class="item" v-for="(item, index) in alonePurchaseData" :key="index" @click.stop="click(item)">
<view class="top">
<view>
<view style="display: flex;align-items: center;line-height: 58rpx;" v-if="item.vehiclePlate">
<image class="car" :src="`${$imgUrl}equity-car.png`" mode=""></image>
<text class="car-num">{{item.vehiclePlate}}</text>
</view>
<view class="youxiao">有效期：{{ item.periodOfValidity }}</view>
</view>
<view class="activate" :style="{'--bgimg':`url(${$imgUrl}equity-bg3.png)`}">{{item.getStatus}}</view>
</view>
<view class="go" v-if="item.equityType == 'COUPONS'">
<view>
<view class="title">权益名称：{{item.productName}}</view>
<view class="title">卡券状态：<text style="color: #01243A;">{{functBackName(item) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(item) == 'WAIT_USE' ? '待领取' : functBackName(item) == 'USED' ? '已领取' : '已失效'}}</text></view>
</view>
<view class="btn" data-code="{{item}}"
@click.stop="copyCode(item,functBackName(item),item['couponInfoItem'])" v-if="functBackName(item) != 'EXPIRED' && item && item.equityType !='ZFB'">{{functBackName(item) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(item) == 'WAIT_USE' ? '立即领取' :
functBackName(item) == 'USED' ? '复制' : '已失效'}}</view>
</view>
<view class="go" v-if="item.equityType == 'ZFB'">
<view>
<view class="title">权益名称：{{item.productName}}</view>
<view class="title">卡卷状态：正常</view>
</view>
<view class="btn" data-code="{{item}}" @click.stop="copyCode(item,'EXPIRED',item['couponInfoItem'])">去使用</view>
</view>
</view>
</view> </view>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.container {
width: 100%;
height: 96vh;
}

.item {
display: flex;
margin-top: 10px;
width: 100%;
align-items: center;
justify-content: space-around;
background-color: white;
/* 淡灰色，透明度为 50% */
border-bottom: 1rpx solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
}

.code {
flex: 1;
height: 100%;
color: #333;
}

.copy-btn {
background-color: #4caf50;
color: #fff;
border: none;
min-width: 120rpx;
border-radius: 10rpx;
font-size: 24rpx;
height: 60rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
text-align: center;
display: inline-block;
line-height: 60rpx;
}

.copy-btn:hover {
background-color: #388e3c;
}


.text-w {
font-weight: bold;
}

.horizontal-line {
width: 100%;
/* 设置横线的宽度 */
height: 1px;
/* 设置横线的高度 */
background-color: #9ACDFA;
/* 设置横线的颜色 */
margin: 10px 0;
/* 可以根据需要调整横线与周围内容的间距 */
}
.item{
width: 95%;
background: #FFFFFF;
border-radius: 32rpx;
padding: 24rpx;
font-size: 26rpx;
box-sizing: border-box;
margin: 20rpx auto;
}
.btn{
padding: 16rpx 24rpx;
background-color:#01243A ;
border-radius: 32rpx;
color: white;
}
.activate{
color: white;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 215rpx;
height: 123rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-image: var(--bgimg);
position: absolute;
right: -5px;
top: -5px;
}
.car{
width: 36rpx;
height: 36rpx;
}
.top{
border-bottom: 2rpx solid #E9EDF0;
}
.car-num{
font-weight: 400;
font-size: 30rpx;
color: #111111;
margin-left: 7rpx;
}
.youxiao{
font-weight: 400;
font-size: 26rpx;
color: #999999;
margin-left: 40rpx;
line-height: 58rpx;
}
.go{
display: flex;
justify-content: space-between;
align-items: center;
}
.go>view:first-child{
width: 70%;
margin-top: 10rpx;
.title{
margin-bottom: 10rpx;
color: #545454;
}
}
</style> </style>

+ 130
- 9
subpackage/service/equityInfo/equityInfo.vue View File

<template> <template>
<view style="height: 100%;">
<!-- <view style="height: 100%;">
<rich-text style="flex: 1" :nodes="richText" /> <rich-text style="flex: 1" :nodes="richText" />
</view> -->
<view style="background-color:#E9EDF0;overflow: hidden;min-height: 100vh;font-size: 28rpx;">
<view class="title" :style="{'--bgimg':`url(${$imgUrl}equiet-bg2.png)`}">
<view class="name">
<text>{{params.productName}}</text>
<view><text>￥</text><text class="money">{{params.discountPrice/100}}</text></view>
</view>
<view class="date">有效期至{{params.endDate}}</view>
</view>
<view class="explain">
<view class="use">使用说明</view>
<view class="tips">
<view class="one">权益领取方式</view>
<view class="list">
<text class="point"></text>
<view>用户激活ETC后通过贵州黔通九州ETC小程序-服务模块-我的权益中主动领取兑换码。</view>
</view>
<view class="list">
<text class="point"></text>
<view>领取时限:自激活起180天内。</view>
</view>
</view>
<view class="tips">
<view class="one">权益使用方式</view>
<view class="list">
<text class="point"></text>
<view>进入途虎养车APP或途虎养车小程序，点击“我的”.“集团客户”-将兑换码添加到提示框-根据页面提示填入车牌-点击确认后显示兑换。</view>
</view>
<view class="list">
<text class="point"></text>
<view>点击已兑换的洗车卡券，选择就近门店，点击“导航”，到店说明使用途虎券码兑换服务，出示服务二维码即可使用服务。</view>
</view>
</view>
<view class="tips">
<view class="one">权益注意事项</view>
<view class="list">
<text class="point"></text>
<view>服务使用范围为7座(含)以下家用非营运客车，暂不支持面包车、商务车等中大型车辆。</view>
</view>
<view class="list">
<text class="point"></text>
<view>春节期间部分门店不能提供服务，具体可使用的服务门店请以卡券展示的门店;门店遇高峰期会排队，请注意合理安排时间或咨询途虎养车客服。</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
let singleEquityId = ref('') let singleEquityId = ref('')
let couponAgencyType = ref('') let couponAgencyType = ref('')
let couponId = ref('') let couponId = ref('')
let params = ref('')


onLoad((options) => { onLoad((options) => {
console.log("参数",options) console.log("参数",options)
console.log(res, '========='); console.log(res, '=========');
richText.value = res.productIntro richText.value = res.productIntro
couponId.value = res.couponId couponId.value = res.couponId
params.value=res
}) })
}) })

function onClick() {
uni.navigateTo({
url: '/subpackage/service/equity/equity?singleEquityId=' + singleEquityId.value +
"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + couponId.value,
})
}
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.copy-btn { .copy-btn {
color: #fff; color: #fff;
border: none; border: none;
width: 100%; width: 100%;
padding: 10rpx 0;
border-radius: 10rpx; border-radius: 10rpx;
font-size: 24rpx; font-size: 24rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
} }
.title{
background-size: 100% 100%;
background-repeat: no-repeat;
height: 250rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-image: var(--bgimg);
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: center;
justify-content: space-evenly;
margin: 20rpx;
box-sizing: border-box;
.name{
font-weight: 400;
font-size: 30rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex: 1;
padding: 0 30rpx 0 30rpx;
box-sizing: border-box;
.money{
font-size: 92rpx;
color: #F2DBAC;
}
}
.date{
color: #666666;
display: flex;
justify-content: flex-start;
width: 100%;
flex: 1;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
padding-top: 13rpx;
}
}
.explain{
width: 100%;
background-color: white;
margin-top: 20rpx;
padding: 20rpx;
box-sizing: border-box;
height: calc(100vh - 250rpx);
.use{
font-size: 32rpx;
color: #111111;
line-height: 35rpx;
font-family: MicrosoftYaHei;
font-weight: bold;
}
.tips{
.one{
font-size: 28rpx;
color: #111111;
line-height: 35rpx;
margin: 26rpx 0;
}
.list{
font-size: 28rpx;
color: #999999;
display: flex;
margin-bottom: 10rpx;
.point{
width: 10rpx;
height: 10rpx;
background: #A0A0A0;
display: inline-block;
border-radius: 100%;
margin-right: 20rpx;
margin-top: 10rpx;
}
}
}
}
</style> </style>

+ 46
- 29
subpackage/service/equityList/equityList.vue View File

<template> <template>
<view>
<view v-for="(item, index) in listData" :key="index" @click="onClick(item)" :data-code="item" class="item">
<view style="display: flex;justify-content: space-between;">
<text>{{ item.productName }}</text><text>></text>
</view>
<view style="display: flex;justify-content: flex-end;margin-top: 6rpx;">
<!-- 是否支付 1-已支付，2-未支付支付，3-已取消,4-已下单，未支付 -->
<text class="btn" v-if="item.isPay==2"
@click.stop="equityPaymentOrderRequest(item.id)">去支付</text>
</view>
<!-- <text class="btn" v-if="item.isPay==2"
@click.stop="equityPaymentOrderRequest(item.id)">去支付</text> -->

<view class="list" :style="{'--bgimg':`url(${$imgUrl}equiet-bg1.png)`}" v-for="(item, index) in listData" :key="index" @click="onClick(item)" :data-code="item">
<image class="name" :src="`${$imgUrl}equity-name.png`"></image>
<view class="right-content">
<view>{{item.productName}}</view>
<image class="icon-back" src="/static/image/icon-back.png" mode=""></image>
</view> </view>
</view> </view>
<view v-if="listData.length==0" class="no">暂无数据</view> <view v-if="listData.length==0" class="no">暂无数据</view>
}); });
} }
</script> </script>
<style lang='scss' scoped>
.item{
background-color: #22dbc8;
color: white;
border-radius: 20rpx;
padding: 15px 30rpx;
margin: 20rpx;
font-size: 28rpx;
}
.btn {
height: 50rpx;
line-height: 50rpx;
border-radius: 30rpx;
padding: 0 24rpx;
font-size: 23rpx;
<style>
page {
background: #E9EDF0;
font-size: 28rpx;
padding: 20rpx;
box-sizing: border-box; box-sizing: border-box;
margin-right: 12rpx;
border: 1px solid #fff;
color: #fff;
display: inline-block;
} }
</style>
<style lang='scss' scoped>
.no{ .no{
text-align: center; text-align: center;
margin: 40rpx auto; margin: 40rpx auto;
font-size: 28rpx; font-size: 28rpx;
} }
.list {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 168rpx;
text-align: right;
display: flex;
align-items: center;
background-image: var(--bgimg);
.name{
width: 60rpx;
height: 60rpx;
margin-left: 60rpx;
margin-right: 60rpx;
}
.right-content{
flex: 3;
display: flex;
align-items: center;
padding: 0 20rpx 0 40rpx;
box-sizing: border-box;
justify-content: space-between;
.icon-back{
width: 26rpx;
height: 36rpx;
transform: rotateY(180deg);
}
}
}
</style> </style>

+ 3
- 2
utils/network/api.js View File

export const carMessageApi = "854899f6244049d69b6ff883f28dcb28" // 车辆信息上传带出车辆信息 export const carMessageApi = "854899f6244049d69b6ff883f28dcb28" // 车辆信息上传带出车辆信息
export const getZfbOpenid = "62f02a3fd5eb462d9541aa21b78bba06" // 获取支付宝Openid支付宝 export const getZfbOpenid = "62f02a3fd5eb462d9541aa21b78bba06" // 获取支付宝Openid支付宝


export const channelSingQueryApi = "0c6d650d94274ee086008652fa0fe41a"




export const decrypt9901 = "c6e7c27e774c493d82c942dc69507d67" export const decrypt9901 = "c6e7c27e774c493d82c942dc69507d67"
export const delCarInfo = "/iaw/api/vehicleManage/delete"; //车辆管理信息删除 export const delCarInfo = "/iaw/api/vehicleManage/delete"; //车辆管理信息删除
export const createCarInfo = "/iaw/api/vehicleManage/add"; //车辆管理信息添加 export const createCarInfo = "/iaw/api/vehicleManage/add"; //车辆管理信息添加
export const selectCarInfo = "/iaw/api/vehicleManage/query"; //车辆管理信息查询 export const selectCarInfo = "/iaw/api/vehicleManage/query"; //车辆管理信息查询
export const changeCarInfo = "/iaw/api/vehicleManage/update"; //车辆管理信息修改
export const changeCarInfo = "/iaw/api/vehicleManage/update"; //车辆管理信息修改

export const channelSingQueryApi = "/iaw/sign/wxsigninfo"

Write Preview
Loading…
Cancel
Save