Skip to content

C
cauchy-ui
Commit 8a43632a authored by FE-安焕焕's avatar FE-安焕焕 👣
Browse files
Options

Merge branch 'pay' of git.quantgroup.cn:ui/cauchy-ui into pay

parents 0611deed 7791f6fc
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 107 deletions
src/api/tips.js
View file @ 8a43632a
export default {
101: `<p>充值类商品售出<strong>后无法进行退换</strong>，非充值用户请谨慎购买。</p>`,
102: `<p>充值类商品售出<strong>后无法进行退换</strong>，非充值用户请谨慎购买。</p>`
1: {
title: '温馨提示',
content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
},
2: {
title: '温馨提示',
content: `<p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>`
},
401: {
title: '使用方法',
content: `<p>1. 进入猫眼APP，登陆后打开“我的”，点击“优惠券”；</p>
<p>2. 进入“优惠券”，在页面上方白框中输入13位优惠券密码，点击“添加”即可；</p>
<p>3. 返回，选定场次并完成选座；</p>
<p>4. 核对购票信息、结算金额，点击“确认支付”完成选座购票；</p>
<p>5. 用户到影城“取票机”取票即可使用。</p>`
},
301: {
title: '使用方法',
content: `<p>1. 进入饿了么APP-选择我的-点击会员，使用兑换码兑换会员，输入兑换码即可兑换；</p>
<p>2. 饿了么月度会员含4个5元的红包总计20元，全品类通用(早餐及帮买帮送等特殊订单除外)，红包仅限购买会员时选择的城市使用；</p>
<p>3. 每完成1笔在线订单(实际支付金额大于等于20元)，即可获得1个奖励金，奖励金可累计并兑换各种无门槛红包及高额商家红包。</p>`
}
};
src/style/index.less
View file @ 8a43632a
......@@ -109,4 +109,10 @@ strong {
.text-14();
margin-bottom: @padding-xs;
}
}
.cr-dialog--header {
padding: @padding-xl;
&--isolated {
padding-bottom: 0;
}
}
\ No newline at end of file
src/style/theme.less
View file @ 8a43632a
......@@ -31,15 +31,13 @@
@cell-clear-color: @gray-4;
@field-label-width: 75px;
@dialog-width: 290px;
@dialog-font-size: 14px;
@dialog-border-radius: @border-radius-lg;
@dialog-message-font-size: 16px;
@dialog-has-title-message-text-color: @text-color;
@dialog-confirm-button-text-color: @red;
@dialog-has-title-message-text-color: @text-grey;
@navbar-default-height: @nav-bar-height;
@picker-toolbar-padding: @padding-unit - 2 @padding-md;
@picker-font-size: 14px;
@tabs-nav-background-color: @background-color;
\ No newline at end of file
@tabs-nav-background-color: @background-color;
@loading-text-color: @white;
\ No newline at end of file
src/views/home/components/RechargeInput.vue
View file @ 8a43632a
......@@ -15,7 +15,7 @@
/>
<div class="center-phone__list" :class="{ show: inputBlur }">
<div
v-for="(item, index) in list"
v-for="(item, index) in historyPhoneNoList"
:key="index"
class="center-phone__list-item"
@click="selectPhone(item)"
......@@ -32,8 +32,10 @@ import { phoneFormat, phoneTrim, checkPhoneFormat } from '@/service/utils.servic
const { getPhoneHome } = api;
export default {
props: {
userPhoneInfo: Object,
list: Array
userPhoneInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
......@@ -46,6 +48,9 @@ export default {
isDefaultphone: function() {
return this.phoneNo === this.userPhoneInfo?.phoneNo;
},
historyPhoneNoList() {
return this.userPhoneInfo?.historyPhoneNoList || [];
},
phoneNo: function() {
return phoneTrim(this.rechargeTel);
}
......
src/views/orderDetail/index.less
View file @ 8a43632a
......@@ -51,7 +51,12 @@
}
}
&__info {
&-right {
margin-left: auto;
color: @red !important;
}
&-item {
display: flex;
padding: 8px 0;
color: @text-grey;
.text-13();
......
src/views/orderDetail/index.vue
View file @ 8a43632a
......@@ -46,6 +46,7 @@
<div class="Od__item Od__info">
<div class="Od__info-item">
订单编号：<span>{{ orderInfo.orderDetail.orderNo || '' }}</span>
<span class="Od__info-right" @click="copyPwd(orderNo)">复制</span>
</div>
<div class="Od__info-item">
下单时间：<span>{{ orderInfo.orderDetail.orderTime || '' }}</span>
......@@ -78,7 +79,7 @@
v-if="orderInfo.orderStatusInfo.orderStatus === 11"
size="small"
plain
type="primary"
type="default"
shape="circle"
@click="openCancelPopup"
>
......@@ -98,7 +99,7 @@
v-if="orderInfo.orderStatusInfo.orderStatus === 21"
size="small"
plain
type="primary"
type="default"
shape="circle"
@click="orderNotify"
>
......@@ -115,12 +116,10 @@
再次购买
</cr-button>
</div>
<cancel-popup v-model="showCancelPopup" :order-info="currentOrder" />
</div>
</template>
<script>
import ListItem from '../orderList/components/ListItem.vue';
import CancelPopup from '../orderList/components/CancelPopup.vue';
import { setClipboardData } from '@/service/utils.service';
import orderApi from '@/api/order.api';
import img11 from '@/assets/images/order/11.png';
......@@ -138,11 +137,11 @@ const orderStatusImgs = {
export default {
name: 'OrderDetail',
components: {
ListItem,
CancelPopup
ListItem
},
data() {
return {
orderNo: '',
orderInfo: {
feeInfo: {},
orderDetail: {},
......@@ -151,8 +150,7 @@ export default {
skuList: [],
payDetail: {},
orderNo: ''
},
showCancelPopup: false
}
};
},
computed: {
......@@ -166,6 +164,9 @@ export default {
},
payType() {
return this.orderInfo.orderDetail.payType === 1 ? '微信' : '支付宝';
},
isKeyChange() {
return this.currentOrder.virtualChargeAttrs && this.currentOrder.virtualChargeAttrs.cardKey;
}
},
mounted() {
......@@ -182,26 +183,46 @@ export default {
'https://www.sobot.com/chat/h5/v2/index.html?sysnum=84ed0ad93caa47b0a9d1600824546b35&source=2';
},
openCancelPopup() {
this.showCancelPopup = true;
this.$dialog({
title: '取消订单',
message: '您真的要取消吗？',
confirmButtonText: '仍要取消',
cancelButtonText: '留下商品',
onConfirm: () => {
this.handleRadioSubmit();
}
});
},
async handleRadioSubmit() {
const [res] = await orderApi.orderCancel({
orderNo: this.currentOrder.orderNo,
cancelReason: '不想买了',
cancelReasonType: 4
});
if (res) {
this.$toast('已取消');
this.$set(this.orderInfo.orderStatusInfo, `orderStatus`, 51);
this.$set(this.orderInfo.orderStatusInfo, `orderStatusText`, '交易关闭');
}
},
toPay() {
console.log(this.currentOrder.orderNo);
this.$router.push({ path: '/pay', query: { orderNo: this.orderNo } });
},
toGoods() {
this.$router.push({ path: '/goods' });
this.$router.push({
path: this.isKeyChange ? '/vipLife' : '/home'
});
},
orderNotify() {
this.$toast.success('已通知卖家');
},
copyPwd(item) {
setClipboardData({
data: `${item.cardPassword}`,
data: '' + item,
success: () => {
this.$toast.success('已复制');
}
});
console.log(item);
}
}
};
......
src/views/orderList/components/CancelPopup.vue
View file @ 8a43632a
......@@ -72,7 +72,7 @@ export default {
},
computed: {
reason() {
return this.reasonList.find(item => item.cancelReasonType === this.reasonList);
return this.reasonList.find(item => item.cancelReasonType === this.reasonType);
}
},
watch: {
......
src/views/orderList/components/List.vue
View file @ 8a43632a
......@@ -18,7 +18,7 @@
<div class="Ol__foot">
<div class="Ol__foot-settle">
<span>总价¥{{ item.totalFee }}，</span>
<span>优惠¥{{ item.reduceFee }}，</span>
<span v-if="item.reduceFee">优惠¥{{ item.reduceFee }}，</span>
<span>
实付款<strong>¥{{ item.originalFee }}</strong>
</span>
......@@ -30,7 +30,7 @@
plain
type="default"
shape="circle"
@click="onOptionClick(item, 'cancel')"
@click.stop="onOptionClick(item, index, 'cancel')"
>
取消订单
</cr-button>
......@@ -40,7 +40,7 @@
plain
type="primary"
shape="circle"
@click="onOptionClick(item, 'pay')"
@click.stop="onOptionClick(item, index, 'pay')"
>
付款
</cr-button>
......@@ -50,7 +50,7 @@
plain
type="default"
shape="circle"
@click="onOptionClick(item, 'notify')"
@click.stop="onOptionClick(item, index, 'notify')"
>
提醒发货
</cr-button>
......@@ -60,7 +60,7 @@
plain
type="primary"
shape="circle"
@click="onOptionClick(item, 'again')"
@click.stop="onOptionClick(item, index, 'again')"
>
再次购买
</cr-button>
......@@ -119,8 +119,8 @@ export default {
onLoad() {
this.$emit(EVENT_LOADING);
},
onOptionClick(orderInfo, eventType) {
this.$emit(EVENT_CLICK, { orderInfo, eventType });
onOptionClick(orderInfo, index, eventType) {
this.$emit(EVENT_CLICK, { orderInfo: { ...orderInfo, index }, eventType });
},
toHome() {
this.$router.replace({ path: '/home' });
......
src/views/orderList/components/ListItem.vue
View file @ 8a43632a
......@@ -12,26 +12,26 @@
<div v-if="it.count" class="Ol__body-row">
<span class="Ol__body-count">{{ it.count }}件</span>
</div>
<div v-if="it.virtualChargeAttrs" class="Ol__body-skus">
<div v-if="it.virtualChargeAttrs.account" class="Ol__body-sku">
<div v-if="it.virtualRechargeAttrs" class="Ol__body-skus">
<div v-if="it.virtualRechargeAttrs.account" class="Ol__body-sku">
<span>充值帐户：</span>
<span class="Ol__body-val">{{ it.virtualChargeAttrs.account }}</span>
<span class="Ol__body-val">{{ it.virtualRechargeAttrs.account }}</span>
</div>
<div v-if="it.virtualChargeAttrs.registrationLocation" class="Ol__body-sku">
<div v-if="it.virtualRechargeAttrs.registrationLocation" class="Ol__body-sku">
<span>归属地：</span>
<span class="Ol__body-val">{{ it.virtualChargeAttrs.account }}</span>
<span class="Ol__body-val">{{ it.virtualRechargeAttrs.registrationLocation }}</span>
</div>
<div v-if="it.virtualChargeAttrs.cardNo" class="Ol__body-sku">
<div v-if="it.virtualRechargeAttrs.cardNo" class="Ol__body-sku">
<span>卡号：</span>
<span class="Ol__body-val">{{ it.virtualChargeAttrs.cardNo }}</span>
<span class="Ol__body-val">{{ it.virtualRechargeAttrs.cardNo }}</span>
</div>
<div v-if="it.virtualChargeAttrs.cardPassword" class="Ol__body-sku">
<div v-if="it.virtualRechargeAttrs.cardPassword" class="Ol__body-sku">
<span>卡密：</span>
<span class="Ol__body-val">{{ it.virtualChargeAttrs.cardPassword }}</span>
<span class="Ol__body-val">{{ it.virtualRechargeAttrs.cardPassword }}</span>
<a
v-if="props.showCopy"
href="javascript:;"
@click="parent.copyPwd(it.virtualChargeAttrs)"
@click="parent.copyPwd(it.virtualRechargeAttrs.cardPassword)"
>
复制
</a>
......
src/views/orderList/index.vue
View file @ 8a43632a
......@@ -11,14 +11,12 @@
/>
</cr-tab>
</cr-tabs>
<cancel-popup v-model="showCancelPopup" :order-info="currentOrder" />
</div>
</template>
<script>
import orderApi from '@/api/order.api';
import List from './components/List';
import { isApp } from '@/service/validation.service';
import CancelPopup from './components/CancelPopup';
const commonParams = {
loading: false,
finished: false,
......@@ -29,13 +27,11 @@ const commonParams = {
export default {
name: 'OrderList',
components: {
List,
CancelPopup
List
},
data() {
return {
isApp,
showCancelPopup: false,
currentTab: 0,
navList: [
{
......@@ -94,13 +90,11 @@ export default {
this.toGoods();
break;
default:
this.currentItems = {};
this.currentOrder = {};
break;
}
},
orderCancelPopup() {
this.showCancelPopup = true;
},
toPay() {
this.$router.push({ path: '/pay', query: { orderNo: this.currentOrder.orderNo } });
},
......@@ -113,6 +107,33 @@ export default {
setNavListData(key, val) {
this.$set(this.navList[this.currentTab], key, val);
},
orderCancelPopup() {
this.$dialog({
title: '取消订单',
message: '您真的要取消吗？',
confirmButtonText: '仍要取消',
cancelButtonText: '留下商品',
onConfirm: () => {
this.handleRadioSubmit();
}
});
},
async handleRadioSubmit() {
const [res] = await orderApi.orderCancel({
orderNo: this.currentOrder.orderNo,
cancelReason: '不想买了',
cancelReasonType: 4
});
if (res) {
this.$toast('已取消');
this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, 51);
this.$set(
this.navList[this.currentTab].list[this.currentOrder.index],
`orderStatusText`,
'交易关闭'
);
}
},
async getList() {
let { finished, page, pageSize, list, state: orderStatus } = this.navList[this.currentTab];
if (finished) return;
......
src/views/pay/components/PayCardItem.vue
View file @ 8a43632a
......@@ -44,11 +44,11 @@
</template>
<script>
// import { registeredEvents } from '@/utils/sa';
const payTypeE = [
'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
'PD_YXMMAEC_UserClickCashierSelectWechatPay'
];
const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
// const payTypeE = [
// 'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
// 'PD_YXMMAEC_UserClickCashierSelectWechatPay'
// ];
// const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
export default {
name: 'PayCardItem',
inject: ['payCard', 'pay'],
......
src/views/vipLife/components/AccountInput.vue
View file @ 8a43632a
......@@ -2,7 +2,13 @@
<div class="Vl__account">
<cr-field v-model="accountMask" :placeholder="`请输入${info.name || ''}账号`" clearable>
<template #button>
<cr-image v-if="info.icon" :src="info.icon" width="0.64rem" height="0.64rem" />
<cr-image
v-if="info.icon"
:src="info.icon"
fit="contain"
width="0.64rem"
height="0.64rem"
/>
</template>
</cr-field>
<!-- <div class="Vl__list" :class="{ show: !inputBlur }">
......@@ -46,7 +52,7 @@ export default {
computed: {
accountMask: {
get() {
return this.info.rechargeAccountType !== 3 ? this.phoneFormat(this.value) : this.value;
return this.info.type !== 101 ? this.phoneFormat(this.value) : this.value;
},
set(val) {
this.$emit('input', val.replace(/\s/g, ''));
......
src/views/vipLife/components/SkuList.vue
View file @ 8a43632a
<template functional>
<div class="Vl__sku" :class="{ disabled: props.disabled, 'three-col': props.threeCol }">
<div
v-for="(item, index) in props.list"
:key="index"
class="Vl__sku-item"
:class="{
cheap: item.price - item.salePrice > 0,
active: props.info.skuNo === item.skuNo,
nohhird: (index + 1) % 3 !== 0
}"
@click="parent.handleSkuSelected(item, index)"
>
<div class="Vl__sku-name">
{{ props.threeCol ? item.salePrice : item.skuName }}{{ showUnit ? '元' : '' }}
<template v-if="props.list.length">
<div
v-for="(item, index) in props.list"
:key="index"
class="Vl__sku-item"
:class="{
cheap: item.price - item.salePrice > 0,
active: props.info.skuNo === item.skuNo,
'no-stock': !item.hasStock,
nohhird: (index + 1) % 3 !== 0
}"
@click="item.hasStock && parent.handleSkuSelected(item, index)"
>
<div class="Vl__sku-name">
{{ props.threeCol ? item.salePrice : item.skuName }}{{ props.showUnit ? '元' : '' }}
</div>
<div class="Vl__sku-price">售价{{ item.price }}元</div>
</div>
<div class="Vl__sku-price">售价{{ props.threeCol ? item.price : item.salePrice }}元</div>
<div class="Vl__sku-tag">优惠</div>
</div>
</template>
<cr-empty v-else class="Vl__sku-empty" image="commodity" description="暂无商品～" />
</div>
</template>
<script>
......@@ -49,6 +52,9 @@ export default {
align-content: flex-start;
position: relative;
z-index: 1;
&-empty {
flex-flow: wrap;
}
&.disabled::before {
content: ' ';
z-index: 2;
......@@ -85,13 +91,45 @@ export default {
position: relative;
margin-bottom: @padding-xs;
transition: all 0.1s linear;
&::before {
content: ' ';
background: @gray-2;
.text-10();
border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
padding: 0 @padding-unit;
position: absolute;
top: 0;
right: 0;
display: none;
}
// 优惠
&.cheap {
.Vl__sku-tag {
&::before {
content: '\4f18\60e0';
display: block;
color: @white;
background: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
}
}
// 补货中
&.no-stock {
background: @white !important;
border-color: @grey-border !important;
pointer-events: none;
cursor: not-allowed;
&::before {
content: '\8865\8d27\4e2d';
display: block;
color: @white;
background: linear-gradient(90deg, #cecece 2%, #989898 98%);
}
.Vl__sku-name {
color: @gray-4 !important;
}
.Vl__sku-price {
color: @gray-4 !important;
}
}
&.active {
background: #fff5f5;
border: 1px solid @red;
......@@ -117,16 +155,6 @@ export default {
color: @gray-5;
.text-12();
}
&-tag {
background: @gray-2;
.text-10();
border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
padding: 0 @padding-unit;
position: absolute;
top: 0;
right: 0;
display: none;
}
}
}
</style>
src/views/vipLife/components/SpuList.vue
View file @ 8a43632a
<template>
<div ref="spuList" class="Vl__spu-wrapper">
<div class="Vl__spu" :style="{ width: numAddUnit(contentWidth) }">
<div class="Vl__spu" :style="{ minWidth: numAddUnit(contentWidth) }">
<div
v-for="(item, index) in list"
:key="index"
......@@ -8,10 +8,15 @@
:class="{ 'Vl__spu-item_active': info.spuNos === item.spuNos }"
@click="handleSpuClick($event, item, index)"
>
<cr-image :src="item.icon" height="1.093333rem" width="1.093333rem" class="Vl__spu-icon" />
<cr-image
:src="item.icon"
height="1.093333rem"
width="1.093333rem"
fit="contain"
class="Vl__spu-icon"
/>
<div class="Vl__spu-name">{{ item.name }}</div>
</div>
<div class="Vl__spu-placeholder" :style="{ width: numAddUnit(placeholderWidth) }" />
</div>
</div>
</template>
......@@ -42,34 +47,44 @@ export default {
};
},
computed: {
contentWidth() {
return ITEM_WIDTH * (this.list.length + 2.34);
}
},
watch: {
contentWidth() {
this.$nextTick(() => {
this.listWrapper && this.listWrapper.refresh();
this.listWrapper.scrollTo(0, 0);
this.listWrapper.refresh();
});
return ITEM_WIDTH * this.list.length + this.placeholderWidth;
},
placeholderWidth() {
return ((this.list.length % 4) + 1.335) * ITEM_WIDTH;
}
},
mounted() {
this.$nextTick(() => {
this.listWrapper = new BScroll(this.$refs.spuList, {
click: true,
scrollX: true,
scrollY: false
});
});
this.createScroller();
},
beforeDestroy() {
this.listWrapper.destroy();
},
methods: {
createScroller() {
this.$nextTick(() => {
if (this.listWrapper) {
this.listWrapper.destroy();
}
this.listWrapper = new BScroll(this.$refs.spuList, {
click: true,
scrollX: true,
scrollY: false
});
});
},
numAddUnit(num) {
return num / 37.5 + 'rem';
},
handleSpuClick(e, item, index) {
this.$parent.handleSpuSelected(item, index);
const target = e.path.find(item => item.className.indexOf('Vl__spu-item') > -1);
console.dir(target);
this.listWrapper.scrollToElement(target, 500, -10, 0);
}
}
......
src/views/vipLife/index.vue
View file @ 8a43632a
......@@ -15,8 +15,8 @@
<cr-loading color="#ec1500" />
</div>
<template v-if="tips">
<div class="Vl__panel-title">温馨提示</div>
<div class="Vl__panel-tips" v-html="tips" />
<div class="Vl__panel-title">{{ tips.title }}</div>
<div class="Vl__panel-tips" v-html="tips.content" />
</template>
</div>
<div class="Vl__bottom">
......@@ -64,7 +64,9 @@ export default {
return this.spuData[this.currentTab - 1] ? this.spuData[this.currentTab - 1].itemList : [];
},
tips() {
return tipsData[this.spuInfo.spuNos];
return this.spuInfo.type
? tipsData[this.spuInfo.type] || tipsData[+('' + this.spuInfo.type)[0]] || {}
: {};
}
},
mounted() {
......@@ -89,7 +91,6 @@ export default {
this.getSkuListDebounce();
},
handleSpuSelected(item) {
this.spuInfo = item;
this.updateSpuInfo(item);
this.getSkuListDebounce();
},
......@@ -110,18 +111,20 @@ export default {
},
getSkuListDebounce() {
this.showLoading = true;
this.skuList = [];
if (this.skuTimer) clearTimeout(this.skuTimer);
this.skuTimer = setTimeout(() => {
this.getSkuList();
}, 600);
},
async getSkuList() {
this.skuList = [];
const { spuNos, type } = this.spuInfo;
const [res] = await rechargeApi.getSkuList(spuNos, type);
if (res) {
this.skuList = res.rechargeList;
this.handleSkuSelected(res.rechargeList[0], 0);
const defaultItem = res.rechargeList.find(item => item.hasStock);
const defaultIndex = res.rechargeList.findIndex(item => item.hasStock);
defaultItem && this.handleSkuSelected(defaultItem, defaultIndex);
}
this.showLoading = false;
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment