Merge branch 'trunk' into feat/partner
* trunk: feat: update feat: update feat: search city feat: s 新页面 feat: biz-service
This commit is contained in:
eleanor.mao
162
src/components/search-city/index.less
Normal file
162
src/components/search-city/index.less
Normal file
@ -0,0 +1,162 @@
|
||||
@import '@/styles/variables.less';
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.search-city {
|
||||
background: #fff;
|
||||
|
||||
&__position-title {
|
||||
font-size: 24px;
|
||||
color: @blColorG1;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__position-city {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: @blColor;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-title {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #999;
|
||||
background: #f2f5f7;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 630px;
|
||||
padding: 12px 90px 26px 30px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&__hot-city-item {
|
||||
width: 140px;
|
||||
height: 58px;
|
||||
font-size: 28px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
border-radius: 58px;
|
||||
border: 2px solid @blColorG1;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__indexes-list {
|
||||
width: 100%;
|
||||
/* 兼容 iOS < 11.2 */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS >= 11.2 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
&__indexes-fragment {
|
||||
}
|
||||
|
||||
&__indexes-anchor {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: @blColorG1;
|
||||
background: #f2f5f7;
|
||||
}
|
||||
|
||||
&__indexes-cell {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
padding: 30px 24px;
|
||||
color: @blColor;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__indexes-bar {
|
||||
width: 44rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&__indexes-bar-item {
|
||||
font-size: 22px;
|
||||
color: @blColor;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__indexes-index-alert {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -80px;
|
||||
margin-top: -80px;
|
||||
border-radius: 80px;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
font-size: 70px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&__search-wrapper {
|
||||
&.group {
|
||||
background: linear-gradient(2.75deg, #ffffff 7.9%, #f2edff 97.24%);
|
||||
.search-city__search {
|
||||
background-color: transparent;
|
||||
.taroify-search__content--rounded {
|
||||
border: @blHighlightColor 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__banner {
|
||||
padding: 32px 24px 0;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: @blHighlightColor;
|
||||
.flex-row();
|
||||
|
||||
.text {
|
||||
padding: 0 12px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.dash {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
background: linear-gradient(270deg, #6d3df5 0%, #f7f4ff 100%);
|
||||
}
|
||||
&:last-child {
|
||||
background: linear-gradient(90deg, #6d3df5 0%, #f7f4ff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
234
src/components/search-city/index.tsx
Normal file
234
src/components/search-city/index.tsx
Normal file
@ -0,0 +1,234 @@
|
||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Search } from '@taroify/core';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST, GROUP_CITY_INDEXES_LIST } from '@/constants/city';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface Item {
|
||||
cityCode: number | string;
|
||||
cityName: string;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'search-city';
|
||||
const HOT_CITY = [
|
||||
{ cityCode: 110100, cityName: '北京' },
|
||||
{ cityCode: 310100, cityName: '上海' },
|
||||
{ cityCode: 440100, cityName: '广州' },
|
||||
{ cityCode: 440300, cityName: '深圳' },
|
||||
{ cityCode: 330100, cityName: '杭州' },
|
||||
{ cityCode: 430100, cityName: '长沙' },
|
||||
{ cityCode: 420100, cityName: '武汉' },
|
||||
{ cityCode: 350200, cityName: '厦门' },
|
||||
{ cityCode: 610100, cityName: '西安' },
|
||||
{ cityCode: 410100, cityName: '郑州' },
|
||||
{ cityCode: 510100, cityName: '成都' },
|
||||
{ cityCode: 340100, cityName: '合肥' },
|
||||
];
|
||||
|
||||
const OFFSET_INDEX_SIZE = 2;
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||
realtimeLogger.tag(PREFIX);
|
||||
const useHeight = () => {
|
||||
const [winHeight, setWinHeight] = useState(0);
|
||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const windowInfo = Taro.getWindowInfo();
|
||||
const windowHeight = windowInfo.windowHeight;
|
||||
setWinHeight(windowHeight);
|
||||
// 上下预留两个选项高度的空白
|
||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
||||
}, []);
|
||||
|
||||
return [winHeight, indexItemHeight];
|
||||
};
|
||||
export interface SearchCityProps {
|
||||
onSelectCity: (cityCode: string) => void;
|
||||
currentCity?: string;
|
||||
forGroup?: boolean;
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
export default function SearchCity({ onSelectCity, currentCity = '', forGroup = false, offset = 0 }: SearchCityProps) {
|
||||
const [winHeight, indexItemHeight] = useHeight();
|
||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
||||
const [touchMoving, setTouchMoving] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
||||
const showSearchList = searchResult.length > 0;
|
||||
const CITY_LIST = forGroup ? GROUP_CITY_INDEXES_LIST : CITY_INDEXES_LIST;
|
||||
|
||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = event.detail.value;
|
||||
log('handleSearchChange', value);
|
||||
if (!value) {
|
||||
setSearchResult([]);
|
||||
return;
|
||||
}
|
||||
const result: Item[] = [];
|
||||
CITY_LIST.forEach(obj => {
|
||||
obj.data.forEach(city => {
|
||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
||||
result.push({ ...city });
|
||||
}
|
||||
});
|
||||
});
|
||||
setSearchResult(result);
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const cityCode = e.currentTarget.dataset.code;
|
||||
onSelectCity(String(cityCode));
|
||||
},
|
||||
[onSelectCity]
|
||||
);
|
||||
|
||||
const handleTouchStart = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_LIST[index];
|
||||
if (item) {
|
||||
setTouchMoving(true);
|
||||
setTouchAnchor(item.letter);
|
||||
}
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchMove = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_LIST[index];
|
||||
item && setTouchAnchor(item.letter);
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setTouchMoving(false);
|
||||
log('touch end');
|
||||
}, []);
|
||||
|
||||
const handleClickAnchor = useCallback((anchor: string) => {
|
||||
setTouchAnchor(anchor);
|
||||
log('click anchor', anchor);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<ScrollView scrollY style={{ height: winHeight - offset }} scrollIntoView={touchAnchor}>
|
||||
<div className={`${PREFIX}__search-wrapper ${forGroup ? 'group' : ''}`}>
|
||||
{forGroup && (
|
||||
<div className={`${PREFIX}__banner`}>
|
||||
<div className="dash"></div>
|
||||
<div className="text">点击城市名称，进本地通告群，免费招主播</div>
|
||||
<div className="dash"></div>
|
||||
</div>
|
||||
)}
|
||||
<Search
|
||||
className={`${PREFIX}__search`}
|
||||
placeholder="输入城市名称"
|
||||
shape="rounded"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
{showSearchList && (
|
||||
<div className={`${PREFIX}__search-list`}>
|
||||
{searchResult.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!showSearchList && (
|
||||
<div>
|
||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
||||
<div className={`${PREFIX}__hot-city-container`}>
|
||||
{HOT_CITY.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__hot-city-item`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${PREFIX}__indexes-list`}>
|
||||
{CITY_LIST.map(item => {
|
||||
return (
|
||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
||||
{item.letter}
|
||||
</div>
|
||||
{item.data.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollView>
|
||||
<div>
|
||||
{!showSearchList && (
|
||||
<div
|
||||
className={`${PREFIX}__indexes-bar`}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onTouchCancel={handleTouchEnd}
|
||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE + offset }}
|
||||
>
|
||||
{CITY_LIST.map(item => {
|
||||
return (
|
||||
<div
|
||||
key={item.letter}
|
||||
className={`${PREFIX}__indexes-bar-item`}
|
||||
style={{ height: indexItemHeight }}
|
||||
onClick={() => handleClickAnchor(item.letter)}
|
||||
>
|
||||
{item.letter}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
89
src/components/user-batch-publish/index.less
Normal file
89
src/components/user-batch-publish/index.less
Normal file
@ -0,0 +1,89 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.user-batch-publish {
|
||||
padding: 16px 24px;
|
||||
|
||||
&__header-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
height: 100px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__cost-describe {
|
||||
height: 100px;
|
||||
padding: 0 32px;
|
||||
border-radius: 16px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
margin-top: 24px;
|
||||
|
||||
&__price {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__original_price {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
margin-left: 16px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&__illustrate {
|
||||
padding: 24px 32px;
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin-top: 8px;
|
||||
|
||||
&__view {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-button {
|
||||
.button(@width: 100%; @height: 80px; @fontSize: 32px);
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
195
src/components/user-batch-publish/index.tsx
Normal file
195
src/components/user-batch-publish/index.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import { Button, Image, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Cell } from '@taroify/core';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
|
||||
import PageLoading from '@/components/page-loading';
|
||||
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
|
||||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||||
import { ISelectOption, PopupSelect } from '@/components/select';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||||
import { BatchPublishGroup } from '@/types/group';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import {
|
||||
getOrderPrice,
|
||||
isCancelPay,
|
||||
requestAllBuyProduct,
|
||||
requestCreatePayInfo,
|
||||
requestOrderInfo,
|
||||
requestPayment,
|
||||
} from '@/utils/product';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface CityValue extends BatchPublishGroup {
|
||||
cityName: string;
|
||||
}
|
||||
|
||||
interface CityOption extends ISelectOption<CityValue> {
|
||||
value: CityValue;
|
||||
}
|
||||
|
||||
const PREFIX = 'user-batch-publish';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const SERVICE_ILLUSTRATE = `群发次数：每日一次，连发3天
|
||||
群发内容：仅限主播招聘通告，违规内容不发
|
||||
联系方法：通告中留通告主联系方式，主播直接联系`;
|
||||
const cityValues: CityValue[] = [
|
||||
{ cityCode: '440100', cityName: '广州', count: 300 },
|
||||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||||
{ cityCode: '330100', cityName: '杭州', count: 300 },
|
||||
{ cityCode: '110100', cityName: '北京', count: 100 },
|
||||
{ cityCode: '510100', cityName: '成都', count: 50 },
|
||||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||||
{ cityCode: '310100', cityName: '上海', count: 100 },
|
||||
{ cityCode: '420100', cityName: '武汉', count: 50 },
|
||||
{ cityCode: '610100', cityName: '西安', count: 50 },
|
||||
{ cityCode: '410100', cityName: '郑州', count: 100 },
|
||||
].sort((a, b) => b.count - a.count);
|
||||
const MIN_GROUP_SIZE = 20;
|
||||
const GROUP_OPTIONS = [
|
||||
{ value: MIN_GROUP_SIZE, productSpecId: ProductSpecId.GroupBatchPublish20, label: '20', price: 18 },
|
||||
{ value: 50, productSpecId: ProductSpecId.GroupBatchPublish50, label: '50', price: 40 },
|
||||
{ value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 },
|
||||
{ value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
|
||||
];
|
||||
|
||||
const calcPrice = (city: CityValue | null) => {
|
||||
if (!city) {
|
||||
return {};
|
||||
}
|
||||
const { count } = city;
|
||||
const originalPrice = count * 1;
|
||||
const price = GROUP_OPTIONS.find(o => o.value === count)?.price || 18;
|
||||
const productSpecId = GROUP_OPTIONS.find(o => o.value === count)?.productSpecId || ProductSpecId.GroupBatchPublish20;
|
||||
return { price, originalPrice, productSpecId };
|
||||
};
|
||||
|
||||
export default function UserBatchPublish() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCitySelect, setShowCitySelect] = useState(false);
|
||||
const [showQrCode, setShowQrCode] = useState(false);
|
||||
const [city, setCity] = useState<CityOption['value'] | null>(null);
|
||||
const [cityOptions, setCityOptions] = useState<CityOption[]>([]);
|
||||
const { price, originalPrice, productSpecId } = calcPrice(city);
|
||||
|
||||
const handleClickCity = useCallback(() => setShowCitySelect(true), []);
|
||||
|
||||
const handleSelectCity = useCallback(value => {
|
||||
setCity(value);
|
||||
setShowCitySelect(false);
|
||||
}, []);
|
||||
|
||||
const handleClickViewGroup = useCallback(() => navigateTo(PageUrl.GroupList, { city: city?.cityCode }), [city]);
|
||||
|
||||
const handleClickBuy = useCallback(async () => {
|
||||
// if (1 < 2) {
|
||||
// await new Promise(r => setTimeout(r, 3000));
|
||||
// setShowQrCode(true);
|
||||
// return;
|
||||
// }
|
||||
if (!price || !productSpecId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
Taro.showLoading();
|
||||
const allowBuy = await requestAllBuyProduct(ProductType.GroupBatchPublish);
|
||||
if (!allowBuy) {
|
||||
Taro.hideLoading();
|
||||
Toast.info('您最近已购买过，可直接联系客服');
|
||||
setShowQrCode(true);
|
||||
return;
|
||||
}
|
||||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||||
type: OrderType.GroupBatchPublish,
|
||||
amt: getOrderPrice(price),
|
||||
// amt: 1,
|
||||
productCode: ProductType.GroupBatchPublish,
|
||||
productSpecId: productSpecId,
|
||||
});
|
||||
log('handleBuy payInfo', payOrderNo, createPayInfo);
|
||||
await requestPayment({
|
||||
timeStamp: createPayInfo.timeStamp,
|
||||
nonceStr: createPayInfo.nonceStr,
|
||||
package: createPayInfo.packageVal,
|
||||
signType: createPayInfo.signType,
|
||||
paySign: createPayInfo.paySign,
|
||||
});
|
||||
const { status } = await requestOrderInfo({ payOrderNo });
|
||||
log('handleBuy orderInfo', status);
|
||||
if (status !== OrderStatus.Success) {
|
||||
throw new Error('order status error');
|
||||
}
|
||||
Taro.hideLoading();
|
||||
setShowQrCode(true);
|
||||
} catch (e) {
|
||||
Taro.hideLoading();
|
||||
Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
|
||||
log('handleBuy error', e);
|
||||
}
|
||||
}, [price, productSpecId]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
|
||||
const initCity = cOptions[0].value;
|
||||
|
||||
setLoading(false);
|
||||
setCity(initCity);
|
||||
setCityOptions(cOptions);
|
||||
log('init data done', cOptions);
|
||||
} catch (e) {
|
||||
Toast.error('加载失败请重试');
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <PageLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<Image mode="widthFix" className={`${PREFIX}__header-image`} src="https://neighbourhood.cn/pubJob.png" />
|
||||
<div className={`${PREFIX}__title`}>请选择城市</div>
|
||||
<Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
|
||||
<div className={`${PREFIX}__title`}>可购买群数</div>
|
||||
<Cell align="center" className={`${PREFIX}__cell`} title={city?.count} />
|
||||
<div className={`${PREFIX}__title`}>服务费用</div>
|
||||
<div className={`${PREFIX}__cost-describe`}>
|
||||
<div className={`${PREFIX}__cost-describe__price`}>{`${price}元`}</div>
|
||||
<div className={`${PREFIX}__cost-describe__original_price`}>{`原价：${originalPrice}元`}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__title`}>服务说明</div>
|
||||
<div className={`${PREFIX}__illustrate`}>
|
||||
<Text>{SERVICE_ILLUSTRATE}</Text>
|
||||
<div className={`${PREFIX}__illustrate__describe`}>
|
||||
<div>附：</div>
|
||||
<div className={`${PREFIX}__illustrate__describe__view`} onClick={handleClickViewGroup}>
|
||||
播络合作群列表
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
|
||||
立即购买
|
||||
</Button>
|
||||
<SafeBottomPadding />
|
||||
<div>
|
||||
<PopupSelect
|
||||
value={city}
|
||||
options={cityOptions}
|
||||
open={showCitySelect}
|
||||
onSelect={handleSelectCity}
|
||||
onClose={() => setShowCitySelect(false)}
|
||||
/>
|
||||
<PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user