wwl
/
bk-shop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: wwl:5a852daca0391d0ed8d422b0f7d0f46e7efcd7ee
Branches Tags
wwl:main
..
compare: wwl:82a04ee96fc46d229cbfb660b27509fff828dc67
Branches Tags
wwl:main

2 Commits
5a852daca0 ... 82a04ee96f

Author SHA1 Message Date
王文龙 82a04ee96f update 2024-02-01 10:52:06 +08:00
王文龙 3621def2f5 update 2024-01-24 09:39:31 +08:00
82 changed files with 3049 additions and 756 deletions
Show Stats Expand all files Collapse all files

38
src/api/req-dianwu.js
View File

@ -14,7 +14,7 @@ import { SG_DIANWU_TOKEN } from '@/consts'
import log from '@/utils/log'
import { HTTP_STATUS } from './consts'
function addQuery(url, query) {
function addQuery (url, query) {
return url + (url.indexOf('?') >= 0 ? '&' : '?') + query
}
@ -49,16 +49,16 @@ class RequestQueue {
this.isRunning = false
}
push(req) {
push (req) {
this.requestList.push(req)
}
destroy() {
destroy () {
this.isRunning = false
this.requestList = []
}
run() {
run () {
this.isRunning = true
const next = async () => {
const req = this.requestList.shift()
@ -82,7 +82,7 @@ class API {
this.requestQueue = new RequestQueue()
}
setOptions(opts) {
setOptions (opts) {
let { baseURL = '/' } = opts
if (!/\/$/.test(baseURL)) {
baseURL = baseURL + '/'
@ -102,7 +102,7 @@ class API {
this.options = options
}
errorToast(data) {
errorToast (data) {
let errMsg = data.message || (data.data && data.data.message) || '操作失败，请稍后重试'
if (errMsg.length > 11) {
@ -117,11 +117,11 @@ class API {
}, 200)
}
getReqUrl(url) {
getReqUrl (url) {
return /^http/.test(url) ? url : `${this.baseURL}${url.replace(/^\//, '')}`
}
handleLogout() {
handleLogout () {
this.requestQueue.destroy()
this.isRefreshingToken = false
// S.logout()
@ -148,7 +148,7 @@ class API {
}, 300)
}
intereptorReq(params) {
intereptorReq (params) {
const { url, data, header = {}, method = 'GET' } = params
const { company_id, appid } = this.options
const methodIsGet = method.toLowerCase() === 'get'
@ -202,7 +202,7 @@ class API {
return config
}
intereptorRes(res) {
intereptorRes (res) {
const { data, statusCode, config } = res
const { showError = true } = config
if (statusCode == HTTP_STATUS.SUCCESS) {
@ -241,7 +241,7 @@ class API {
return Promise.reject(this.reqError(res, `API error: ${statusCode}`))
}
async refreshToken() {
async refreshToken () {
this.isRefreshingToken = true
// const token = S.getAuthToken()
const token = Taro.getStorageSync(SG_DIANWU_TOKEN)
@ -284,7 +284,7 @@ class API {
* @return {Object} 请求返回的数据
* @memberof API
*/
async makeReq(config = {}, intereptorRes, intereptorReq) {
async makeReq (config = {}, intereptorRes, intereptorReq) {
const { showLoading } = config
const options = intereptorReq ? intereptorReq(config) : this.intereptorReq(config)
@ -301,7 +301,7 @@ class API {
const token = Taro.getStorageSync(SG_DIANWU_TOKEN)
if (
res.statusCode === HTTP_STATUS.UNAUTHORIZED &&
(res.data.data && res.data.data.status_code) === HTTP_STATUS.TOKEN_NEEDS_REFRESH && token
(res.data?.data && res.data.data?.status_code) === HTTP_STATUS.TOKEN_NEEDS_REFRESH && token
// S.getAuthToken()
) {
// token失效时重造请求，并刷新token
@ -328,7 +328,7 @@ class API {
return ret
}
pendingReq(config, intereptorRes, intereptorReq, isSend) {
pendingReq (config, intereptorRes, intereptorReq, isSend) {
return new Promise((resolve) => {
const pendingReq = async () => {
// 仅加入队列一次
@ -344,7 +344,7 @@ class API {
})
}
get(url, data, config) {
get (url, data, config) {
return this.makeReq({
...config,
url,
@ -353,14 +353,14 @@ class API {
})
}
reqError(res, msg = '') {
reqError (res, msg = '') {
const errMsg = (res.data && res.data?.data?.message) || msg
const err = new Error(errMsg)
err.res = res
return err
}
post(url, data, config) {
post (url, data, config) {
return this.makeReq({
...config,
url,
@ -369,7 +369,7 @@ class API {
})
}
put(url, data, config) {
put (url, data, config) {
return this.makeReq({
...config,
url,
@ -378,7 +378,7 @@ class API {
})
}
delete(url, data, config) {
delete (url, data, config) {
return this.makeReq({
...config,
url,

46
src/api/req.js
View File

@ -13,7 +13,7 @@ import {
import log from '@/utils/log'
import { HTTP_STATUS } from './consts'
function addQuery(url, query) {
function addQuery (url, query) {
return url + (url.indexOf('?') >= 0 ? '&' : '?') + query
}
@ -41,7 +41,7 @@ const request = (() => {
}
// 支付宝小程序，请求失败时，需要额外处理
if(isAlipay){
if (isAlipay) {
return async (...args) => {
let res
try {
@ -65,16 +65,16 @@ class RequestQueue {
this.isRunning = false
}
push(req) {
push (req) {
this.requestList.push(req)
}
destroy() {
destroy () {
this.isRunning = false
this.requestList = []
}
run() {
run () {
this.isRunning = true
const next = async () => {
const req = this.requestList.shift()
@ -98,7 +98,7 @@ class API {
this.requestQueue = new RequestQueue()
}
setOptions(opts) {
setOptions (opts) {
let { baseURL = '/' } = opts
if (!/\/$/.test(baseURL)) {
baseURL = baseURL + '/'
@ -118,7 +118,7 @@ class API {
this.options = options
}
errorToast(data) {
errorToast (data) {
let errMsg = data.message || (data.data && data.data.message) || '操作失败，请稍后重试'
if (errMsg.length > 11) {
@ -133,11 +133,11 @@ class API {
}, 200)
}
getReqUrl(url) {
getReqUrl (url) {
return /^http/.test(url) ? url : `${this.baseURL}${url.replace(/^\//, '')}`
}
handleLogout() {
handleLogout () {
this.requestQueue.destroy()
this.isRefreshingToken = false
S.logout()
@ -151,19 +151,19 @@ class API {
url = '/subpages/merchant/login'
} else if (isGoodsShelves()) {
url = '/subpages/guide/index'
} else if (VERSION_IN_PURCHASE){
} else if (VERSION_IN_PURCHASE) {
url = `/subpages/purchase/member`
} else {
url = `/subpages/member/index`
}
if(path != url) {
if (path != url) {
url = url + `?redirect_url=${encodeURIComponent(fullPath)}`
Taro.redirectTo({ url })
}
}, 300)
}
intereptorReq(params) {
intereptorReq (params) {
const { url, data, header = {}, method = 'GET' } = params
const { company_id, appid } = this.options
const methodIsGet = method.toLowerCase() === 'get'
@ -216,11 +216,11 @@ class API {
return config
}
intereptorRes(res) {
intereptorRes (res) {
const { data, statusCode, config } = res
const { showError = true } = config
if (statusCode == HTTP_STATUS.SUCCESS) {
const { status_code } = data.data
const { status_code } = data.data || {}
if (!status_code) {
return data.data
} else {
@ -255,10 +255,10 @@ class API {
return Promise.reject(this.reqError(res, `API error: ${statusCode}`))
}
async refreshToken() {
async refreshToken () {
this.isRefreshingToken = true
const token = S.getAuthToken()
console.log('refreshToken',66);
console.log('refreshToken', 66)
try {
await this.makeReq(
{
@ -298,7 +298,7 @@ class API {
* @return {Object} 请求返回的数据
* @memberof API
*/
async makeReq(config = {}, intereptorRes, intereptorReq) {
async makeReq (config = {}, intereptorRes, intereptorReq) {
const { showLoading } = config
const options = intereptorReq ? intereptorReq(config) : this.intereptorReq(config)
@ -342,7 +342,7 @@ class API {
return ret
}
pendingReq(config, intereptorRes, intereptorReq, isSend) {
pendingReq (config, intereptorRes, intereptorReq, isSend) {
return new Promise((resolve) => {
const pendingReq = async () => {
// 仅加入队列一次
@ -358,7 +358,7 @@ class API {
})
}
get(url, data, config) {
get (url, data, config) {
return this.makeReq({
...config,
url,
@ -367,14 +367,14 @@ class API {
})
}
reqError(res, msg = '') {
reqError (res, msg = '') {
const errMsg = (res.data && res.data?.data?.message) || msg
const err = new Error(errMsg)
err.res = res
return err
}
post(url, data, config) {
post (url, data, config) {
return this.makeReq({
...config,
url,
@ -383,7 +383,7 @@ class API {
})
}
put(url, data, config) {
put (url, data, config) {
return this.makeReq({
...config,
url,
@ -392,7 +392,7 @@ class API {
})
}
delete(url, data, config) {
delete (url, data, config) {
return this.makeReq({
...config,
url,

11
src/api/shop.js
View File

@ -87,7 +87,7 @@ export function getShopTemplate (params) {
/**
* @function 店铺首页模版配置
*/
export function getStoreShopTemplate (params) {
export function getStoreShopTemplate (params) {
return req.get(`/pagestemplate/shopDetail`, {
template_name: 'yykweishop',
weapp_pages: 'index',
@ -102,6 +102,11 @@ export function getMapKeyDetail (params) {
}
// 获取小程序价格配置
export function getAppGoodsPriceSetting() {
export function getAppGoodsPriceSetting () {
return req.get('/setting/itemPrice')
}
}
// 获取首页轮播图
export function homeSwiperList (params) {
return req.get('/xiudibanner', params)
}

2
src/app.config.js
View File

@ -275,6 +275,8 @@ const config = {
'pages/trade/refund-detail', //售后申请提交结果页面
'pages/trade/refund-sendback', //售后填写物流公司页面
'pages/trade/invoice-list', //发票管理
'pages/trade/invoice-info', //发票信息
'pages/trade/invoice-record', //发票列表
// 'pages/cashier/index', //收银台页面
// 'pages/cashier/cashier-result', //支付结果页面
'pages/qrcode-buy', //二维码购买页

BIN
src/assets/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 B

29
src/components/address/address.scss
View File

@ -9,7 +9,21 @@
.address {
display: flex;
align-items: center;
padding: 24px 16px;
padding: 24px 28px;
.dz-addr {
font-size: 40px;
color: #000;
line-height: 1;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.bj {
font-size: 26px;
line-height: 1;
padding: 18px 20px;
}
}
}
// choose-address
&__bd {
@ -28,16 +42,17 @@
}
.user-info-trade {
color: #666;
font-size: 28px;
font-size: 26px;
.name {
margin-right: $edge-margin;
margin-right: 8px;
}
}
.address-detail {
color: #222;
font-weight: bold;
font-size: 32px;
padding: 24px 0;
color: #666;
// font-weight: bold;
font-size: 26px;
// padding: 24px 0;
padding-top: 6px;
}
.address-area {
color: #666;

18
src/components/address/choose-address.js
View File

@ -17,10 +17,10 @@ import './address.scss'
)
export default class AddressChoose extends Component {
static defaultProps = {
onClickBack: () => {}
onClickBack: () => { }
}
constructor (props) {
constructor(props) {
super(props)
this.state = {}
@ -45,25 +45,31 @@ export default class AddressChoose extends Component {
return (
<View className='address-picker'>
<View className='address' onClick={this.clickTo.bind(this, 'choose')}>
<View className='address'>
{isObjectsValue(isAddress) ? (
<View className='address-picker__bd'>
<View className='address-receive'>
<View className='info-trade'>
<View className='address-area'>
{/* <View className='address-area'>
{isAddress.is_def && <View className='def'>默认</View>}
{isAddress.province}
{isAddress.city}
{isAddress.county}
</View> */}
<View className="dz-addr">
<Text>收货地址</Text>
<Text className='bj' onClick={this.clickTo.bind(this, 'choose')}>编辑</Text>
</View>
<View className='address-detail'>{isAddress.adrdetail}</View>
<View className='user-info-trade'>
<Text className='name'>{isAddress.username}</Text>
<Text>{isAddress.telephone}</Text>
</View>
<View className='address-detail'> {isAddress.province}
{isAddress.city}
{isAddress.county}{isAddress.adrdetail}</View>
</View>
</View>
<View className='sp-cell__ft-icon iconfont icon-arrowRight'></View>
{/* <View className='sp-cell__ft-icon iconfont icon-arrowRight'></View> */}
</View>
) : (
<View className='address-info__bd'>+请选择收货地址</View>

3
src/components/search-bar/index.scss
View File

@ -5,7 +5,7 @@
box-sizing: border-box;
&__focus {
height: 100vh;
z-index: 10;
z-index: 99;
position: absolute;
top: 0;
left: 0;
@ -14,6 +14,7 @@
padding: 16px 28px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
&.without-dialog {
height: auto;
}

19
src/components/sp-checkbox/index.scss
View File

@ -6,8 +6,25 @@
margin-left: 10px;
}
.icon-my {
transition: all 0.2s ease-in-out;
transition: all 0.3s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(0.1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
// .icon-checkbox-weixuan {
// animation: scale 0.5s reverse forwards;
// }
// .icon-checkbox-xuanzhong {
// animation: scale 0.5s forwards;
// }
.icon-checkbox-xuanzhong,
.icon-roundcheckfill {
font-size: 40px;

5
src/components/sp-default/index.js
View File

@ -6,7 +6,8 @@ import SpImage from './../sp-image'
import './index.scss'
const TYPES = {
cart: 'empty_cart.png'
// cart: 'empty_cart.png'
cart: 'cart/logo-hui.png'
}
function SpDefault (props) {
@ -21,7 +22,7 @@ function SpDefault (props) {
)}
>
<View className='sp-default-hd'>
{type && <SpImage className='default-img' src={TYPES[type]} width={350} />}
{type && <SpImage className='default-img' src={TYPES[type]} width={350} isNew />}
</View>
<View className='sp-default-bd'>{message}</View>
<View className='sp-default-ft'>{children}</View>

20
src/components/sp-filter-bar-new/index.js
View File

@ -16,9 +16,9 @@ export default class SpFilterBar extends Component {
sort: {},
current: 0,
list: [
{ text: '推荐', val: '0' },
{ text: '上架时间', val: '3' },
{ text: '价格低-高', val: '1' },
// { text: '推荐', val: '0' },
{ text: '上架时间', val: '6' }, //更新时间降序
{ text: '价格低-高', val: '3' },
{ text: '价格高-低', val: '2' },
]
}
@ -31,6 +31,7 @@ export default class SpFilterBar extends Component {
curIdx: current,
sortOrder: 1,
value: '0',
sortVal: '0',
showFilter: false
}
}
@ -54,19 +55,18 @@ export default class SpFilterBar extends Component {
})
}
handleConfirm = (val, index) => {
console.log("🚀 ~ SpFilterBar ~ val:", val, index)
handleConfirm = ({ val }, index) => {
// this.setState({
// value: val
// })
// this.props.onChange({
// current: val
// })
this.props.onChange({
current: val
})
}
render () {
const { list = [], className, custom, color, num } = this.props
const { sortOrder, curIdx, value, showFilter } = this.state
const { sortOrder, curIdx, value, showFilter, sortVal } = this.state
return (
<View className={classNames('sp-filter-bar', className)}>
@ -95,7 +95,7 @@ export default class SpFilterBar extends Component {
<AtIcon value='menu' size='16' color='#000'></AtIcon>
</View>
</SpPicker>
<SpPicker mode="select" source={list} value={value} pickerConfirm={this.handleConfirm.bind(this)} leftBtnTxt="排序" rightBtnTxt={<AtIcon value="close" size={14} color="#000"></AtIcon>}>
<SpPicker mode="select" source={list} value={sortVal} pickerConfirm={this.handleConfirm.bind(this)} leftBtnTxt="排序" rightBtnTxt={<AtIcon value="close" size={14} color="#000"></AtIcon>}>
<View className="item item-right">
<Text className='text'>排序</Text>
<Image className="img" src={require('@/assets/icon/sort.png')}></Image>

170
src/components/sp-goods-cell/index.js
View File

@ -7,13 +7,29 @@ import { GOODS_TYPE } from '@/consts'
import { VERSION_IN_PURCHASE } from '@/utils'
import './index.scss'
function SpGoodsCell(props) {
function SpGoodsCell (props) {
const { info, onSelectSku } = props
const { userInfo = {}, vipInfo = {} } = useSelector((state) => state.user)
if (!info) {
return null
}
const desc = info.itemSpecDesc
let desc_info = ''
if (desc) {
try {
const descArr = desc.split(',')
descArr.forEach((item, index) => {
let [_, value] = item.split(':')
if (index === 1) {
value = value.substring(0, 2)
}
desc_info += value + ' '
})
} catch (error) {
}
}
const handleClick = () => {
onSelectSku && onSelectSku(info)
}
@ -45,89 +61,91 @@ function SpGoodsCell(props) {
// console.log('isNaN(memberPrice):', info.orderItemType)
return (
<View className='sp-goods-cell'>
<View className='goods-item-hd'>
<SpImage mode='aspectFit' src={info.img} width={180} height={180} />
</View>
<View className='goods-item-bd'>
<View className='item-hd'>
<View className='goods-title'>{info.itemName}</View>
<>
<View className='sp-goods-cell'>
<View className='goods-item-hd'>
<SpImage mode='aspectFit' src={info.img} width={150} height={150} />
</View>
<View className='item-bd'>
<View>
{/* 多规格商品 */}
{!info.nospec && (
<View className='goods-sku' onClick={handleClick}>
{onSelectSku && (
<View className='spec-text'>
{info.specText || '选择规格'}
<Text className='iconfont icon-qianwang-01'></Text>
</View>
)}
{!onSelectSku && info.itemSpecDesc}
<View className='goods-item-bd'>
<View className='item-hd'>
<View className='goods-title'>{info.itemName}</View>
</View>
<View className='item-bd'>
<View>
{/* 多规格商品 */}
{!info.nospec && (
<View className='goods-sku' onClick={handleClick}>
{onSelectSku && (
<View className='spec-text'>
{desc_info || info.specText || '选择规格'}
<Text className='iconfont icon-qianwang-01'></Text>
</View>
)}
{!onSelectSku && (desc_info || info.itemSpecDesc)}
</View>
)}
</View>
</View>
<View className='labels-block'>
{!isNaN(memberPrice) && !VERSION_IN_PURCHASE && (
<View className='goods-type'>
{vipInfo?.isVip ? vipInfo?.grade_name : userInfo?.gradeInfo?.grade_name}
</View>
)}
</View>
</View>
<View className='labels-block'>
{!isNaN(memberPrice) && !VERSION_IN_PURCHASE && (
<View className='goods-type'>
{vipInfo?.isVip ? vipInfo?.grade_name : userInfo?.gradeInfo?.grade_name}
</View>
)}
{info?.orderItemType && info?.orderItemType != 'normal' && (
<View className='goods-type'>{GOODS_TYPE[info.orderItemType]}</View>
)}
{info.discount_info?.map((sp, idx) => {
if (sp.type != 'coupon_discount' && sp.type != 'member_price') {
return (
<View className='goods-type' key={`goods-type__${idx}`}>
{sp.info}
</View>
)
}
})}
{cusActivity?.map((el) => {
let limitTxt = ''
let limitNum = ''
if (el?.activity_type == 'limited_buy') {
limitNum = el?.limit
if (el?.day == 0) {
limitTxt = `限购${limitNum}件`
} else {
limitTxt = `每${el?.day}天，限购${limitNum}件`
}
}
{
/* else if (el?.activity_type == 'seckill' || el?.activity_type == 'limited_time_sale') {
limitNum = el?.limit
limitTxt = `（限购${limitNum}件）`
} else if (el?.activity_type == 'member_tag_targeted_promotion') {
limitTxt = '专属优惠'
} */
}
return <View className='goods-type'>{limitTxt}</View>
})}
{/* {limitTxt && <View className='goods-type'>{limitTxt}</View>} */}
</View>
<View className='item-ft'>
<View className='price-gp'>
{isPoint && <SpPoint value={point} />}
{!isPoint && <SpPrice value={_price}></SpPrice>}
{info.marketPrice > 0 && (
<SpPrice
className='market-price'
size={28}
lineThrough
value={info.marketPrice}
></SpPrice>
{info?.orderItemType && info?.orderItemType != 'normal' && (
<View className='goods-type'>{GOODS_TYPE[info.orderItemType]}</View>
)}
{info.discount_info?.map((sp, idx) => {
if (sp.type != 'coupon_discount' && sp.type != 'member_price') {
return (
<View className='goods-type' key={`goods-type__${idx}`}>
{sp.info}
</View>
)
}
})}
{cusActivity?.map((el) => {
let limitTxt = ''
let limitNum = ''
if (el?.activity_type == 'limited_buy') {
limitNum = el?.limit
if (el?.day == 0) {
limitTxt = `限购${limitNum}件`
} else {
limitTxt = `每${el?.day}天，限购${limitNum}件`
}
}
{
/* else if (el?.activity_type == 'seckill' || el?.activity_type == 'limited_time_sale') {
limitNum = el?.limit
limitTxt = `（限购${limitNum}件）`
} else if (el?.activity_type == 'member_tag_targeted_promotion') {
limitTxt = '专属优惠'
} */
}
return <View className='goods-type'>{limitTxt}</View>
})}
{/* {limitTxt && <View className='goods-type'>{limitTxt}</View>} */}
</View>
<View className='item-ft'>
{info.num && <Text className='item-num'>x {info.num}</Text>}
{info.num && <Text className='item-num'>数量：{info.num}</Text>}
</View>
</View>
</View>
</View>
<View className='price-gp'>
{isPoint && <SpPoint value={point} />}
{!isPoint && <SpPrice value={_price} noDecimal={false} showSeparator ></SpPrice>}
{info.marketPrice > 0 && (
<SpPrice
className='market-price'
size={32}
lineThrough
value={info.marketPrice}
></SpPrice>
)}
</View>
</>
)
}

23
src/components/sp-goods-cell/index.scss
View File

@ -1,12 +1,17 @@
.sp-goods-cell {
display: flex;
.goods-item-hd {
margin-right: 24px;
margin-right: 60px;
}
.goods-item-bd {
flex: 1;
// flex-direction: column;
// display: flex;
// justify-content: space-between;
.goods-title {
max-width: 400px;
font-size: 20px;
color: #000;
@include multi-ellipsis(2);
}
.item-bd {
@ -16,13 +21,15 @@
justify-content: space-between;
.goods-sku {
background: #f5f5f5;
height: 46px;
line-height: 46px;
padding: 0 2px;
color: #666;
// background: #f5f5f5;
// height: 46px;
// line-height: 46px;
// padding: 0 2px;
color: #333;
display: inline-block;
max-width: 400px;
font-size: 20px;
padding: 26px 0;
@include text-overflow();
}
}
@ -30,6 +37,8 @@
.item-ft {
display: flex;
justify-content: space-between;
font-size: 20px;
line-height: 1;
.price-gp {
display: flex;
align-items: flex-end;
@ -43,7 +52,7 @@
.spec-text {
display: flex;
align-items: center;
font-size: 26px;
font-size: 20px;
color: #222;
.icon-qianwang-01 {
font-size: 16px;

108
src/components/sp-goods-item/index.js
View File

@ -4,6 +4,7 @@ import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { SpImage, SpPoint, SpPrice, SpVipLabel } from '@/components'
import { fetchUserFavs, addUserFav, deleteUserFav } from '@/store/slices/user'
import throttle from 'lodash/throttle'
import qs from 'qs'
import api from '@/api'
import S from '@/spx'
@ -37,11 +38,20 @@ function SpGoodsItem (props) {
showPrice = true,
hideStore = false,
renderBrand,
mode = 'scaleToFill'
mode = 'scaleToFill',
showSalePrice = true,
height = 310,
width = 310
} = props
const [info, setInfo] = useState(props.info || null)
const [current, setCurrent] = useState(0)
const [move, setMove] = useState(0)
const [selColorItem, setSelColorItem] = useState({})
const setSelColor = (index, item) => {
setCurrent(index)
setSelColorItem(item)
}
const handleFavClick = async (e) => {
e.stopPropagation()
@ -62,16 +72,16 @@ function SpGoodsItem (props) {
}
const handleClick = () => {
const { itemId, distributorId, card_id, code, user_card_id, point } = info
const { itemId, item_id, distributorId, distributor_id, card_id, code, user_card_id, point } = info
if (onClick) {
onClick()
return
}
let query = { id: itemId }
if (typeof distributorId != 'undefined') {
let query = { id: itemId || item_id }
if (typeof distributorId != 'undefined' || typeof distributor_id != 'undefined') {
query = {
...query,
dtid: distributorId
dtid: distributorId || distributor_id
}
}
if (card_id) {
@ -82,8 +92,9 @@ function SpGoodsItem (props) {
user_card_id
}
}
const url = `${!!point ? '/subpages/pointshop/espier-detail' : '/pages/item/espier-detail'}?${qs.stringify(query)}`
query.idx = current
// const url = `${!!point ? '/subpages/pointshop/espier-detail' : '/pages/item/espier-detail'}?${qs.stringify(query)}`
const url = `${'/pages/item/espier-detail'}?${qs.stringify(query)}`
Taro.navigateTo({
url
})
@ -93,17 +104,38 @@ function SpGoodsItem (props) {
return null
}
const colors = [{ color: '#000' }, { color: '#fff' }, { color: 'skyblue' }, { color: 'purple' }]
const colors = [{ color_value: '#000' }, { color_value: '#fff' }, { color_value: 'skyblue' }, { color_value: 'purple' }]
// console.log( "favs:", favs );
const isFaved = favs.findIndex((item) => item.item_id == info.itemId) > -1
const isShowStore =
!hideStore && VERSION_PLATFORM && info.distributor_info && !Array.isArray(info.distributor_info)
let left = false
const handleLeft = () => {
if (left) return
left = true
setMove(move > 1 ? move - 1 : 0)
setTimeout(() => {
left = false
}, 800)
}
let right = false
const i = (info.spec_images || colors).length
const handleRight = () => {
if (right) return
right = true
setMove(move < i - 2 ? move + 1 : move)
setTimeout(() => {
right = false
}, 1000)
}
return (
<View className={classNames('sp-goods-item')} onClick={handleClick.bind(this)}>
<View className='goods-item__hd'>
<SpImage lazyLoad src={info.pic} height={310} width={310} mode={"aspectFill"} />
<View className="new">NEW</View>
<SpImage lazyLoad src={selColorItem.item_image_url?.[0] || info.spec_images?.[0]?.item_image_url?.[0] || info.pic} height={height} width={width} mode={"scaleToFill"} />
{info.tagList.map((item, index) => <View className="new" style={{ borderColor: item.tag_color, color: item.font_color, left: index === 0 ? '20rpx' : index * 30 + 8 + 'rpx' }} key={index + item.item_id}>{item.tag_name}</View>)}
{/* <View className="new" style={{ left: '120rpx' }}>NEW</View> */}
</View>
{/* {renderBrand && <View className='goods-brand-wrap'>{renderBrand}</View>} */}
<View className='goods-item__bd'>
@ -121,26 +153,28 @@ function SpGoodsItem (props) {
)}
<View className='goods-info'>
<View className='goods-desc'>{info.brief}</View>
<View className='goods-title'>{info.itemName}</View>
<View className="goods-price">
<Text className="symobol">¥</Text>
<Text className="price">{info.activityPrice || info.price}</Text>
</View>
<View className="switch-color" onClick={(e) => e.stopPropagation()}>
<Text className="icon-my icon-arrow" onClick={() => setMove(move > 1 ? move - 1 : 0)}></Text>
<ScrollView onScroll={(e) => {
console.log(e.detail.scrollLeft / 32)
// setMove(Math.floor(e.detail.scrollLeft / 32))
}} scrollLeft={move * 32} scrollX scrollWithAnimation className='color-box' showScrollbar={false}>
{(info.colors || colors).map((item, index) => (
<View className='color-item' style={{ transfor: `translateX(-${move * 32}px)` }} onClick={() => setCurrent(index)}>
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color || '#000' }} key={`color__${index}`}></View>
</View>
))}
</ScrollView>
<Text className="icon-my icon-arrow-right" onClick={() => setMove(move < (info.colors || colors).length - 2 ? move + 1 : move)}></Text>
</View>
<View className='goods-desc-text'>{info.item_name || info.itemName}</View>
<View className='goods-title'>{info.brief}</View>
{showSalePrice && <>
<View className="goods-price">
<Text className="symobol">¥</Text>
<Text className="price">{info.activityPrice || info.price}</Text>
</View>
<View className="switch-color" onClick={(e) => e.stopPropagation()}>
<Text className="icon-my icon-arrow" onClick={handleLeft}></Text>
<ScrollView onScroll={(e) => {
// console.log(e.detail.scrollLeft / 32)
// setMove(Math.floor(e.detail.scrollLeft / 32))
}} scrollLeft={move * 32} scrollX scrollWithAnimation className='color-box' showScrollbar={false}>
{(info.spec_images || colors).map((item, index) => (
<View className='color-item' style={{ transform: `translateX(-${move * 32}px)` }} onClick={() => setSelColor(index, item)} key={`color__${index}`}>
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color_value || '#000' }}></View>
</View>
))}
</ScrollView>
<Text className="icon-my icon-arrow-right" onClick={handleRight}></Text>
</View>
</>}
</View>
{/* 促销活动标签 */}
@ -154,13 +188,13 @@ function SpGoodsItem (props) {
</View>
)}
<View className='bd-block'>
{false && <View className='bd-block'>
{/* 商品价格、积分 */}
{info.point && (
{/* {info.point && (
<View className='goods-point'>
<SpPoint value={info.point} />
</View>
)}
)} */}
{!info.point && showPrice && (
<View className='goods-price'>
@ -220,10 +254,10 @@ function SpGoodsItem (props) {
/>
</View>
)} */}
</View>
</View>}
{isShowStore && (
<View className='goods__store' onClick={() => onStoreClick(info)}>
<View className='goods__store' onClick={() => onStoreClick(info, current)}>
<SpImage
src={info.distributor_info.distributor_info || 'shop_default_logo.png'}
width={60}
@ -238,7 +272,7 @@ function SpGoodsItem (props) {
)}
</View>
<View className='goods-item__ft'>{renderFooter}</View>
{renderFooter && <View className='goods-item__ft'>{renderFooter}</View>}
{/* {info.brand && (
<View className='goods-item__ft'>

28
src/components/sp-goods-item/index.scss
View File

@ -2,7 +2,8 @@
background-color: #fff;
// border-radius: 4px;
overflow: hidden;
padding-bottom: 24px;
padding-bottom: 20px;
animation: fadeInAnimation 0.35s ease-in;
// background-color: #222;
.goods-item {
&__hd {
@ -11,6 +12,9 @@
align-items: center;
box-sizing: border-box;
position: relative;
image {
animation: fadeInAnimation 0.35s ease-in;
}
// padding-top: 100%;
// position: relative;
// .sp-image {
@ -39,7 +43,7 @@
}
&__bd {
border-radius: 0;
padding: 10px 16px 0;
padding: 20px 16px 0;
box-sizing: border-box;
.goods-info {
display: flex;
@ -49,7 +53,7 @@
margin: 0 auto;
line-height: 1;
.switch-color {
margin-top: 12px;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
@ -101,16 +105,22 @@
font-size: 16px;
color: #000;
// font-weight: bold;
margin: 12px auto;
padding: 10px 20px;
text-align: center;
width: 100%;
box-sizing: border-box;
line-height: 1;
@include multi-ellipsis(2);
// padding-top: 15px;
// padding: 15px;
}
.goods-desc {
.goods-desc-text {
font-size: 16px;
height: auto;
// color: $color-hint-text;
color: #000;
@include multi-ellipsis(2);
padding: 2px 0;
}
.goods-price {
font-weight: bold;
@ -203,3 +213,11 @@
}
}
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

14
src/components/sp-input-number/index.js
View File

@ -8,7 +8,7 @@ import AtComponent from './component'
import './index.scss'
// 实现两数相加并保留小数点后最短尾数
function addNum(num1, num2) {
function addNum (num1, num2) {
let sq1, sq2
try {
sq1 = _toString(num1).split('.')[1].length
@ -25,7 +25,7 @@ function addNum(num1, num2) {
}
// 格式化数字，处理01变成1,并且不处理1. 这种情况
function parseValue(num) {
function parseValue (num) {
if (num === '') return '0'
const numStr = _toString(num)
@ -37,7 +37,7 @@ function parseValue(num) {
}
class AtInputNumber extends AtComponent {
handleClick(clickType) {
handleClick (clickType) {
const { disabled, value, min, max, step } = this.props
const lowThanMin = clickType === 'minus' && value <= min
const overThanMax = clickType === 'plus' && value >= max
@ -104,14 +104,14 @@ class AtInputNumber extends AtComponent {
this.props.onErrorInput(errorValue)
}
render() {
render () {
const { customStyle, className, width, disabled, value, type, min, max, size } = this.props
const inputStyle = {
width: width ? `${Taro.pxTransform(width)}` : ''
}
const inputValue = this.handleValue(value)
console.log('inputValue', inputValue, max, inputValue >= parseInt(max))
// console.log('inputValue', inputValue, max, inputValue >= parseInt(max))
const rootCls = classNames(
'sp-input-number',
'at-input-number',
@ -161,8 +161,8 @@ AtInputNumber.defaultProps = {
max: 100,
step: 1,
size: '',
onChange: () => {},
onBlur: () => {}
onChange: () => { },
onBlur: () => { }
}
export default AtInputNumber

114
src/components/sp-login/index.scss
View File

@ -99,4 +99,118 @@
padding: 0 50px 50px;
}
}
.curtain {
.at-curtain__container {
width: 100%;
padding: 0 30px;
}
.at-curtain__btn-close--bottom {
display: none;
}
&.show {
opacity: 1;
visibility: visible;
}
&.hide {
opacity: 0;
visibility: hidden;
}
&_mask {
display: flex;
position: relative;
width: 100%;
height: 100%;
// padding: 100px 30px;
justify-content: center;
align-items: center;
box-sizing: border-box;
opacity: 1;
}
&_content {
width: 100%;
background-color: #fff;
border-radius: 10px;
padding: 60px 46px 30px;
box-sizing: border-box;
&_title {
display: flex;
justify-content: center;
align-items: center;
font-size: 34px;
line-height: 1;
margin-bottom: 80px;
color: #000;
.sp-image {
margin-right: 4px;
}
}
&_text {
font-size: 26px;
line-height: 2;
max-height: 620px;
color: #000;
}
.agreement-list {
display: inline-block;
}
.agreement-name {
color: #14287e;
padding: 0px 2px;
// font-size: 26px;
}
}
.btn-wrap {
position: relative;
}
.btn {
margin-top: 40px;
margin-bottom: 30px;
}
.no-btn {
display: flex;
justify-content: center;
margin: 0 auto;
padding: 0 32rpx;
height: 80rpx;
color: #222;
font-size: 32rpx;
line-height: 78rpx;
text-align: center;
border-radius: 8rpx;
border: 1px solid #000;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.no-text {
color: #7e7e7e;
font-size: 20rpx;
margin-top: 28rpx;
line-height: 1.4;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
.btn-cantact {
background: transparent;
// background: skyblue;
padding: 0;
position: absolute;
top: 0;
left: 0;
border: none;
width: 600px;
height: 80px;
z-index: 10;
&:after {
border-width: 0;
}
}
}

46
src/components/sp-login/index.weapp.js
View File

@ -1,6 +1,6 @@
import Taro from '@tarojs/taro'
import React, { useEffect, useState, useCallback, useRef, useImperativeHandle } from 'react'
import { View, Text, Button } from '@tarojs/components'
import { View, Text, Button, ScrollView } from '@tarojs/components'
import { AtButton, AtCurtain } from 'taro-ui'
import { useImmer } from 'use-immer'
import S from '@/spx'
@ -19,7 +19,7 @@ const initialState = {
privacyName: '',
agreeMentChecked: false
}
function SpLogin(props, ref) {
function SpLogin (props, ref) {
const { children, className, onChange, newUser = false } = props
const { isLogin, login, setToken, checkPolicyChange } = useLogin({
policyUpdateHook: (isUpdate) => {
@ -203,12 +203,13 @@ function SpLogin(props, ref) {
{/* 授权登录 */}
<AtCurtain
className='curtain'
isOpened={loginModal}
onClose={() => {
setLoginModal(false)
}}
>
<View className='login-modal'>
{/* <View className='login-modal'>
<View className='login-modal__hd'>
<SpImage circle src={icon} width={120} height={120} />
<View className='nick-name'>{nickname}</View>
@ -232,6 +233,45 @@ function SpLogin(props, ref) {
登录
</AtButton>}
</View>
</View> */}
<View className="curtain_content">
<View className="curtain_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<View className="">隐私政策</View>
</View>
<ScrollView scrollY
scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
亲爱的用户,感谢您使用Birkenstock微信小程序!为了加强对您个人信息的保护,我们根据最新法律的要求制定/更新了
<View className="agreement-list">
<Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'member_register')}>《{registerName}》</Text>和
<Text className='agreement-name' onClick={handleClickPrivacy.bind(this, 'privacy')}>《{privacyName}》</Text>
</View>,我们将基于合法以及正当必要的原则,按照本政策的规定向您提供各项服务
<View>
本政策旨在向您说明休迪贸易 (上海)有限公司及其在中国大陆境内的线上线下门店如何收集、使用、传输和保护您的个人信息
通过《隐私政策》,我们向您主要说明:
</View>
<View className="">
1.您在使用Birkenstock微信小程序时,可以选择浏览模式,也可以选择注册/登录成为Birkenstock微信小程序用户
</View>
<View className="">
2为了向你提供Birkenstock微信小程序的其本服条,我们将基于合法以及正当必要的原则,按照本政策的规定向您提供各项服务
</View>
</ScrollView>
<View className='btn-wrap'>
{isNewUser && <AtButton className='btn' type='primary' openType="getPhoneNumber" onGetPhoneNumber={(e) => {
setLoginModal(false)
handleBindPhone(e)
}}>
同意并继续
</AtButton>}
{!isNewUser && <AtButton className='btn' type='primary' onClick={handleUserLogin}>
同意并继续
</AtButton>}
</View>
<View className="no-btn" onClick={() => setLoginModal(false)}>不同意</View>
<View className="no-text">
*如果您不同意Birkenstock隐私政策，您可继续浏览小程序，但您无法使用购物结算功能
</View>
</View>
</AtCurtain>
</View>

12
src/components/sp-note/index.js
View File

@ -15,7 +15,9 @@ export default class SpNote extends Component {
btnText: '',
to: '',
isUrl: true,
img: ''
img: '',
width: 292,
height: 224
}
static options = {
@ -26,18 +28,18 @@ export default class SpNote extends Component {
handleClick = () => { }
resolveUrl(img) {
resolveUrl (img) {
return `/assets/imgs/${img}`
}
render() {
const { icon, className, title, button, value, btnText, to, isUrl, img } = this.props
render () {
const { icon, className, title, button, value, btnText, to, isUrl, img, width, height } = this.props
return (
<View className={classNames('sp-note', className)}>
{/* {icon && <AtIcon prefixClass='sw-icon' value={value} size='60' color='#cdcdcd' />} */}
{img && (
<SpImage className='default-img' src={img} width={292} height={224} />
<SpImage className='default-img' src={img} width={width} height={height} />
)}
<Text className='sp-note__text'>{title || this.props.children}</Text>
{button && to && (

32
src/components/sp-order-item/index.js
View File

@ -5,14 +5,14 @@ import { View, Text, Image } from '@tarojs/components'
import { SpPage, SpPrice, SpImage, SpPoint } from '@/components'
import './index.scss'
function SpOrderItem(props) {
function SpOrderItem (props) {
const {
payType = '',
showExtra = true,
info = null,
isPointitemGood = false,
isShowPointTag = false,
onClick = () => {},
onClick = () => { },
customFooter,
showDesc,
renderDesc,
@ -24,24 +24,38 @@ function SpOrderItem(props) {
const { market_price: enMarketPrice } = order_page
if (!info) return null
const desc = info.item_spec_desc
let desc_info = ''
if (desc) {
try {
const descArr = desc.split(',')
descArr.forEach((item, index) => {
let [_, value] = item.split(':')
if (index === 1) {
value = value.substring(0, 2)
}
desc_info += value + ' '
})
} catch (error) {
}
}
const showExtraComp = () => {
if (showExtra) {
return (
<View className='sp-order-item__extra'>
<Text className='sp-order-item__desc'>{info.goods_props}</Text>
{info.num && <Text className='sp-order-item__num'>数量：{info.num}</Text>}
{info.item_spec_desc && (
<Text className='sp-order-item__desc'>{info.item_spec_desc}</Text>
<Text className='sp-order-item__desc'>{desc_info || info.item_spec_desc}</Text>
)}
{info.num && <Text className='sp-order-item__num'>数量：{info.num}</Text>}
</View>
)
}
}
const img = info.pic_path ? info.pic_path : Array.isArray(info.pics) ? info.pics[0] : info.pics
console.log('order item info:', info)
const img = info.pic || info.pic_path ? info.pic_path : Array.isArray(info.pics) ? info.pics[0] : info.pics
const title = info.title || info.item_name
return (
<View className='sp-order-item' onClick={onClick}>
@ -57,7 +71,7 @@ function SpOrderItem(props) {
{info.order_item_type === 'gift' && (
<Text className='sp-order-item__title-tag'>赠品</Text>
)}
{info.title}
{title}
</View>
{showDesc && info.item_spec_desc && (
<Text className='sp-order-item__spec'>{info.item_spec_desc}</Text>
@ -79,7 +93,7 @@ function SpOrderItem(props) {
/>
) : (
<View>
<SpPrice className='sp-order-item__price' value={info.price}></SpPrice>
<SpPrice className='sp-order-item__price' value={info.price} showSeparator noDecimal={false}></SpPrice>
{/* {info.market_price > 0 && enMarketPrice && (
<SpPrice lineThrough value={info.market_price}></SpPrice>
)} */}

39
src/components/sp-order-item/index.scss
View File

@ -4,23 +4,36 @@
display: flex;
align-items: flex-start;
padding: $edge-size;
&__extra {
width: 450px;
font-size: 20px;
line-height: 1;
color: #000;
opacity: 0.85;
}
&__hd {
margin-right: 20px;
margin-right: 60px;
}
&__bd {
width: 50%;
margin-bottom: 40px;
width: 38%;
// margin-bottom: 40px;
padding: 20px 0;
position: relative;
font-size: 20px;
line-height: 1;
box-sizing: border-box;
}
&__ft {
flex: 1;
text-align: right;
font-size: $font-size-small;
padding-top: 10px;
// font-size: $font-size-small;
}
&__title {
// font-size: floor(0.95 * $font-size);
@include multi-ellipsis(1);
line-height: 1.4;
margin-bottom: 26px;
color: #000;
// margin: 0 0 15px;
&-tag {
display: inline-block;
@ -32,16 +45,17 @@
}
}
&__desc {
color: $color-gray;
font-size: $font-size-small;
// color: $color-gray;
// font-size: $font-size-small;
// margin-bottom: 10px;
}
&__spec {
color: $color-gray;
font-size: $font-size-small;
// color: $color-gray;
// font-size: $font-size-small;
max-width: 90%;
min-width: 100px;
display: inline-block;
opacity: 0.85;
@include text-overflow();
}
&__price {
@ -52,7 +66,8 @@
}
&__num {
display: block;
color: $color-gray;
margin-top: 26px;
// color: $color-gray;
}
&__pay-type {
display: block;
@ -60,4 +75,8 @@
font-size: 20px;
color: #c1c1c1;
}
.sp-price__symbol,
.sp-price__int {
font-weight: bold !important;
}
}

13
src/components/sp-page/index.js
View File

@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'
import Taro, { useDidShow, usePageScroll, getCurrentInstance, useReady } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { useImmer } from 'use-immer'
import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage } from '@/components'
import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage, SpChat } from '@/components'
import { TABBAR_PATH } from '@/consts'
import { classNames, styleNames, hasNavbar, isWeixin, isAlipay, isGoodsShelves, entryLaunch, isObject } from '@/utils'
import { AtBadge } from 'taro-ui'
@ -26,6 +26,7 @@ const initialState = {
function SpPage (props, ref) {
const $instance = getCurrentInstance()
const [state, setState] = useImmer(initialState)
const { cartCount = 0 } = useSelector((state) => state.cart)
const { lock, lockStyle, pageTitle, isTabBarPage, customNavigation, cusCurrentPage, showLeftContainer, currentPath, showCustomNavigation, showNavCartIcon } = state
const {
className,
@ -50,6 +51,7 @@ function SpPage (props, ref) {
showNavLogo = true,
showNavkfIcon = false,
showNavHomeIcon = false,
showNavSearchIcon = false,
} = props
let { renderTitle } = props
const wrapRef = useRef(null)
@ -253,7 +255,7 @@ function SpPage (props, ref) {
}
renderTitle = showCustomNavigation && showNavLogo ? <SpImage src={`member/logo-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew /> : undefined
const navigationBarTitleText = getCurrentInstance().page?.config?.navigationBarTitleText
const navigationBarTitleText = props.navigationBarTitleText || getCurrentInstance().page?.config?.navigationBarTitleText
return (
<View
className={classNames('custom-navigation', {
@ -290,7 +292,7 @@ function SpPage (props, ref) {
/>
</View>}
{/* <Image className="chazhao" src={require("@/assets/chazhao-light.png")}></Image> */}
{showCustomNavigation ? <SpImage src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />
{showCustomNavigation ? <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />
: <View className='icon-wrap'>
<Text
className={classNames('iconfont', {
@ -307,11 +309,12 @@ function SpPage (props, ref) {
}
}}
/>
{showNavCartIcon && <AtBadge value={10} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge>}
{showNavCartIcon && <AtBadge value={cartCount} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge>}
{showNavHomeIcon && <SpImage src={`cart/home.png`} onClick={() => Taro.redirectTo({ url: '/pages/index' })} height={36} mode='heightFix' isNew />}
{showNavSearchIcon && <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />}
</View>
}
{showNavkfIcon && <SpImage className='icon-kf' src={`index/kf.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew />}
{showNavkfIcon && <SpChat><SpImage className='icon-kf' src={`index/kf.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew /></SpChat>}
</View>}
{isWeixin && <View className='title-container' style={styleNames(pageTitleStyle)}>

16
src/components/sp-page/index.scss
View File

@ -108,6 +108,20 @@
.icon-kf {
margin-left: 40px;
}
.at-badge {
&__num {
font-size: 14px;
width: 24px;
height: 24px;
line-height: 24px;
top: -6px;
right: 4px;
padding: 0;
border-radius: 50%;
overflow: hidden;
text-align: center;
}
}
}
.icon-wrap {
// width: 56px;
@ -191,7 +205,7 @@
// background: #a0a0a0;
}
.title-container {
color: #333;
color: #000;
}
.custom-status-bar {
background: #fff;

14
src/components/sp-picker/index.js
View File

@ -26,10 +26,14 @@ const initialState = {
}
function SpPicker (props) {
const { mode, children, leftBtnTxt = '取消', rightBtnTxt = '确定', source = [], value, pickerConfirm, isTop = false } = props
const [state, setState] = useImmer(initialState)
const [state, setState] = useImmer({ ...initialState, value })
const { visible, isOpen, list } = state
const handlerChange = () => { }
const handlerChange = (value) => {
// setState((draft) => {
// draft.value = value
// })
}
const onPickerCancel = () => {
setState((draft) => {
@ -43,7 +47,7 @@ function SpPicker (props) {
// const pickerConfirm = () => { }
return (
<View className='sp-picker'>
<View className='sp-picker' style={{ 'z-index': isTop ? 999 : 10 }}>
<View
className='picker-value'
onClick={() => {
@ -91,7 +95,7 @@ function SpPicker (props) {
value={value}
fields='minute'
onPickerCancel={onPickerCancel}
// change={handlerChange}
onChange={handlerChange}
handleConfirm={pickerConfirm}
/>
) : null}
@ -127,4 +131,4 @@ SpPicker.options = {
addGlobalClass: true
}
export default SpPicker
export default React.memo(SpPicker)

55
src/components/sp-picker/picker-select.js
View File

@ -12,13 +12,14 @@ const initialState = {
markMultiDateTime: false
}
function PickerDateTime (props) {
const { handleConfirm, onPickerCancel } = props
const { handleConfirm, onPickerCancel, list = [] } = props
const dateTime = [
{ mode: 'year', unit: '年' },
{ mode: 'month', unit: '月' },
{ mode: 'day', unit: '日' },
]
const [state, setState] = useAsyncCallback({ source: props.list || [], value: props.value || '' })
// const [state, setState] = useAsyncCallback({ source: props.list || [], value: props.value || '' })
const [state, setState] = useImmer({ source: list, value: props.value })
const { source, value } = state
// useEffect(() => {
// // const { dateTime, start } = this.props
@ -45,30 +46,30 @@ function PickerDateTime (props) {
(draft) => {
draft.value = e.detail.value
},
({ source, value }) => {
// const res = []
// for (let i = 0; i < source.length; i++) {
// let time = '',
// token = ''
// // source[i].item.length为可选项的列数
// for (let j = 0; j < source[i].item.length; j++) {
// const select = source[i].item[j][value[i][j]]
// time += (select === '今天' ? dayjs().format('M月D日') : select) + '-'
// // 对于二维数组取i、j；对于一维数组取j
// const item = markMultiDateTime ? dateTime[i][j] : dateTime[j]
// token += (item.format || getToken(item.mode)) + '-'
// }
// res.push(dayjs(time, token)[mode]())
// }
// return markMultiDateTime ? res : res[0]
// const res = source.map((item, index) => item[value[index]])
// const cur = getDayjs()
// const source2 = dateTime && format(dateTime, dayjs(start))
// console.log('source2:', source2)
}
// ({ source, value }) => {
// const res = []
// for (let i = 0; i < source.length; i++) {
// let time = '',
// token = ''
// // source[i].item.length为可选项的列数
// for (let j = 0; j < source[i].item.length; j++) {
// const select = source[i].item[j][value[i][j]]
// time += (select === '今天' ? dayjs().format('M月D日') : select) + '-'
// // 对于二维数组取i、j；对于一维数组取j
// const item = markMultiDateTime ? dateTime[i][j] : dateTime[j]
// token += (item.format || getToken(item.mode)) + '-'
// }
// res.push(dayjs(time, token)[mode]())
// }
// return markMultiDateTime ? res : res[0]
// const res = source.map((item, index) => item[value[index]])
// const cur = getDayjs()
// const source2 = dateTime && format(dateTime, dayjs(start))
// console.log('source2:', source2)
// }
)
}
console.log(value)
return (
<View className='picker-custom'>
<PickerView
@ -85,7 +86,9 @@ function PickerDateTime (props) {
</PickerView>
<View className="picker-btn" onClick={() => {
onPickerCancel()
handleConfirm(source[value[0]], value[0])
setTimeout(() => {
handleConfirm(source[value[0]], value[0])
}, 100)
}}>确定</View>
</View>
)
@ -95,4 +98,4 @@ PickerDateTime.options = {
addGlobalClass: true
}
export default PickerDateTime
export default React.memo(PickerDateTime)

7
src/components/sp-price/index.js
View File

@ -34,7 +34,8 @@ export default class SpPrice extends Component {
appendText,
lineThrough,
plus,
size
size,
showSeparator = false
} = this.props
let _value = value
if (isString(value)) {
@ -78,13 +79,13 @@ export default class SpPrice extends Component {
fontSize: `${size}rpx`
})}
>
{int.indexOf('-') === 0 ? int.slice(1) : int}
{showSeparator ? parseInt(int).toLocaleString() : int.indexOf('-') === 0 ? int.slice(1) : int}
</Text>
{decimal !== undefined && !noDecimal && (
<Text
className='sp-price__decimal'
style={styleNames({
fontSize: `${size - 4}rpx`
fontSize: `${size}rpx`
})}
>
.{decimal}

85
src/components/sp-sku-select-new/index.js
View File

@ -1,8 +1,8 @@
import React, { useEffect, useRef } from 'react'
import React, { useEffect, useImperativeHandle, useRef } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { View, Text } from '@tarojs/components'
import { View, Text, ScrollView } from '@tarojs/components'
import { useImmer } from 'use-immer'
import {
SpFloatLayout,
@ -38,16 +38,17 @@ const initialState = {
loading: false
}
function SpSkuSelect (props) {
function SpSkuSelect (props, ref) {
const {
info,
open = true,
onClose = () => { },
onChange = () => { },
type,
hideInputNumber = false
hideInputNumber = false,
onChangeImg
} = props
console.log('SpSkuSelect:info', info)
// console.log('SpSkuSelect:info', info)
// const [state, setState] = useImmer(initialState)
const [state, setState] = useAsyncCallback(initialState)
const { selection, curImage, disabledSet, curItem, skuText, num, loading } = state
@ -62,8 +63,6 @@ function SpSkuSelect (props) {
const init = () => {
const { skuList, specItems } = info
console.log('skuList:', skuList)
console.log('specItems:', specItems)
specItems.forEach((item) => {
const key = item.specItem.map((spec) => spec.specId).join('_')
skuDictRef.current[key] = item
@ -78,7 +77,7 @@ function SpSkuSelect (props) {
calcDisabled(selection)
}
const calcDisabled = (selection) => {
const calcDisabled = (selection, i = 0) => {
const disabledSet = new Set()
const makeReg = (sel, row, val) => {
const tSel = sel.slice()
@ -104,18 +103,21 @@ function SpSkuSelect (props) {
}
}
}
console.log(
'skuDict:',
skuDictRef.current,
'selection:',
selection,
'disabledSet:',
disabledSet
)
// console.log(
// 'skuDict:',
// skuDictRef.current,
// 'selection:',
// selection,
// 'disabledSet:',
// disabledSet
// )
const curItem = skuDictRef.current[selection.join('_')]
// const skuText = curItem
// ? `已选：${curItem.specItem.map((item) => `${item.skuName}:${item.specName}`).join(',')}`
// : '请选择规格'
const skuText = curItem
? `已选：${curItem.specItem.map((item) => `${item.skuName}:${item.specName}`).join(',')}`
? `已选择 ${curItem.specItem.map((item, index) => `${index === 1 ? item.specName.substr(0, 2) : item.specName}`).join(' ')}码`
: '请选择规格'
setState((draft) => {
@ -125,7 +127,7 @@ function SpSkuSelect (props) {
draft.skuText = skuText
})
onChange(skuText, curItem)
onChange(skuText, curItem, i)
}
// calcDisabled(initSelection)
@ -133,14 +135,15 @@ function SpSkuSelect (props) {
// console.log('disabledSet:', disabledSet)
const handleSelectSku = ({ specId }, idx) => {
console.log("🚀 ~ { specId }, idx:", specId, idx)
if (disabledSet.has(specId)) return
setState(
(draft) => {
draft.selection[idx] = selection[idx] == specId ? null : specId
draft.selection[idx] = selection[idx] == specId ? specId : specId //null
draft.curImage = 1
},
({ selection }) => {
calcDisabled(selection)
(row) => {
calcDisabled(row.selection, idx)
}
)
}
@ -153,6 +156,7 @@ function SpSkuSelect (props) {
img = specImgs[0]
}
}
onChangeImg && onChangeImg(img)
// console.log('img:', img)
return img
}
@ -175,7 +179,6 @@ function SpSkuSelect (props) {
}
const { skuList } = info
console.log("🚀 ~ skuList:", skuList)
const addToCart = async () => {
const { nospec } = info
@ -234,6 +237,15 @@ function SpSkuSelect (props) {
})
}
useImperativeHandle(ref, () => {
return {
fastBuy,
addToCart,
getImgs,
handleSelectSku
}
})
const renderFooter = () => {
let btnTxt = ''
Object.keys(BUY_TOOL_BTNS).forEach((key) => {
@ -362,26 +374,43 @@ function SpSkuSelect (props) {
<View className='sku-group' key={`sku-group__${index}`}>
{/* <View className='sku-name'>{item.skuName}</View> */}
<View className='sku-values'>
{item.skuValue.map((spec, idx) => (
{index === 0 && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="sku-img-box">
{item.skuValue?.length > 0 && item.skuValue.map((spec, idx) => spec.specImgs.length > 0 && (
<View
className={classNames('sku-btn', {
'active': spec.specId == selection[index],
'disabled': disabledSet.has(spec.specId),
})}
onClick={handleSelectSku.bind(this, spec, index)}
key={`sku-values-item__${idx}`}
>
<SpImage src={spec.specImgs[0]} width={130} height={90} mode='aspectFit' key={`sku-img__${idx}`} />
</View>
)
)}
</ScrollView>}
{index > 0 && item.skuValue.map((spec, idx) => (
<View
className={classNames('sku-btn', {
className={classNames('sku-btn btn-noac', {
'active': spec.specId == selection[index],
'btn-primary': spec.specId == selection[index],
'disabled': disabledSet.has(spec.specId),
'sku-img': spec.specImgs.length > 0
})}
onClick={handleSelectSku.bind(this, spec, index)}
key={`sku-values-item__${idx}`}
>
{spec.specImgs.length > 0 && (
{/* {spec.specImgs.length > 0 && (
<SpImage src={spec.specImgs[0]} width={260} height={260} />
)}
{index !== 0 && <View className='spec-name'>{spec.specName}</View>}
)} */}
<View className={classNames('spec-name', { 'pad': index === 2 })}>{spec.specName}</View>
</View>
))}
</View>
</View>
))}
{!hideInputNumber && renderLimitTip()}
<View className="select">{skuText}</View>
</View>
{/* </SpFloatLayout> */}
</View>
@ -392,4 +421,4 @@ SpSkuSelect.options = {
addGlobalClass: true
}
export default SpSkuSelect
export default React.forwardRef(SpSkuSelect)

76
src/components/sp-sku-select-new/index.scss
View File

@ -41,12 +41,20 @@
}
.sku-list {
position: relative;
padding: 0 30px;
margin: 0;
// margin-top: 30px;
// margin-bottom: 100px;
.select {
position: absolute;
top: 156px;
right: 100px;
font-size: 22px;
}
}
.sku-group {
margin-bottom: 20px;
margin: 30px 0 0;
}
.buy-count {
margin-bottom: 20px;
@ -70,23 +78,48 @@
.sku-values {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-top: 0px !important;
.spec-name {
display: block;
// max-width: 260px;
// @include text-overflow();
}
.sku-img-box {
width: 100%;
white-space: nowrap;
.sku-btn {
display: inline-block;
margin: 0 20px 0 0;
padding: 0;
background: #fff;
height: 90rpx;
overflow: hidden;
box-sizing: border-box;
// border: none;
&:last-child {
margin-right: 0;
}
.sp-image {
margin: auto 0;
display: inline-block;
box-sizing: border-box;
&-img {
display: inline-block;
}
}
}
}
}
.sku-btn {
padding: 0 16px;
padding: 16px 10px;
// height: 60px;
// line-height: 60px;
background: #f5f5f5;
background: #fff;
/* prettier-ignore */
border: 1PX solid #f5f5f5;
border-radius: 4px;
margin: 0 24px 24px 0;
color: #222;
border: 1PX solid #fff;
border-radius: 8px;
margin: 0 20px 20px 0;
color: #333;
box-sizing: border-box;
&.sku-img {
padding: 0;
@ -105,14 +138,31 @@
margin: 8px 0;
}
}
&.active {
background: #fff;
&.btn-noac {
/* prettier-ignore */
border: 1PX solid var(--color-primary);
color: var(--color-primary);
border: 1PX solid #BCBCBC;
color: #222;
}
&.btn-primary {
background: var(--color-primary);
color: #fff;
}
.spec-name {
font-size: 22px;
line-height: 1;
&.pad {
padding: 0 4px;
}
}
&.active {
// background: #fff;
/* prettier-ignore */
border: 1PX solid #BCBCBC;
// color: var(--color-primary);
}
&.disabled {
color: #cdcdcd;
color: #bcbcbc;
opacity: 0.7;
}
}

17
src/components/sp-tabbar/index.scss
View File

@ -18,4 +18,21 @@
height: 54px !important;
}
}
.at-tab-bar__item {
.at-badge {
&__num {
font-size: 16px;
width: 26px;
height: 26px;
line-height: 26px;
top: -4px;
right: 8px;
padding: 0;
border-radius: 50%;
overflow: hidden;
text-align: center;
padding-left: 2px;
}
}
}
}

6
src/doc/goods.js
View File

@ -89,9 +89,10 @@ export const ITEM_LIST_GOODS = {
memberPrice: ({ member_price }) => member_price / 100, // 当前会员等级价
vipPrice: ({ vip_price }) => vip_price / 100, // vip价格
svipPrice: ({ svip_price }) => svip_price / 100, // svip价格
spec_images: 'spec_images',
// is_fav: ({ item_id }) => Boolean(favs[item_id]),
store: 'store'
store: 'store',
tagList: 'tagList'
}
export const ITEM_LIST_POINT_GOODS = {
@ -233,6 +234,7 @@ export const GOODS_INFO = {
})
},
intro: 'intro',
introList: 'intro_list',
distributorInfo: ({ distributor_info }) => {
return pickBy(distributor_info, {
distributorId: 'distributor_id',

39
src/hooks/useLogin.js
View File

@ -5,12 +5,12 @@ import dayjs from 'dayjs'
import { updateUserInfo, fetchUserFavs, clearUserInfo } from '@/store/slices/user'
import { updateCount, clearCart } from '@/store/slices/cart'
import api from '@/api'
import { isWeixin, showToast, entryLaunch,isAlipay,alipayAutoLogin } from '@/utils'
import { isWeixin, showToast, entryLaunch, isAlipay, alipayAutoLogin } from '@/utils'
import S from '@/spx'
import { SG_POLICY } from '@/consts/localstorage'
export default (props = {}) => {
const { autoLogin = false, policyUpdateHook = () => {} } = props
const { autoLogin = false, policyUpdateHook = () => { } } = props
const [isLogin, setIsLogin] = useState(false)
const [isNewUser, setIsNewUser] = useState(false)
const dispatch = useDispatch()
@ -40,28 +40,39 @@ export default (props = {}) => {
// 隐私协议
// const checkResult = await checkPolicyChange()
// if (checkResult) {
Taro.showLoading({ title: '' })
const { code } = await getCode()
Taro.showLoading({ title: '' })
let code
try {
const { code: _code } = await getCode()
code = _code
} catch (error) {
Taro.hideLoading()
}
try {
const { token } = await getToken(code)
try {
if (!code) {
Taro.hideLoading()
setToken(token)
} catch (e) {
setIsNewUser(true)
Taro.hideLoading()
console.error('[hooks useLogin] auto login is failed: ', e)
throw new Error(e)
return
}
const { token } = await getToken(code)
Taro.hideLoading()
setToken(token)
} catch (e) {
Taro.hideLoading()
setIsNewUser(true)
console.error('[hooks useLogin] auto login is failed: ', e)
// throw new Error(e)
}
// }
}
}
const getCode = async () => {
if(isWeixin){
if (isWeixin) {
return await Taro.login()
}
if(isAlipay){
if (isAlipay) {
return await alipayAutoLogin()
}
}
@ -79,7 +90,7 @@ export default (props = {}) => {
const setToken = async (token) => {
const { redirect_url } = $instance.router.params
console.log('redirect_url',redirect_url)
console.log('redirect_url', redirect_url)
S.setAuthToken(token)
setIsLogin(true)
await getUserInfo()

6
src/pages/cart/comps/comp-deliver.js
View File

@ -34,7 +34,7 @@ const initialState = {
activeTimeId: ''
}
function CompDeliver(props, ref) {
function CompDeliver (props, ref) {
const {
address = {},
distributor_id,
@ -250,7 +250,7 @@ function CompDeliver(props, ref) {
return (
<View className='page-comp-deliver'>
<View className='switch-box'>
{/* <View className='switch-box'>
<View className={classNames(deliveryList.length > 0 && 'switch-tab')}>
{deliveryList.map((item) => {
if (distributorInfo[item.key]) {
@ -266,7 +266,7 @@ function CompDeliver(props, ref) {
}
})}
</View>
</View>
</View> */}
{/** 普通快递 */}
{receiptType === 'logistics' && <AddressChoose isAddress={address} />}
{/** 同城配 */}

6
src/pages/cart/comps/comp-deliver.scss
View File

@ -1,8 +1,8 @@
.page-comp-deliver {
width: 100%;
background: #fff;
padding: 10px 0px;
box-shadow: 0px 2px 10px 0px #eae7e0;
background: #f7f7f7;
// padding: 10px 0px;
// box-shadow: 0px 2px 10px 0px #eae7e0;
.switch-box {
display: flex;
justify-content: flex-end;

48
src/pages/cart/comps/comp-goodsitem.js
View File

@ -10,16 +10,17 @@ import './comp-goodsitem.scss'
const initialState = {
localNum: 0
}
function CompGoodsItem(props) {
function CompGoodsItem (props) {
const {
info,
children,
isShowAddInput = true,
isShowDeleteIcon = true,
goodType,
onDelete = () => {},
onChange = () => {},
onClickImgAndTitle = () => {}
onDelete = () => { },
onChange = () => { },
onClickImgAndTitle = () => { },
onChangeGoodsIsCheck = () => { }
} = props
const { priceSetting } = useSelector((state) => state.sys)
const { userInfo = {}, vipInfo = {} } = useSelector((state) => state.user)
@ -77,19 +78,21 @@ function CompGoodsItem(props) {
className='comp-goodsitem-image'
mode='aspectFill'
src={info.pics}
width={180}
height={180}
width={150}
height={150}
/>
</View>
<View className='comp-goodsitem-bd'>
<View className='item-hd'>
<View className='goods-title'>
<View className='goods-title' onClick={onChangeGoodsIsCheck}>
{/* {info.activity_type == 'package' && <Text className='goods-title__tag'>组合商品</Text>} */}
{info.is_plus_buy && <Text className='goods-title__tag'>加价购</Text>}
{info.item_name}
</View>
{isShowDeleteIcon && (
<Text className='iconfont icon-shanchu-01' onClick={() => onDelete(info)}></Text>
// <Text className='iconfont icon-shanchu-01' onClick={() => onDelete(info)}></Text>
<View className='del-btn' onClick={() => onDelete(info)}>
<Image src='/assets/close.png' className='del-icon'></Image></View>
)}
</View>
@ -115,24 +118,29 @@ function CompGoodsItem(props) {
</View>
<View className='item-ft'>
<View className='item-fd-hd'></View>
<View className='item-ft-bd'>
<View className='goods-price-wrap'>
<SpPrice value={_price / 100} />
<View className='num-box'>
<Text>数量：</Text>
{isShowAddInput ? (
<SpInputNumber
value={localNum}
max={parseInt(info?.limitedBuy ? info?.limitedBuy?.limit_buy : info.store)}
min={1}
onChange={onChangeInputNumber}
/>
) : (
<Text className='item-num'>x {info.num}</Text>
)}
</View>
<SpPrice value={_price / 100} noDecimal={false} size={20} showSeparator />
{info.market_price > 0 && enMarketPrice && (
<SpPrice className='mkt-price' lineThrough value={info.market_price / 100} />
)}
</View>
{isShowAddInput ? (
<SpInputNumber
value={localNum}
max={parseInt(info?.limitedBuy ? info?.limitedBuy?.limit_buy : info.store)}
min={1}
onChange={onChangeInputNumber}
/>
) : (
<Text className='item-num'>x {info.num}</Text>
)}
</View>
<View className='item-fd-hd'>
<SpPrice value={_price / 100 * info.num} noDecimal={false} showSeparator />
</View>
</View>
</View>

53
src/pages/cart/comps/comp-goodsitem.scss
View File

@ -1,7 +1,10 @@
.comp-goodsitem {
display: flex;
font-size: 26px;
line-height: 1;
color: #000;
&-hd {
margin-right: 20px;
margin-right: 40px;
}
&-bd {
flex: 1;
@ -15,16 +18,49 @@
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-bottom: 26px;
font-weight: bold;
// @include multi-ellipsis(2)
.del-btn {
padding: 14px;
position: absolute;
right: 0px;
top: -28rpx;
.del-icon {
width: 22px;
height: 22px;
}
}
}
.item-ft {
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
margin-top: 26px;
.goods-price-wrap {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
.num-box {
font-size: 20px;
opacity: 0.9;
display: flex;
align-items: center;
.at-input-number {
height: 30px;
&__input {
top: -8px;
width: 36px;
}
&__btn {
width: 30px;
}
}
}
}
.mkt-price {
margin-left: 8px;
@ -36,6 +72,11 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 26px;
}
.item-fd-hd {
text-align: end;
font-weight: bold;
}
.vip-grade {
/* prettier-ignore */
@ -99,11 +140,11 @@
}
}
.spec-desc {
background-color: #f5f5f5;
font-size: 24px;
color: #999;
padding: 5px 13px;
max-width: 300px;
font-size: 20px;
color: #000;
opacity: 0.8;
// padding: 5px 13px;
max-width: 400px;
min-width: 100px;
display: inline-block;
@include text-overflow();

3
src/pages/cart/const/index.js
View File

@ -55,7 +55,8 @@ export const initialState = {
isNeedPackage: false, // 是否需要打包
openCashier: false,
isPointOpenModal: false,
routerParams: {}
routerParams: {},
orderTtems: []
}
export const deliveryList = [

90
src/pages/cart/espier-checkout.js
View File

@ -31,7 +31,8 @@ import {
isEmpty,
VERSION_STANDARD,
VERSION_B2C,
VERSION_PLATFORM
VERSION_PLATFORM,
JumpGoodDetail
} from '@/utils'
import { useAsyncCallback, useLogin, usePayment, useDebounce } from '@/hooks'
import { PAYMENT_TYPE, TRANSFORM_PAYTYPE } from '@/consts'
@ -51,7 +52,7 @@ import CompPointUse from './comps/comp-pointuse'
import './espier-checkout.scss'
function CartCheckout(props) {
function CartCheckout (props) {
const $instance = getCurrentInstance()
const { isLogin, isNewUser, getUserInfoAuth } = useLogin({
autoLogin: true
@ -103,7 +104,8 @@ function CartCheckout(props) {
openCashier,
buildingNumber,
houseNumber, // 房号
routerParams // 路由参数
routerParams, // 路由参数
orderTtems
} = state
const {
@ -193,7 +195,7 @@ function CartCheckout(props) {
return
}
if(!payType) {
if (!payType) {
showToast('请选择支付方式')
return
}
@ -622,6 +624,7 @@ function CartCheckout(props) {
/* 处理限购活动，添加到对应的items里---结束 */
setState((draft) => {
draft.detailInfo = pickBy(items, doc.checkout.CHECKOUT_GOODS_ITEM)
draft.orderTtems = items
draft.totalInfo = total_info
draft.paramsInfo = { ...paramsInfo, ...cus_parmas }
draft.pointInfo = point_info
@ -811,17 +814,17 @@ function CartCheckout(props) {
return (
<View className='checkout-toolbar'>
<View className='checkout-toolbar__total'>
{`共${totalInfo.items_count}件商品　总计:`}
<SpPrice unit='cent' className='primary-price' value={totalInfo.total_fee} />
{/* {`共${totalInfo.items_count}件商品　总计:`} */}
<Text className='price-total'>订单总计</Text>
<SpPrice unit='cent' className='primary-price' value={totalInfo.total_fee} showSeparator noDecimal={false} />
</View>
<AtButton
circle
type='primary'
loading={submitLoading}
disabled={orderSubmitDisabled()}
onClick={onSubmitPayChange}
>
提交订单
立即结算
</AtButton>
</View>
)
@ -833,17 +836,64 @@ function CartCheckout(props) {
<View className='cart-checkout__group'>
<View className='cart-group__cont'>
<View className='sp-order-item__idx'>
商品清单 <Text style={{ color: '#222' }}>（{totalInfo.items_count}）</Text>
订单商品
{/* <Text style={{ color: '#222' }}>（{totalInfo.items_count}）</Text> */}
</View>
<View className='goods-list'>
{detailInfo.map((item, idx) => (
<View className='sp-order-item__wrap' key={idx}>
<SpGoodsCell info={item} />
{/* <SpOrderItem
key={`${idx}1`}
info={item}
isShowNational
isPointitemGood={false}
onClick={() => {
if (info.order_class == 'pointsmall') {
Taro.navigateTo({
url: `/subpages/pointshop/espier-detail?id=${item.good_id}`
})
} else {
JumpGoodDetail(item.good_id, item.distributor_id)
}
}}
/> */}
</View>
))}
</View>
<View className="gap"></View>
<View className="trade-detail-info-new">
<View className='line'>
<View className='left'>订单金额</View>
<SpPrice unit='cent' size={20} className='right' value={totalInfo.item_fee_new} showSeparator noDecimal={false}></SpPrice>
{/* <View className='right'>{`¥${parseFloat(totalInfo.item_fee_new / 100).toFixed(2)}`}</View> */}
{/* <View className='right'>
{totalInfo.item_fee_new}
{transformTextByPoint(this.isPointitemGood(), info.item_fee_new, info.item_point)}
</View> */}
</View>
<View className='line'>
<View className='left'>优惠金额</View>
{/* 促销 + 优惠券 */}
<View className='right'>{`¥${parseFloat(totalInfo.promotion_discount + totalInfo.coupon_discount).toFixed(2)}`}</View>
</View>
<View className='line'>
<View className='left'>运费</View>
<View className='right'>
{totalInfo.freight_type !== 'point'
? `¥${totalInfo.freight_fee}`
: `${totalInfo.freight_fee * 100}${this.props.pointName}`}
</View>
</View>
</View>
<View className="gap"></View>
<View className="trade-detail-info-bottom">
<View className='left'>订单总计</View>
<SpPrice unit='cent' className='right' value={totalInfo.total_fee} showSeparator noDecimal={false}></SpPrice>
</View>
</View>
<View className='cart-group__cont cus-input'>
{/* <View className='cart-group__cont cus-input'>
<SpCell className='trade-remark' border={false}>
<AtInput
className='trade-remark__input'
@ -853,15 +903,15 @@ function CartCheckout(props) {
maxLength={50}
/>
</SpCell>
</View>
</View> */}
</View>
</View>
)
}
console.log(couponInfo, 'couponInfo', coupon)
console.log('invoiceTitle', invoiceTitle)
console.log('payChannel', payChannel)
// console.log(couponInfo, 'couponInfo', coupon)
// console.log('invoiceTitle', invoiceTitle)
// console.log('payChannel', payChannel)
const couponText = couponInfo ? couponInfo.title : ''
// couponInfo.type === 'member'
// ? '会员折扣'
@ -935,7 +985,7 @@ function CartCheckout(props) {
{renderGoodsComp()}
{type !== 'limited_time_sale' && type !== 'group' && type !== 'seckill' && !bargain_id && (
{/* {type !== 'limited_time_sale' && type !== 'group' && type !== 'seckill' && !bargain_id && (
<SpCell
isLink
className='cart-checkout__coupons'
@ -943,8 +993,8 @@ function CartCheckout(props) {
onClick={handleCouponsClick}
value={couponText || '请选择'}
/>
)}
{isWeixin && !bargain_id && totalInfo.invoice_status && (
)} */}
{/* {isWeixin && !bargain_id && totalInfo.invoice_status && (
<SpCell
isLink
title='开发票'
@ -962,7 +1012,7 @@ function CartCheckout(props) {
</View>
}
/>
)}
)} */}
{packInfo.is_open && (
<SpCell
@ -1031,7 +1081,7 @@ function CartCheckout(props) {
</View>
)}
<View className='cart-checkout__total'>
{false && <View className='cart-checkout__total'>
<SpCell
className='trade-sub__item'
title='原价：'
@ -1068,7 +1118,7 @@ function CartCheckout(props) {
value={<SpPrice unit='cent' primary value={0 - totalInfo.point_fee} />}
/>
)}
</View>
</View>}
<CompPointUse
isOpened={isPointOpenModal}

98
src/pages/cart/espier-checkout.scss
View File

@ -1,20 +1,27 @@
$margin24: 24px;
$margin24: 10px;
.page-cart-checkout {
box-sizing: border-box;
overflow-y: auto;
padding: 0px 16px;
padding: 0px 22px;
.checkout-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-end;
background: #fff;
padding: 0 20px;
height: 100%;
padding: 0 40px 90px 50px;
// height: 100%;
&__total {
white-space: nowrap;
flex: 1;
margin-right: 0;
.at-button {
padding: 0 38px;
}
.price-total {
font-size: 26px;
mask-repeat: 12px;
}
.last_price {
display: inline-block;
.sp-price__append {
@ -57,16 +64,17 @@ $margin24: 24px;
}
.sp-order-item {
position: relative;
padding: 35px 0px;
padding: 35px 24px;
background: #f7f7f7;
&__bd {
flex: 1;
}
&__idx {
color: #666;
height: 36px;
line-height: 36px;
color: #000;
height: 26px;
line-height: 26px;
display: block;
font-size: 30px;
font-size: 26px;
}
&__img {
width: 200px;
@ -119,8 +127,11 @@ $margin24: 24px;
font-size: 24px;
}
.cart-checkout__address {
margin-bottom: $margin24;
margin-top: 24px;
// margin-bottom: $margin24;
// margin-top: 24px;
margin: 10px 0;
border-bottom: 6px;
overflow: hidden;
}
.cart-checkout__coupons {
.sp-cell__value {
@ -134,9 +145,12 @@ $margin24: 24px;
.cart-checkout__pay,
.cart-checkout__total,
.cart-checkout__group {
box-shadow: 0px 2px 10px 0px #eae7e0;
// box-shadow: 0px 2px 10px 0px #eae7e0;
margin: 0 0 $margin24;
padding: 30px 16px;
padding: 30px 24px;
background: #f7f7f7;
border-radius: 6px;
box-sizing: border-box;
}
// .cart-checkout__pay {
@ -184,13 +198,60 @@ $margin24: 24px;
}
.cart-checkout__group {
padding: 24px 16px;
background: #fff;
// padding: 24px 16px;
.cart-group__shop {
padding: 16px $edge-margin;
}
.cart-group__cont {
background: #fff;
// background: #fff;
.price-gp {
text-align: end;
font-weight: bold;
}
.sp-price__decimal {
font-weight: bold;
}
.gap {
padding: 0 54px;
width: calc(100% - 108px);
box-sizing: border-box;
height: 2px;
background: #fff;
margin: 20px auto;
}
.trade-detail-info-new {
padding: 20px 24px;
.line {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
.left,
.right {
font-size: 20px;
color: #5b5b5b;
line-height: 1;
}
}
}
.trade-detail-info-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px 50px;
.left {
font-size: 26px;
}
.right {
font-size: 32px;
}
.left,
.sp-price__symbol,
.sp-price__int {
font-weight: bold;
}
}
}
.cus-input {
.sp-cell {
@ -220,7 +281,8 @@ $margin24: 24px;
margin: 0 0 $margin24;
.sp-cell {
padding: 30px 16px;
box-shadow: 0px 2px 10px 0px #eae7e0;
// box-shadow: 0px 2px 10px 0px #eae7e0;
background: #f7f7f7;
}
.required {
color: #e62424;

3
src/pages/cart/espier-index.config.js
View File

@ -1,3 +1,4 @@
export default {
navigationBarTitleText: '购物车'
navigationBarTitleText: '',
navigationStyle: 'custom',
}

103
src/pages/cart/espier-index.js
View File

@ -1,7 +1,7 @@
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
import React, { useEffect, useState, useMemo } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { View, Text } from '@tarojs/components'
import { View, Text, ScrollView } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { useImmer } from 'use-immer'
import qs from 'qs'
@ -18,7 +18,9 @@ import {
SpLogin,
SpDefault,
SpCheckboxNew,
SpPrivacyModal
SpPrivacyModal,
SpImage,
SpGoodsItem
} from '@/components'
import CompGoodsItem from './comps/comp-goodsitem'
@ -52,7 +54,7 @@ function CartIndex () {
const { current, recommendList, policyModal } = state
const { colorPrimary, openRecommend } = useSelector((state) => state.sys)
const { validCart = [], invalidCart = [] } = useSelector((state) => state.cart)
const { validCart = [], invalidCart = [], cartCount } = useSelector((state) => state.cart)
const { tabbar = 1 } = router?.params || {}
// useDepChange(() => {
@ -70,8 +72,8 @@ function CartIndex () {
const fetch = () => {
if (openRecommend == 1) {
getRecommendList() // 猜你喜欢
}
getRecommendList() // 猜你喜欢
if (isLogin) {
getCartList()
}
@ -164,6 +166,7 @@ function CartIndex () {
page: 1,
pageSize: 1000
})
console.log("🚀 ~ list:----169", list)
setState((draft) => {
draft.recommendList = list
})
@ -254,7 +257,13 @@ function CartIndex () {
}
const groupsList = resolveActiveGroup()
console.log(groupsList, 'list')
const handleClickStore = (item) => {
const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id || item.goods_id}`
Taro.navigateTo({
url
})
}
return (
<SpPage
@ -262,15 +271,16 @@ function CartIndex () {
'has-tabbar': tabbar == 1
})}
renderFooter={tabbar == 1 && <SpTabbar />}
showNavLogo isBlack showNavkfIcon
>
{!isLogin && (
{/* {!isLogin && (
<View className='login-header'>
<View className='login-txt'>授权登录后同步购物车的商品</View>
<SpLogin onChange={() => { }}>
<View className='btn-login'>授权登录</View>
</SpLogin>
</View>
)}
)} */}
{isLogin && (
<View>
{/* <SpTabs current={current} tablist={tablist} onChange={onChangeSpTab} /> */}
@ -281,8 +291,11 @@ function CartIndex () {
return (
<View className='shop-cart-item' key={`shop-cart-item__${all_index}`}>
<View className='shop-cart-item-hd'>
<Text className='iconfont icon-shop' />
{all_item.shop_name || '自营'}
{/* <Text className='iconfont icon-shop' /> */}
{/* {all_item.shop_name || '自营'} */}
购物车
{/* <Text className="total">共{all_item.cart_total_num}件</Text> */}
<Text className="total">共{cartCount}件</Text>
</View>
<View className='shop-cart-item-shadow'>
{/** 店铺商品开始 */}
@ -338,6 +351,7 @@ function CartIndex () {
info={c_sitem}
onDelete={onDeleteCartGoodsItem.bind(this, c_sitem)}
onChange={onChangeCartGoodsItem.bind(this, c_sitem)}
onChangeGoodsIsCheck={onChangeGoodsIsCheck.bind(this, c_sitem, 'single', !c_sitem.is_checked)}
onClickImgAndTitle={onClickImgAndTitle.bind(this, c_sitem)}
/>
</View>
@ -382,12 +396,14 @@ function CartIndex () {
label='全选'
onChange={onChangeGoodsIsCheck.bind(this, all_item, 'all')}
/>
{/* <Text className='total-num'>共{all_item.cart_total_num}件</Text> */}
<Text className='total-num'>共{cartCount}件</Text>
</View>
<View className='rg'>
<View>
<View className='total-price-wrap'>
合计：
<SpPrice className='total-pirce' value={all_item.total_fee / 100} />
{/* 合计： */}
<SpPrice className='total-pirce' value={all_item.total_fee / 100} showSeparator noDecimal />
</View>
{all_item.discount_fee > 0 && (
<View className='discount-price-wrap'>
@ -402,11 +418,10 @@ function CartIndex () {
<AtButton
className='btn-calc'
type='primary'
circle
disabled={all_item.cart_total_num <= 0}
onClick={() => handleCheckout(all_item)}
>
结算({all_item.cart_total_num})
立即结算
</AtButton>
</View>
</View>
@ -443,13 +458,65 @@ function CartIndex () {
)}
{validCart.length == 0 && invalidCart.length == 0 && (
<SpDefault type='cart' message='购物车内暂无商品～'>
<AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
去选购
</AtButton>
</SpDefault>
<View className='empty-box'>
{/* <SpDefault type='cart' message='购物车内暂无商品～'>
<AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
去选购
</AtButton>
</SpDefault> */}
<SpImage className='default-img' src='cart/logo-hui.png' width={160} isNew />
<View className="empty-box-tit">购物车还是空的</View>
<View className="empty-box-sub-tit">快去挑选自己喜欢的宝贝吧~</View>
<SpLogin onChange={() => { }}>
<AtButton type='primary' onClick={navigateTo.bind(this, '/pages/index', true)}>
前往选购
</AtButton>
</SpLogin>
<View className="gap"></View>
</View>
)}
{false && <sView className='bottom-box'>
<View className="bottom-box-tit" style={{ fontSize: validCart.length == 0 && invalidCart.length == 0 ? '40rpx' : '30rpx' }}>{validCart.length == 0 && invalidCart.length == 0 ? '商品推荐' : '专属推荐'}</View>
<ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box">
{[
{
brief: "副标题",
itemName: "测试商品1",
price: "1099",
goods_id: 6,
pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c9xHQuJ96YIcZWtjRS0HBCTzp7dzXIs2pl'
},
{
brief: "副标题",
itemName: "测试商品2",
price: "1099",
goods_id: 6,
pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/801c18d59d95ea26930fefc43bf66febTQjxb65cpnCqVLaOsYmiHdkDdYqBnXVm'
},
{
brief: "副标题",
itemName: "测试商品3",
price: "1099",
goods_id: 6,
pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c90XruENsSSAhRiz0HPI3PjR8XQNVgbxHb'
},
].map((item, idx) => (
<View className='goods-item-wrap' key={`goods-item-l__${idx}`}>
<SpGoodsItem
showSalePrice={false}
height={250}
width={250}
onStoreClick={handleClickStore}
info={{
...item
}}
/>
</View>
))}
</ScrollView>
</sView>}
{/* 猜你喜欢 */}
<SpRecommend className='recommend-block' info={recommendList} />

136
src/pages/cart/espier-index.scss
View File

@ -1,5 +1,6 @@
.page-cart-index {
&.has-tabbar {
// padding-bottom: calc(#{$tabbar-height} + 140px);
padding-bottom: $tabbar-height;
}
.login-header {
@ -30,19 +31,31 @@
}
.shop-cart-item {
padding: 0 16px;
margin-top: 40px;
margin-top: 10px;
/* #ifdef alipay */
margin-top: 0;
padding-top: 40px;
/* #endif */
margin-bottom: 36px;
&-shadow {
box-shadow: 0px 2px 10px 0px #eae7e0;
// box-shadow: 0px 2px 10px 0px #eae7e0;
}
&-hd {
font-size: 30px;
color: #333;
font-size: 40px;
color: #000;
font-weight: bold;
margin-bottom: 10px;
margin-bottom: 40px;
line-height: 1;
display: flex;
align-items: baseline;
padding-left: 6px;
.total {
font-size: 26px;
margin-left: 20px;
line-height: 1;
font-weight: normal;
// color: #999;
}
}
&-bd {
background: #fff;
@ -52,15 +65,45 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
padding: 26px 40px 26px 60px;
position: fixed;
bottom: calc(#{$page-ipx-footer-height} - 2px);
z-index: 1080;
left: 0;
right: 0;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
.lf {
display: flex;
align-items: flex-end;
.sp-checkbox-new {
align-items: flex-end;
.icon-my {
font-size: 32px;
color: #000;
}
}
.total-num {
font-size: 26px;
margin-left: 20px;
}
}
.rg {
display: flex;
align-items: center;
.total-pirce {
font-size: 40px;
font-weight: bold;
.sp-price__int {
margin-left: 8px;
}
}
.btn-calc {
margin-left: 16px;
margin-left: 30px;
height: 74px;
line-height: 72px;
padding: 0px 28px;
border-radius: 6px;
}
}
}
@ -111,10 +154,21 @@
}
.cart-item-wrap {
padding: 16px;
padding: 60px 36px;
display: flex;
align-items: center;
background: #f7f7f7;
margin-bottom: 10px;
border-radius: 6px;
box-sizing: border-box;
// justify-content: space-around;
.sp-checkbox-new {
.icon-my {
font-size: 24px;
margin-right: 10px;
color: #000;
}
}
}
.cart-item-warp-disabled {
padding: 16px;
@ -131,16 +185,16 @@
.cart-goods-item,
.comp-goodsitem {
flex: 1;
width: 620px;
width: 590px;
}
.at-input-number {
border: 1PX solid #999;
border: 1px solid #999;
border-radius: 0;
height: 40px;
&__input {
/* prettier-ignore */
border-left: 1PX solid #999;
border-right: 1PX solid #999;
border-right: 1px solid #999;
width: 60px;
height: 32px;
line-height: 32px;
@ -238,4 +292,64 @@
.sp-goods-item {
border-radius: 2px;
}
.empty-box {
padding-top: 90px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.sp-image {
margin-bottom: 50px;
}
.at-button {
border-radius: 6px;
line-height: 1;
padding: 28px 82px;
height: auto;
font-size: 26px;
}
&-tit {
font-size: 30px;
color: #000;
}
&-sub-tit {
font-size: 22px;
color: #7f7f7f;
margin: 20px 0 40px;
}
.gap {
width: 100%;
height: 20px;
background: #f5f5f5;
margin-top: 90px;
}
}
.bottom-box {
margin-bottom: 50px;
&-tit {
font-size: 30px;
color: #000;
padding-left: 44px;
padding-top: 30px;
font-weight: 500;
line-height: 1;
}
.shop-box {
height: 466px;
width: 100%;
padding: 30px 30px 30px;
box-sizing: border-box;
transition: height 0.2s linear 0.2s;
white-space: nowrap;
.goods-item-wrap {
display: inline-block;
width: 250px;
height: 100%;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
}
}
}

7
src/pages/category/comps/comp-series.js
View File

@ -20,7 +20,7 @@ const CompSeries = (props) => {
const handleClickItem = (item) => {
const { category_id, main_category_id } = item
let url = ''
let url = '/pages/item/list'
if (category_id) {
url = `/pages/item/list?cat_id=${category_id}`
}
@ -61,8 +61,9 @@ const CompSeries = (props) => {
const renderCategoryChildHandler = (item = selChild) => {
return (
<View className=''>
<View className='group' key={item.category_id} onClick={() => false && handleCustomClick(item.category_id)}>
<View className='group-box'>
{/* handleCustomClick(item.category_id) */}
<View className='group' key={item.category_id} onClick={() => handleClickItem(item)}>
<View className='group-title'>探索全部
<Text className='iconfont icon-qianwang-01' style={{ fontSize: 'inherit', marginLeft: '4px' }}></Text>
</View>

12
src/pages/category/comps/comp-series.scss
View File

@ -97,7 +97,10 @@
.new {
width: 100%;
}
.group-box {
}
.group {
animation: fadeInAnimation 0.2s ease-in-out;
position: relative;
width: 100%;
color: #fff;
@ -183,3 +186,12 @@
}
}
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

15
src/pages/home/index.scss
View File

@ -3,6 +3,9 @@
}
page {
.sp-page {
.sp-loading {
margin-top: 100px;
}
// &.has-navbar {
// padding-top: 0 !important;
// }
@ -69,6 +72,7 @@ page {
height: calc(100vh - #{$page-ipx-footer-height} - var(--status-bar-height));
// height: calc(100vh - #{$tabbar-height});
transition: height 0.3s ease-in-out;
animation: fadeInAnimation 0.35s ease-in;
&.swiper-narrow {
height: calc(100vh - 620px - #{$tabbar-height} - var(--status-bar-height));
}
@ -152,7 +156,7 @@ page {
.shop-box {
height: 520px;
width: 100%;
padding: 30px 50px 40px;
padding: 30px 50px 20px;
box-sizing: border-box;
// background-color: aquamarine;
transition: height 0.2s linear 0.2s;
@ -164,6 +168,7 @@ page {
display: inline-block;
width: 310px;
margin-right: 30px;
// animation: fadeInAnimation 0.35s ease-in;
&:last-child {
margin-right: 0;
}
@ -231,3 +236,11 @@ page {
}
}
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

56
src/pages/index.js
View File

@ -18,7 +18,8 @@ import {
SpCouponPackage,
SpNavBar,
SpImage,
SpGoodsItem
SpGoodsItem,
SpChat
} from '@/components'
import api from '@/api'
import {
@ -56,6 +57,7 @@ const initialState = {
fixedTop: false,
filterWgts: [],
isShowHomeHeader: false,
swiperList: [],
list: [
{
type: 'image',
@ -99,7 +101,8 @@ const initialState = {
goods_id: 6,
pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c90XruENsSSAhRiz0HPI3PjR8XQNVgbxHb'
},
]
],
goodList: []
}
function Home () {
@ -118,7 +121,7 @@ function Home () {
const { location } = useSelector((state) => state.user)
const { setNavigationBarTitle } = useNavigation()
const { wgts, loading, searchComp, pageData, fixedTop, filterWgts, isShowHomeHeader, isUpOperation, showRecommend, shopList } = state
const { wgts, loading, searchComp, pageData, fixedTop, filterWgts, isShowHomeHeader, isUpOperation, showRecommend, shopList, swiperList, goodList } = state
const dispatch = useDispatch()
@ -126,6 +129,7 @@ function Home () {
if (initState) {
init()
setNavigationBarTitle(appName)
getSwiperList()
}
}, [initState])
@ -167,8 +171,6 @@ function Home () {
if (dtid && !('dtid' in params)) {
params = Object.assign(params, { dtid })
}
console.log('useShareTimeline params:', params)
return {
title: title,
imageUrl: imageUrl,
@ -186,6 +188,33 @@ function Home () {
}
}
const getSwiperList = async () => {
const res = await api.shop.homeSwiperList({ page: 1, pageSize: 999 })
const list = res?.list?.map((item) => {
return {
type: item.type || 'image',
src: item.pic,
goods: (item.goods_info_detail || []).map((ite) => {
return {
itemName: ite.item_name,
price: ite.price,
goods_id: ite.item_id,
itemId: ite.item_id,
pic: ite.pics?.[0],
brief: ite.brief,
price: ite.price,
spec_images: ite.spec_images || [],
tagList: ite.tagList || []
}
})
}
}) || []
setState((draft) => {
draft.swiperList = list
draft.goodList = list[0].goods || []
})
}
const fetchWgts = async () => {
setState((draft) => {
draft.wgts = []
@ -301,8 +330,10 @@ function Home () {
}
}
const onSwiperChange = (e) => {
const { current } = e.detail
setState((draft) => {
draft.currentIndex = e.detail.current
draft.currentIndex = current
draft.goodList = swiperList[current].goods || []
})
}
@ -313,6 +344,7 @@ function Home () {
})
}
return (
<SpPage
className='page-index'
@ -377,7 +409,7 @@ function Home () {
autoplay={!isUpOperation}
onChange={onSwiperChange}
>
{state.list.map((item, index) => (
{state.swiperList.map((item, index) => (
<SwiperItem key={index} className="" style={{ height: "100%" }}>
{item.type === "image" && (
<Image
@ -424,17 +456,17 @@ function Home () {
))}
</Swiper>
{!isUpOperation && <View className='spot-pagination'>
{state.list.map((_, index) => (
{swiperList.map((_, index) => (
<View key={index} className={'spot-pagination-bullet ' + ((state.currentIndex == index) ? 'spot-pagination-bullet-active' : "")} style={{ width: 1 / state.length * 100 + '%' }}></View>
))}
</View>}
{isUpOperation && <View className="icon-kf">
<SpImage height="62" src='index/kf.png' isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<SpChat><SpImage height="62" src='index/kf.png' isShowMenuByLongpress={false} lazyLoad isNew /></SpChat>
</View>}
</View>
{isUpOperation && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="shop-box">
{shopList.map((item, idx) => (
<View className='goods-item-wrap' key={`goods-item-l__${idx}`}>
{isUpOperation && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="shop-box fadeIn" >
{goodList.map((item, idx) => (
<View className='goods-item-wrap fadeIn' animation={{ duration: 500, timingFunction: 'ease-in-out', delay: 0 }} key={`goods-item-l__${idx + item.goods_id}`}>
<SpGoodsItem
onStoreClick={handleClickStore}
info={{

8
src/pages/item/comps/comp-buytoolbar.js
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { SpImage, SpLogin } from '@/components'
import { SpImage, SpLogin, SpChat } from '@/components'
import { classNames, navigateTo, showToast, isWeb } from '@/utils'
import { addCart } from '@/store/slices/cart'
import { BUY_TOOL_BTNS, ACTIVITY_LIST } from '@/consts'
@ -86,11 +86,11 @@ function CompGoodsBuyToolbar (props) {
}
RenderBtns()
console.log('btns:', btns)
// console.log('btns:', btns)
const onChangeLogin = async ({ key }) => {
const { dtid, card_id, user_card_id } = $instance.router.params
console.log('onChangeLogin:', key)
// console.log('onChangeLogin:', key)
if (key == 'notice') {
const { subscribe } = info
if (subscribe) return false
@ -149,7 +149,7 @@ function CompGoodsBuyToolbar (props) {
return (
<View className='comp-goodsbuytoolbar'>
<View className='comp-goodsbuytoolbar-flex'>
<SpImage height={54} src='index/kf.png' mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage>
<SpChat> <SpImage height={54} src='index/kf.png' mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage></SpChat>
<SpLogin className='shoucang-wrap' onChange={onChangeCollection.bind(this)}>
<SpImage height={54} src={isFaved ? 'cart/star-full.png' : 'cart/star.png'} mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage>
{/* <View className='toolbar-item'>

1
src/pages/item/comps/comp-buytoolbar.scss
View File

@ -128,6 +128,7 @@
}
&__container {
width: 560px;
border-radius: 10px;
}
&__header {
font-size: 40px;

5
src/pages/item/comps/comp-couponlist.js
View File

@ -5,9 +5,8 @@ import { View, Text, ScrollView } from '@tarojs/components'
import { SpPrice, SpLogin } from '@/components'
import './comp-couponlist.scss'
function CompCouponList(props) {
const { info, onClick = () => {} } = props
console.log(info)
function CompCouponList (props) {
const { info, onClick = () => { } } = props
const onChangeLogin = () => {
Taro.navigateTo({
url: `/subpage/pages/vip/vipgrades?grade_name=${info.vipgrade_name}`

184
src/pages/item/espier-detail.js
View File

@ -8,7 +8,7 @@ import Taro, {
} from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Video, Canvas, ScrollView } from '@tarojs/components'
import { useImmer } from 'use-immer'
import { AtCountdown } from 'taro-ui'
import { AtCountdown, AtAccordion, AtIcon } from 'taro-ui'
import {
SpPrice,
SpCell,
@ -22,7 +22,8 @@ import {
SpLogin,
SpFloatMenuItem,
SpChat,
SpGoodsPrice
SpGoodsPrice,
SpGoodsItem
} from '@/components'
import api from '@/api'
import req from '@/api/req'
@ -94,7 +95,14 @@ const initialState = {
curItem: null,
recommendList: [],
showSaleTotal: false,
showSku: true
showSku: true,
isOpen: false,
historyList: [],
historyTotal: 0,
selSkuImg: '',
swiperList: [],
selColorIdx: 0,
introList: []
}
function EspierDetail (props) {
@ -107,6 +115,7 @@ function EspierDetail (props) {
const { colorPrimary, openRecommend } = useSelector((state) => state.sys)
const { setNavigationBarTitle } = useNavigation()
const dispatch = useDispatch()
const skuSelectRef = useRef()
const [state, setState] = useImmer(initialState)
const {
@ -133,7 +142,13 @@ function EspierDetail (props) {
curItem,
recommendList,
showSaleTotal,
showSku
showSku,
isOpen,
historyList,
selSkuImg,
swiperList,
selColorIdx,
introList
} = state
useEffect(() => {
@ -150,8 +165,8 @@ function EspierDetail (props) {
useEffect(() => {
if (id) {
fetch()
getPackageList()
getEvaluationList()
// getPackageList()
// getEvaluationList()
}
}, [id])
@ -212,15 +227,16 @@ function EspierDetail (props) {
}
const init = async () => {
const { type, id, dtid } = await entryLaunch.getRouteParams()
console.log("🚀 ~ type, id, dtid :", type, id, dtid)
const pams = await entryLaunch.getRouteParams()
const { type, id, dtid, idx = 0 } = pams
setState((draft) => {
draft.id = id
draft.type = type
draft.dtid = dtid
draft.selColorIdx = +idx
})
if (S.getAuthToken()) {
await dispatch(fetchUserFavs())
dispatch(fetchUserFavs())
}
}
@ -240,21 +256,29 @@ function EspierDetail (props) {
draft.defaultMsg = '商品已下架'
})
}
if (selColorIdx != 0) {
const spec_values = data.itemSpecDesc?.[0]?.spec_values || []
if (spec_values.length) {
const item = spec_values[selColorIdx]
setTimeout(() => {
skuSelectRef.current?.handleSelectSku({ specId: item.spec_value_id, specValueId: item.spec_value_id }, selColorIdx)
}, 100)
}
}
} catch (e) {
setState((draft) => {
draft.isDefault = true
draft.defaultMsg = e.res.data.data.message
})
console.log(e.res)
}
}
// 是否订阅
const { user_id: subscribe = false } = await api.user.isSubscribeGoods(id, { distributor_id: dtid })
setNavigationBarTitle(data?.itemName)
// setNavigationBarTitle(data?.itemName)
console.log(ACTIVITY_LIST[data.activityType])
// console.log(ACTIVITY_LIST[data.activityType])
if (ACTIVITY_LIST[data.activityType]) {
Taro.setNavigationBarColor({
frontColor: '#ffffff',
@ -265,11 +289,18 @@ function EspierDetail (props) {
}
})
}
console.log("🚀 ~ data.introList:", data.introList)
setState((draft) => {
draft.info = {
...data,
subscribe
subscribe,
}
draft.introList = (data.introList || []).map((item) => {
return {
...item,
isOpen: false
}
})
draft.promotionActivity = data.promotionActivity
})
@ -294,6 +325,15 @@ function EspierDetail (props) {
if (openRecommend == 1) {
getRecommendList() // 猜你喜欢
}
api.member.itemHistorySave(data.itemId)
const res = await api.member.itemHistory()
setState((draft) => {
draft.historyList = res.list.filter((item) => item.item_id !== data.itemId).map((item) => ({ ...item.itemData, pic: item.itemData.pics?.[0] || '' }))
draft.historyTotal = res.total_count
})
}
const getRecommendList = async () => {
@ -346,6 +386,13 @@ function EspierDetail (props) {
draft.skuPanelOpen = true
draft.selectType = key
})
if (key === 'addcart') {
skuSelectRef.current?.addToCart?.()
} else if (key === 'fastbuy') {
skuSelectRef.current?.fastBuy?.()
}
}
const { windowWidth } = Taro.getSystemInfoSync()
@ -358,6 +405,19 @@ function EspierDetail (props) {
}
}
const handleClickStore = (item) => {
const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id || item.goods_id}`
Taro.navigateTo({
url
})
}
const onChangeImg = (img) => {
setState((draft) => {
draft.selSkuImg = img || ''
})
}
return (
<SpPage
className='page-item-espierdetail'
@ -395,21 +455,38 @@ function EspierDetail (props) {
{/* <Canvas id="canvas2" type="2d" onReady={onCanvasReady} /> */}
{!info && <SpLoading />}
{info && (
<View className='goods-contents'>
<ScrollView scrollY scrollWithAnimation showScrollbar={false} scrollTop={0} className='goods-contents' onScroll={(e) => {
// console.log('e', e.detail)
const { scrollTop } = e.detail
if (scrollTop >= 640) {
setState((draft) => {
draft.isShowScroll = true
})
} else {
setState((draft) => {
draft.isShowScroll = false
})
}
}}>
<View className='goods-pic-container'>
<Swiper
className='goods-swiper'
// current={curImgIdx}
onChange={onChangeSwiper}
style={{
height: windowWidth
}}
autoplay
interval={3000}
circular
>
{console.log('info', info)}
{info.imgs.map((img, idx) => (
{(info.imgs || swiperList).map((img, idx) => (
<SwiperItem key={`swiperitem__${idx}`}>
<SpImage
mode='aspectFill'
src={img}
width={windowWidth * 2}
height={900}
height={windowWidth * 2}
></SpImage>
{false && (
<Video
@ -641,26 +718,42 @@ function EspierDetail (props) {
{/* Sku选择器列表 */}
{/* Sku选择器 */}
<MSpSkuSelect
ref={skuSelectRef}
open={skuPanelOpen}
type={selectType}
info={info}
hideInputNumber
onChangeImg={onChangeImg}
onClose={() => {
setState((draft) => {
draft.skuPanelOpen = false
})
}}
onChange={(skuText, curItem) => {
onChange={(skuText, curItem, idx) => {
console.log("🚀 ~ curItem:", curItem, idx)
setState((draft) => {
draft.skuText = skuText
draft.curItem = curItem
// 不切换顶部轮播图
// draft.swiperList = curItem?.specItem?.[idx]?.specImgs
draft.selSkuImg = curItem.specItem?.[0]?.specImgs?.[0]
})
}}
/>
<View className='goods-desc'>
<View className='desc-hd'>
<Text className='desc-title'>宝贝详情</Text>
<SpImage
className='sku-image'
src={selSkuImg || info?.specItem?.[0]?.specImgs?.[0]}
width={160}
height={160}
mode='aspectFit'
/>
<View className='desc-title'>
<Text className='desc-title-txt'>{info?.itemName}</Text>
<SpGoodsPrice info={curItem ? curItem : info} />
</View>
</View>
{isArray(info.intro) ? (
<View>
@ -676,10 +769,59 @@ function EspierDetail (props) {
))}
</View>
) : (
<SpHtml content={info.intro} />
<>
{/* <SpHtml content={info.intro} /> */}
</>
)}
{introList.length ? introList.map((item, index) => <View className={classNames('sp-accordion')} key={`item__${index}`}>
<AtAccordion
open={item.isOpen}
isAnimation={false}
onClick={() => {
setState((draft) => {
// draft.introList[index].isOpen = !draft.introList[index].isOpen
draft.introList = draft.introList.map((v, i) => {
v.isOpen = (i === index)
return v
})
})
}}
title={item.title}
>
<SpHtml content={item.content} />
</AtAccordion>
<View onClick={() => {
setState((draft) => {
// draft.introList[index].isOpen = !draft.introList[index].isOpen
draft.introList = draft.introList.map((v, i) => {
v.isOpen = (i === index)
return v
})
})
}}>
{item.isOpen ? <AtIcon value='subtract' size='16' color='#000' /> :
<AtIcon value='add' size='16' color='#000' />}
{item.isOpen ? <></> : <View className="line"></View>}
</View>
</View>) : <View style={{ height: `calc(100% - 380px)` }}></View>}
{historyList.length && <View className='bottom-box'>
<View className="bottom-box-tit">浏览历史</View>
<ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box">
{historyList.map((item, idx) => (
<View className='goods-item-wrap' key={`goods-item-l__${idx}`}>
<SpGoodsItem
showSalePrice={false}
height={250}
width={250}
onStoreClick={handleClickStore}
info={item}
/>
</View>
))}
</ScrollView>
</View>}
</View>
</View>
</ScrollView>
)}
<SpRecommend info={recommendList} />

146
src/pages/item/espier-detail.scss
View File

@ -3,7 +3,7 @@
position: relative;
}
.goods-swiper {
height: 900px;
// height: 900px;
}
.video-container {
position: absolute;
@ -71,8 +71,9 @@
opacity: 0.5;
}
.goods-contents {
height: calc(100vh - #{$page-ipx-footer-height} - var(--nav-height));
.goods-info {
margin: 24px 30px;
margin: 20px 30px 10px;
background-color: #fff;
// padding: 20px 16px;
// box-shadow: 0px 2px 10px 0px #eae7e0;
@ -86,16 +87,65 @@
color: #999;
}
}
.goods-desc {
margin: 24px 16px;
background-color: #fff;
box-shadow: 0px 2px 10px 0px #eae7e0;
.desc-hd {
height: 80px;
text-align: center;
line-height: 80px;
.good-sku {
margin: 40px 30px;
box-sizing: border-box;
.sku-img {
white-space: nowrap;
width: 100%;
&-item {
width: 130px;
margin-right: 20px;
display: inline-block;
&:last-child {
margin-right: 0;
}
.sp-image {
width: 100%;
height: 100%;
}
}
}
.desc-title {
}
.goods-desc {
background-color: #fff;
// padding: 0 30px;
// box-shadow: 0px 2px 10px 0px #eae7e0;
height: calc(100vh - #{$page-ipx-footer-height} - var(--nav-height));
// padding-bottom: calc(#{$page-ipx-footer-height} + 30px);
box-sizing: border-box;
position: relative;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.desc-hd {
height: 160px;
padding: 20px 30px 0;
display: flex;
align-items: center;
border-bottom: 1px solid #9e9e9e80;
position: sticky;
z-index: 2;
top: 0px;
left: 0;
right: 0;
padding-bottom: 2px;
background-color: #fff;
.desc-title {
font-size: 26px;
height: 160px;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
flex: 1;
padding: 24px 50px;
box-sizing: border-box;
}
}
.desc-title-no {
color: #222;
position: relative;
&:before {
@ -119,6 +169,80 @@
right: -24px;
}
}
.sp-accordion {
position: relative;
// padding: ;
.at-accordion__header {
padding: 26px 40px;
color: #000;
&::after {
border: none;
// border-bottom: 1px solid #9e9e9e80;
}
.at-accordion__info__title {
font-size: 26px;
}
.at-accordion__arrow {
display: none;
}
}
.at-accordion__content {
&::after {
border: none;
// border-bottom: 1px solid #9e9e9e80;
}
}
.at-accordion__body {
padding: 0 40px;
padding-bottom: 30px;
}
.at-icon {
position: absolute;
z-index: 0;
right: 40px;
top: 48px;
transform: translateY(-50%);
transition: all 0.2s ease-in-out;
}
.line {
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #9e9e9e80;
top: 90px;
right: 0;
left: 0;
transition: all 0.2s ease-in-out;
}
}
.bottom-box {
border-top: 1px solid #9e9e9e80;
&-tit {
font-size: 30px;
color: #000;
padding-left: 44px;
padding-top: 50px;
font-weight: 500;
}
}
.shop-box {
height: 466px;
width: 100%;
padding: 30px 50px 40px;
box-sizing: border-box;
transition: height 0.2s linear 0.2s;
white-space: nowrap;
.goods-item-wrap {
display: inline-block;
width: 250px;
height: 100%;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
}
}
}
.goods-name {

2
src/pages/item/list.config.js
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '搜索结果'
navigationBarTitleText: '搜索列表'
}

39
src/pages/item/list.js
View File

@ -151,7 +151,6 @@ function ItemList () {
const fetch = async ({ pageIndex, pageSize }) => {
// card_id: 兑换券id
// const { cat_id, main_cat_id, tag_id, card_id } = $instance.router.params
console.log(shopInfo)
let params = {
page: pageIndex,
pageSize,
@ -161,19 +160,23 @@ function ItemList () {
item_type: 'normal',
is_point: 'false',
tag_id,
card_id
card_id,
goodsSort: 6
}
if (curFilterIdx == 1) {
// 销量
params['goodsSort'] = 1
} else if (curFilterIdx == 2) {
// 价格升序
params['goodsSort'] = 3
} else if (curFilterIdx == 3) {
// 价格降序
params['goodsSort'] = 2
if (curFilterIdx) {
params['goodsSort'] = curFilterIdx
}
// if (curFilterIdx == 1) {
// // 销量
// params['goodsSort'] = 1
// } else if (curFilterIdx == 2) {
// // 价格升序
// params['goodsSort'] = 3
// } else if (curFilterIdx == 3) {
// // 价格降序
// params['goodsSort'] = 2
// }
if (curTagIdx) {
params['tag_id'] = curTagIdx
@ -200,6 +203,7 @@ function ItemList () {
brand_list
} = await api.item.search(params)
console.time('list render')
console.log('fetch list:', list)
const n_list = pickBy(list, doc.goods.ITEM_LIST_GOODS)
const resLeftList = n_list.filter((item, index) => {
if (index % 2 == 0) {
@ -282,7 +286,7 @@ function ItemList () {
}
const handleFilterChange = async (e) => {
await setState((draft) => {
setState((draft) => {
draft.leftList = []
draft.rightList = []
draft.curFilterIdx = e.current || 0
@ -315,8 +319,9 @@ function ItemList () {
goodsRef.current.reset()
}
const handleClickStore = (item) => {
const url = `/subpages/store/index?id=${item.distributor_info.distributor_id}`
const handleClickStore = (item, idx) => {
// console.log("🚀 ~ item, idx:", item, idx)
const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id}&idx=${idx}`
Taro.navigateTo({
url
})
@ -329,7 +334,9 @@ function ItemList () {
'has-tagbar': tagList.length > 0
})}
>
<View className='search-wrap'>
<View className='search-wrap' style={{
'zIndex': isShowSearch ? 999 : 8
}}>
{/* 兑换券选择店铺 */}
{VERSION_STANDARD && card_id && (
<View
@ -345,8 +352,10 @@ function ItemList () {
</View>
)}
<SpSearchBar
className='search-wrap'
keyword={keywords}
placeholder='搜索商品'
isOpened={true}
onFocus={handleOnFocus}
onChange={handleOnChange}
onClear={handleOnClear}

13
src/pages/item/list.scss
View File

@ -25,7 +25,7 @@
right: 0;
top: 0;
background: #fff;
z-index: 10;
z-index: 8;
display: flex;
align-items: center;
.store-picker {
@ -41,6 +41,11 @@
}
}
.sp-filter-bar {
position: fixed;
top: 260px;
z-index: 8;
left: 0;
right: 0;
&__item {
background: #f5f5f5;
&:first-child {
@ -62,9 +67,13 @@
.item-list-scroll {
// @include page-scroll($tabs-height + $navigate-height + 10, 0);
@include page-scroll($tabs-height + $navigate-height + 168, $edge-margin);
// /* #ifdef h5 */
// @include page-scroll($searchbar-height + $navigate-height + 16 * 2 + $tabs-height + 10, 0);
// /* #endif */
.sp-note {
margin-bottom: 50px;
}
}
.filter-btn {
font-size: 28px;
@ -90,7 +99,7 @@
.goods-list {
display: flex;
justify-content: space-between;
padding: 30px 50px 50px;
padding: 0px 50px;
.goods-list-wrap {
// width: 345px;
margin-bottom: 28px;

9
src/pages/member/item-fav.js
View File

@ -111,6 +111,7 @@ export default class ItemFav extends Component {
item_type: 'item_type',
distributor_id: 'distributor_id',
point: 'point',
fav_num: 'fav_num',
// price: ({ price }) => (price/100).toFixed(2),
price: ({ price, item_price }) => ((price || item_price) / 100).toFixed(2),
// is_fav: ({ item_id }) => this.hasFav(item_id)
@ -128,7 +129,8 @@ export default class ItemFav extends Component {
summary: 'summary',
head_portrait: 'head_portrait',
author: 'author',
item_type: 'item_type'
item_type: 'item_type',
fav_num: 'fav_num',
})
total = res.total_count
break
@ -353,8 +355,9 @@ export default class ItemFav extends Component {
})}
</View>
)}
{page.isLoading ? <Loading>正在加载...</Loading> : null}
{!page.isLoading && !page.hasNext && !list.length && (
{/* {page.isLoading ? <Loading>正在加载...</Loading> : null} */}
{/* !page.isLoading && */}
{!page.hasNext && !list.length && (
<SpNote img='trades_empty.png'>暂无数据~</SpNote>
)}
</ScrollView>

9
src/pages/member/item-fav.scss
View File

@ -36,6 +36,15 @@
width: 40px;
height: 42px;
}
.icon-delete,
.icon-share {
&::before {
content: ' ';
display: block;
width: 18px;
height: 18px;
}
}
.icon-share .option__text {
background: url('../../assets/fenxiang-icon.png') no-repeat;
background-size: 100% 100%;

2
src/pages/recommend/list.config.js
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '文章'
navigationBarTitleText: ''
}

32
src/pages/recommend/list.js
View File

@ -48,7 +48,7 @@ export default class RecommendList extends Component {
}
}
componentDidMount() {
componentDidMount () {
api.wx.shareSetting({ shareindex: 'planting' }).then((res) => {
this.setState({
shareInfo: res
@ -56,7 +56,7 @@ export default class RecommendList extends Component {
})
}
componentDidShow() {
componentDidShow () {
const params = this.$instance.router.params
if (params) {
const { id, name } = params
@ -81,7 +81,7 @@ export default class RecommendList extends Component {
// this.praiseNum()
}
onShareAppMessage() {
onShareAppMessage () {
const res = this.state.shareInfo
const { userId } = Taro.getStorageSync('userinfo')
const query = userId ? `/pages/recommend/list?uid=${userId}` : '/pages/recommend/list'
@ -92,7 +92,7 @@ export default class RecommendList extends Component {
}
}
onShareTimeline() {
onShareTimeline () {
const res = this.state.shareInfo
const { userId } = Taro.getStorageSync('userinfo')
const query = userId ? `uid=${userId}` : ''
@ -103,7 +103,7 @@ export default class RecommendList extends Component {
}
}
async fetch(params) {
async fetch (params) {
const { page_no: page, page_size: pageSize } = params
const { columnList, areaList } = this.state
let { selectColumn } = this.state
@ -349,11 +349,11 @@ export default class RecommendList extends Component {
})
this.setState({
paramsList,
selectParams,
selectParams,
})
this.resetColumn()
}
this.resetPage()
this.setState(
{
@ -365,15 +365,15 @@ export default class RecommendList extends Component {
)
}
resetColumn(){
resetColumn () {
this.setState({
selectColumn : Object.assign({}, { id: '', name: '全部', isChooseColumn: true }),
columnList : this.state.columnList.map((d,idx)=>{
selectColumn: Object.assign({}, { id: '', name: '全部', isChooseColumn: true }),
columnList: this.state.columnList.map((d, idx) => {
d.isChooseColumn = idx == 0 ? true : false
return d
})
})
}
}
// 选定开户地区
handleClickPicker = () => {
@ -529,7 +529,7 @@ export default class RecommendList extends Component {
})
}
render() {
render () {
const {
list,
showBackToTop,
@ -549,7 +549,7 @@ export default class RecommendList extends Component {
let address = info.province + info.city
return (
<SpPage renderFooter={<SpTabbar />}>
<SpPage renderFooter={<SpTabbar />} className='has-nav' title="鞋床故事">
<View className='page-recommend-list'>
<View className='recommend-list__toolbar'>
<View
@ -593,9 +593,9 @@ export default class RecommendList extends Component {
{address ? (
<View
className='zoom-btn icon-close iconfont'
onClick={this.handleRegionRefresh.bind(this)}
></View>
className='zoom-btn icon-close iconfont'
onClick={this.handleRegionRefresh.bind(this)}
></View>
// <Text className='icon-close' onClick={this.handleRegionRefresh.bind(this)}>x</Text>
) : (
''

54
src/pages/recommend/list.scss
View File

@ -1,8 +1,10 @@
@import "../../style/imports";
@import '../../style/imports';
.loading {
margin-top: 60px;
}
.page-recommend-list {
/* #ifdef alipay */
.filter-bar{
.filter-bar {
position: absolute;
width: 100%;
z-index: 9999;
@ -12,14 +14,14 @@
.recommend-list {
&__toolbar {
position: fixed;
top: 0;
top: 0;
left: 0;
width: 100%;
z-index: $z-index-level-4;
background: #fff;
box-shadow: $box-shadow;
padding-top: 10px;
.icon-periscope{
.icon-periscope {
color: #ccc;
display: inline-block;
}
@ -31,7 +33,7 @@
/* #ifdef alipay */
padding: 20px 0;
/* #endif */
&__focus{
&__focus {
.at-search-bar {
padding-right: 30px !important;
}
@ -65,32 +67,36 @@
}
&__tabs {
display: flex;
.filter-bar__item {
flex: 1;
justify-content: center;
text-align: center;
color: #666666;
font-size: 26px;
.icon-menu,.icon-periscope {
.icon-menu,
.icon-periscope {
color: #ccc;
display: inline-block;
font-size: 28px;
}
&.region-picker{
display: flex;
line-height: 75rpx;
}
.icon-close{
line-height: 75px;
}
}
&.region-picker {
display: flex;
line-height: 75rpx;
}
.icon-close {
line-height: 75px;
}
}
.filter-bar__item-active {
color: $color-brand-primary;
}
}
&__scroll {
@include page-scroll($tabs-height + $searchbar-height + $navigate-height + 10, $tabbar-height + floor($edge-margin / 2));
@include page-scroll(
$tabs-height + $searchbar-height + $navigate-height + 10,
$tabbar-height + floor($edge-margin / 2)
);
top: 155px;
}
&__type-grid {
@ -163,16 +169,16 @@
}
}
}
.region-picker{
display: flex;
.region-picker {
display: flex;
justify-content: center;
align-items: center;
line-height: 75rpx;
.icon-close{
line-height: 75rpx;
.icon-close {
margin-left: 10px;
line-height: 75px;
}
}
line-height: 75px;
}
}
.sp-float-layout {
.icon-guanbi {
line-height: 1;

30
src/subpage/pages/trade/comps/detail-item.js
View File

@ -63,7 +63,7 @@ export default class DetailItem extends Component {
copyText(val)
S.toast('复制成功')
}
handleSelectionChange(item_id, checked) {
handleSelectionChange (item_id, checked) {
//选择要申请售后的商品
const { info } = this.props
info.orders.map((item) => {
@ -73,7 +73,7 @@ export default class DetailItem extends Component {
info
})
}
handleQuantityChange(item, val) {
handleQuantityChange (item, val) {
//改变售后商品的数量
const { info } = this.props
info.orders.map((v) => {
@ -84,16 +84,16 @@ export default class DetailItem extends Component {
})
}
render() {
render () {
const { customFooter, info, isPointitem, showType } = this.props
return (
<View className='detail-item' style={styleNames(getThemeStyle())}>
<Text className='detail-item__title'>商品信息</Text>
{info &&
info[showType] &&
info[showType].map((item, idx) => (
<View className='detail-item-good' key={`${idx}1`}>
<View className='detail-item__fix'>
<Text className='detail-item__title'>第{idx + 1}件商品</Text>
{info.delivery_code ? null : item.delivery_code ? (
<View className='detail-item__code'>
<Text className='code'>物流单号：{item.delivery_code}</Text>
@ -112,7 +112,7 @@ export default class DetailItem extends Component {
isShowNational
isPointitemGood={isPointitem}
onClick={() => {
if(info.order_class == 'pointsmall') {
if (info.order_class == 'pointsmall') {
Taro.navigateTo({
url: `/subpages/pointshop/espier-detail?id=${item.good_id}`
})
@ -131,16 +131,16 @@ export default class DetailItem extends Component {
(info.delivery_code
? null
: item.delivery_code && (
<AtButton
circle
type='text'
size='small'
className='delivery-btn'
onClick={this.handleLookDelivery.bind(this, item)}
>
查看物流
</AtButton>
))}
<AtButton
circle
type='text'
size='small'
className='delivery-btn'
onClick={this.handleLookDelivery.bind(this, item)}
>
查看物流
</AtButton>
))}
{item.show_aftersales === 1 && (
<AtButton
circle

12
src/subpage/pages/trade/comps/detail-item.scss
View File

@ -5,11 +5,11 @@
&-good {
position: relative;
}
&__fix {
display: flex;
border-bottom: 1px solid #ececec;
padding: 0 38px 0 27px;
}
// &__fix {
// display: flex;
// border-bottom: 1px solid #ececec;
// padding: 0 38px 0 27px;
// }
&__title {
flex: 0 0 200px 0;
@ -21,7 +21,7 @@
}
&__title {
display: block;
font-size: 22px;
font-size: 26px;
line-height: 36px;
color: #333333;
padding: 0 38px 17px 17px;

32
src/subpage/pages/trade/comps/item.scss
View File

@ -1,16 +1,16 @@
@import "@/style/imports";
@import '@/style/imports';
.trade-item {
background: #fff;
border-radius: $item-border-radius;
padding:24px 0 32px 0;
margin:0 16px;
padding: 24px 0 32px 0;
margin: 0 16px;
margin-bottom: 24px;
box-shadow: 0px 2px 10px 0px #EAE7E0;
// box-shadow: 0px 2px 10px 0px #EAE7E0;
.icon-globe {
font-size: 32px;
margin-right: 10px;
}
}
&__total {
padding: 0 $edge-size floor($edge-size/2);
@ -18,27 +18,25 @@
}
&__bd {
padding:0 16px;
padding: 0 16px;
}
&__hd {
padding:24px 16px;
&__hd {
padding: 24px 16px;
line-height: 1.4;
border-bottom: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
color: #a6a6a6;
.item{
font-weight: 400;
.item {
font-weight: 400;
font-size: 24px;
}
.lineone{
color: #333333;
.lineone {
color: #333333;
}
.linetwo{
color: #999999;
.linetwo {
color: #999999;
}
}
&__total {
padding: 20px 24px;

45
src/subpage/pages/trade/comps/new-item.js
View File

@ -22,54 +22,57 @@ export default class TradeItem extends Component {
info: {},
rateStatus: false,
isShowDistributorInfo: true,
onClickBtn: () => {},
onClick: () => {}
onClickBtn: () => { },
onClick: () => { }
}
static options = {
addGlobalClass: true
}
handleClickBtn(type) {
handleClickBtn (type) {
const { info } = this.props
this.props.onClickBtn && this.props.onClickBtn(type, info)
}
computeTotalPrice() {
computeTotalPrice () {
let total
const {
info: { point, order_class, freight_fee, freight_type, total_fee, payment, receipt_type },
info: { totalItems, point, order_class, freight_fee, freight_type, total_fee, payment, receipt_type },
payType,
pointName
} = this.props
const [int, decimal] = String(payment || '').split('.')
if (order_class === 'pointsmall') {
if (freight_type === 'point' || (freight_type === 'cash' && freight_fee == 0)) {
total = `合计：${point} ${pointName}`
total = `总计：${point} ${pointName}`
} else if (freight_type === 'cash' && freight_fee != 0) {
total = `合计：${point} ${pointName} + ￥${formatPriceToHundred(freight_fee)}`
total = `总计：${point} ${pointName} + ￥${formatPriceToHundred(freight_fee)}`
}
} else {
if (payType === 'dhpoint') {
total = `合计：${total_fee}${pointName}`
total = `总计：${total_fee}${pointName}`
} else {
total = `合计：￥${payment}`
total = `总计：￥ ${parseInt(int).toLocaleString() + (decimal ? '.' + decimal : '')}`
}
}
return (
<View className={`trade-item__total ${receipt_type === 'dada' && 'dadaTotal'}`}>
<View className={`trade-item__total ${receipt_type === 'dada' ? 'dadaTotal' : ''}`}>
{receipt_type === 'dada' && (
<View className='dada'>
<Text className='iconfont icon-peisongxiangguan'></Text>
达达同城配送
</View>
)}
{total}
<Text className="total-txt">共{totalItems}件商品</Text>
{/* {total} */}
<Text className="total-txt" style={{ marginRight: '2rpx' }}>总计：</Text>
<Text className='total-price'>{`￥ ${parseInt(int).toLocaleString() + (decimal ? '.' + decimal : '')}`}</Text>
</View>
)
}
render() {
render () {
const {
customFooter,
onClick,
@ -95,7 +98,7 @@ export default class TradeItem extends Component {
)}
<View className='trade-item__msg'>
<View className='item lineone'>订单编号：{info.tid}</View>
<View className='item linetwo'>下单时间：{info.create_date}</View>
<View className='item linetwo'>订单时间：{info.create_date}</View>
</View>
<View className='trade-item__bd' onClick={onClick}>
{info &&
@ -118,9 +121,9 @@ export default class TradeItem extends Component {
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{(info.order_status_des === 'PAYED' || info.order_status_des === 'NOTPAY') &&
!info.is_logistics &&
info.can_apply_cancel != 0 &&
(info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? (
!info.is_logistics &&
info.can_apply_cancel != 0 &&
(info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
@ -134,7 +137,7 @@ export default class TradeItem extends Component {
style={`background: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'pay')}
>
立即支付
去支付
</Button>
</View>
</View>
@ -145,9 +148,9 @@ export default class TradeItem extends Component {
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{(info.order_status_des === 'PAYED' || info.order_status_des === 'NOTPAY') &&
info.can_apply_cancel != 0 &&
!info.is_logistics &&
(info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? (
info.can_apply_cancel != 0 &&
!info.is_logistics &&
(info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}

50
src/subpage/pages/trade/comps/new-item.scss
View File

@ -1,12 +1,12 @@
@import '@/style/imports';
.trade-item {
background: #fff;
border-radius: $item-border-radius;
padding: 24px 0 32px 0;
margin: 0 16px;
border-radius: 6px;
padding: 30px 26px 32px 20px;
margin: 0 22px;
margin-bottom: 24px;
box-shadow: 0px 2px 10px 0px #eae7e0;
background: #f7f7f7;
// box-shadow: 0px 2px 10px 0px #eae7e0;
.icon-globe {
font-size: 32px;
@ -29,7 +29,14 @@
}
}
&__bd {
padding: 0 16px;
// padding: 0 16px;
.sp-order-item {
padding: 0;
margin-bottom: 10px;
&:last-of-type {
margin-bottom: 0;
}
}
}
&__dist {
margin-bottom: 24px;
@ -39,7 +46,7 @@
margin-top: 0px;
.item {
font-weight: 400;
font-size: 24px;
font-size: 20px;
}
.lineone {
color: #333333;
@ -49,8 +56,23 @@
}
}
&__total {
padding: 0 $edge-size floor($edge-size/2);
// padding: 0 $edge-size floor($edge-size/2);
text-align: right;
color: #000;
font-size: 32px;
display: flex;
align-items: baseline !important;
padding: 0 !important;
margin-top: -14px;
.total-txt {
font-size: 20px;
color: #000;
opacity: 0.85;
margin-right: 10px;
}
.total-price {
font-size: 32px;
}
}
&__hd {
@ -106,9 +128,19 @@
/* #ifdef h5 */
button {
border: none;
margin-left: 15px;
margin-left: 10px;
}
/* #endif */
.btn-action {
margin-left: 10px;
padding: 15px 20px;
line-height: 1;
border-radius: 6px;
font-size: 20px;
&::after {
border: none;
}
}
}
}
&__status {

5
src/subpage/pages/trade/detail.config.js
View File

@ -1 +1,4 @@
export default {}
export default {
navigationBarTitleText: '订单详情',
navigationStyle: 'custom',
}

114
src/subpage/pages/trade/detail.js
View File

@ -3,7 +3,7 @@ import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Button, Image, ScrollView } from '@tarojs/components'
import { connect } from 'react-redux'
import { AtCountdown } from 'taro-ui'
import { Loading, SpNavBar, FloatMenuMeiQia, SpNewShopItem } from '@/components'
import { Loading, SpNavBar, FloatMenuMeiQia, SpNewShopItem, SpPage, SpPrice } from '@/components'
import {
log,
pickBy,
@ -88,20 +88,20 @@ export default class TradeDetail extends Component {
}
}
componentWillUnmount() {
componentWillUnmount () {
clearInterval(this.state.interval)
}
componentDidShow() {
componentDidShow () {
this.fetch()
}
isPointitemGood() {
isPointitemGood () {
const options = this.$instance.router.params
return options.type === 'pointitem'
}
calcTimer(totalSec) {
calcTimer (totalSec) {
let remainingSec = totalSec
const dd = Math.floor(totalSec / 24 / 3600)
remainingSec -= dd * 3600 * 24
@ -119,7 +119,7 @@ export default class TradeDetail extends Component {
}
}
async fetch() {
async fetch () {
const { id } = this.$instance.router.params
const data = await api.trade.detail(id)
let sessionFrom = ''
@ -305,7 +305,7 @@ export default class TradeDetail extends Component {
await copyText(msg)
}
async handlePay() {
async handlePay () {
const { info } = this.state
// this.setState({
@ -404,7 +404,7 @@ export default class TradeDetail extends Component {
// }
}
async handleClickBtn(type, e) {
async handleClickBtn (type, e) {
e.stopPropagation()
const { info } = this.state
if (type === 'home') {
@ -464,7 +464,7 @@ export default class TradeDetail extends Component {
}
}
async handleClickRefund(type, item_id) {
async handleClickRefund (type, item_id) {
const {
info: { tid: order_id }
} = this.state
@ -655,7 +655,7 @@ export default class TradeDetail extends Component {
// }
}
render() {
render () {
const { colors } = this.props
const {
info,
@ -695,14 +695,16 @@ export default class TradeDetail extends Component {
const { market_price: enMarketPrice } = order_page
return (
<View
<SpPage
isBlack
className={classNames('page-trade-detail trade-detail', {
'islog': info.is_logistics,
'trade-close': info.status == 'TRADE_CLOSED',
'has-navbar': isNavbar()
})}
showNavSearchIcon
>
<SpNavBar title='订单详情' leftIconType='chevron-left' fixed='true' />
{/* <SpNavBar title='订单详情' leftIconType='chevron-left' fixed='true' /> */}
{info.is_logistics && (
<View className='custabs'>
@ -724,7 +726,7 @@ export default class TradeDetail extends Component {
)}
<ScrollView scroll-y className='scroll-view' scrollIntoView={scrollIntoView}>
<View className='trade-detail-header' id='order-0'>
{false && <View className='trade-detail-header' id='order-0'>
<View className='trade-detail-waitdeliver'>
{info.is_logistics && <View className='oneline'>线上订单</View>}
{info.status === 'WAIT_BUYER_PAY' && (
@ -769,7 +771,7 @@ export default class TradeDetail extends Component {
</View>
)}
</View>
</View>
</View>}
{info.dada && info.dada.id && info.dada.dada_status > 1 && info.dada.dada_status !== 5 && (
<View className='dadaInfo'>
<View className='name'>
@ -812,7 +814,7 @@ export default class TradeDetail extends Component {
)}
</View>
)}
<View className='trade-detail-address'>
{/* <View className='trade-detail-address'>
{info.dada && info.dada.id && (
<View className={`store ${info.dada && info.dada.id ? 'border' : ''}`}>
<Text
@ -876,14 +878,14 @@ export default class TradeDetail extends Component {
</View>
</View>
)}
</View>
</View> */}
<View className='trade-detail-goods'>
{VERSION_PLATFORM && (
<SpNewShopItem info={distributor} canJump inOrderDetail hasLogo={false} />
)}
<View className='line'>
<View className='left'>订单号：</View>
<View className='left'>订单编号 </View>
<View className='right'>
{info.tid}
<Text className='fuzhi' onClick={this.copyOrderId.bind(this, info.tid)}>
@ -891,7 +893,69 @@ export default class TradeDetail extends Component {
</Text>
</View>
</View>
<View className='line'>
<View className='left'>订单时间 </View>
<View className='right'>
{info.created_time_str}
</View>
</View>
<View className="order_status_msg">{info.order_status_msg}</View>
<View className="address-txt">收货地址</View>
<View className='info-trade'>
<Text className='address-detail'>
{info.receiver_state}
{info.receiver_city}
{info.receiver_district}
{info.receiver_address}
</Text>
<View className='user-info-trade'>
<Text className='receiverName'>{info.receiver_name}</Text>
{!this.isPointitemGood() && <Text>{info.receiver_mobile}</Text>}
</View>
</View>
<>
<View className="address-txt info-trade">
<Text>物流信息</Text>
<Text className='right'>查看详情</Text>
</View>
<View className='address-detail' style={{ marginTop: '4rpx' }}>物流单号：{info.receiver_name}</View>
<View className='address-detail'>物流公司：{info.receiver_name}</View>
</>
<View className="address-txt info-trade">
<Text>支付方式</Text>
</View>
<View className='address-detail' style={{ marginTop: '4rpx' }}>{isDeposit ? '余额支付' : '微信支付'}</View>
</View>
<View className='trade-detail-box'>
<DetailItem info={info} isPointitem={this.isPointitemGood()} />
<View className="gap"></View>
<View className="trade-detail-info-new">
<View className='line'>
<View className='left'>订单金额</View>
<View className='right'>
{transformTextByPoint(this.isPointitemGood(), info.item_fee_new, info.item_point)}
</View>
</View>
<View className='line'>
<View className='left'>优惠金额</View>
{/* 促销 + 优惠券 */}
<View className='right'>{`¥${parseFloat(info.promotion_discount + info.coupon_discount).toFixed(2)}`}</View>
</View>
<View className='line'>
<View className='left'>运费</View>
<View className='right'>
{info.freight_type !== 'point'
? `¥${info.freight_fee}`
: `${info.freight_fee * 100}${this.props.pointName}`}
</View>
</View>
</View>
<View className="gap"></View>
<View className="trade-detail-info-bottom">
<View className='left'>订单总计</View>
<SpPrice className='right' value={info.totalpayment} showSeparator noDecimal={false}></SpPrice>
</View>
</View>
{info.is_logistics && (
<View className='logConfirm'>
@ -938,7 +1002,7 @@ export default class TradeDetail extends Component {
<Text className='trade-money__num'>￥{info.totalpayment}</Text>
)}
</View> */}
{!info.is_logistics &&
{/* {!info.is_logistics &&
info.can_apply_cancel != 0 &&
(info.status === 'WAIT_BUYER_PAY' ||
(info.status === 'WAIT_SELLER_SEND_GOODS' &&
@ -950,15 +1014,15 @@ export default class TradeDetail extends Component {
取消订单
</View>
</View>
)}
)} */}
</View>
{info.remark && (
{/* {info.remark && (
<View className='trade-detail-remark'>
<View className='trade-detail-remark__header'>订单备注</View>
<View className='trade-detail-remark__body'>{info.remark}</View>
</View>
)}
<View className='trade-detail-info'>
)} */}
{false && <View className='trade-detail-info'>
<View className='line'>
<View className='left'>下单时间</View>
<View className='right'>{info.created_time_str}</View>
@ -1085,7 +1149,7 @@ export default class TradeDetail extends Component {
</View>
</View>
)}
</View>
</View>}
{cancelData.cancel_id && (
<View className='cancelData'>
<View className='title'>取消理由：</View>
@ -1149,7 +1213,7 @@ export default class TradeDetail extends Component {
? 'trade-detail__footer_allWidthBtn'
: ''
}`}
style={`background: ${colors.data[0].primary}; border-color: ${colors.data[0].primary};`}
// style={`background: ${colors.data[0].primary}; border-color: ${colors.data[0].primary};`}
onClick={this.handleClickBtn.bind(this, 'home')}
>
继续购物
@ -1217,7 +1281,7 @@ export default class TradeDetail extends Component {
</View>
</View>
)}
</View>
</SpPage>
)
}
}

150
src/subpage/pages/trade/detail.scss
View File

@ -3,7 +3,7 @@ $paddingBottom: 100px;
.page-trade-detail {
box-sizing: border-box;
height: 100vh;
height: 100%;
overflow: hidden;
&.paddingBottom {
padding-bottom: $paddingBottom;
@ -26,12 +26,12 @@ $paddingBottom: 100px;
}
.scroll-view {
@include page-scroll(0, $tabbar-height);
@include page-scroll(var(--nav-height), 140px);
}
&.has-navbar {
.scroll-view {
top: $navigate-height;
// top: $navigate-height;
}
}
@ -234,7 +234,7 @@ $paddingBottom: 100px;
display: flex;
justify-content: flex-start;
font-size: 28px;
color: #666;
color: #5b5b5b;
align-items: center;
margin-top: 24px;
.receiverName {
@ -245,23 +245,73 @@ $paddingBottom: 100px;
font-size: 32px;
color: #333;
font-weight: bold;
line-height: 1.2;
}
}
.trade-detail-goods {
margin: 0 20px;
padding-top: 16px;
margin: 14px 22px 0;
// padding-top: 16px;
padding: 40px 30px 40px 20px;
min-height: 100px;
background: #fff;
border-radius: 6px 6px 0 0;
background: #f7f7f7;
border-radius: 6px;
position: relative;
.line {
display: flex;
padding: 20px;
font-size: 24px;
// padding: 20px;;
font-size: 20px;
color: #333;
.fuzhi {
margin-left: 20px;
color: #28a1ff;
.right {
margin-left: 4px;
font-size: 20px;
}
.left {
font-size: 20px;
}
.fuzhi {
margin-left: 30px;
// color: #28a1ff;
line-height: 1;
border-bottom: 1px solid #101010;
}
}
.order_status_msg {
font-size: 26px;
color: #000;
position: absolute;
top: 36px;
right: 30px;
}
.address-txt {
font-size: 26px;
margin-top: 56px;
color: #000;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-between;
.right {
font-size: 20px;
color: #000;
border-bottom: 1px solid #000;
}
}
.user-info-trade {
display: flex;
justify-content: flex-start;
font-size: 20px;
color: #5b5b5b80;
align-items: center;
line-height: 1;
.receiverName {
margin-right: 20px;
font-size: inherit;
}
}
.address-detail {
font-size: 20px;
// line-height: 1;
color: #5b5b5b80;
}
}
.order-item__pay-type {
@ -273,7 +323,7 @@ $paddingBottom: 100px;
padding: 10px 38px;
margin: 0 20px 20px 20px;
font-size: 26px;
color: #5b5b5b;
color: #5b5b5b80;
background: #fff;
border-radius: 0 0 6px 6px;
&__num {
@ -355,29 +405,80 @@ $paddingBottom: 100px;
background: #fff;
}
}
.trade-detail-box {
background: #f7f7f7;
border-radius: 6px;
margin: 10px 22px;
.gap {
padding: 0 54px;
width: calc(100% - 108px);
box-sizing: border-box;
height: 2px;
background: #fff;
margin: 20px auto;
}
.trade-detail-info-new {
padding: 20px 24px;
.line {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
.left,
.right {
font-size: 20px;
color: #5b5b5b;
line-height: 1;
}
}
}
.trade-detail-info-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px 50px;
.left {
font-size: 26px;
}
.right {
font-size: 32px;
}
.left,
.sp-price__symbol,
.sp-price__int {
font-weight: bold;
}
}
}
.trade-detail__footer {
position: fixed;
left: 0;
width: 100%;
height: 100px;
bottom: 0;
bottom: $edge-margin;
background: #fff;
display: flex;
justify-content: space-evenly;
align-items: center;
&__btn {
width: 338px;
height: 84px;
height: 80px;
flex-shrink: 0;
line-height: 84px;
line-height: 80px;
text-align: center;
border-radius: 40px;
color: #333;
border: 2px solid #bbb;
border-radius: 6px;
color: #000;
border: 2px solid #000;
overflow: hidden;
font-size: 26px;
font-size: 34px;
// font-weight: bold;
flex: 1;
margin: 0 20rpx;
margin: 30px 50rpx;
margin-bottom: 80px;
box-sizing: border-box;
background: #fff;
&.left {
margin-left: 7%;
width: 396px;
@ -399,7 +500,7 @@ $paddingBottom: 100px;
}
}
&_active {
color: #ffffff;
// color: #ffffff;
}
&_allWidthBtn {
// width: 100%;
@ -542,7 +643,8 @@ $paddingBottom: 100px;
.detail-item {
padding: 0;
.detail-item__title {
padding: 10px 0;
padding: 30px 22px 0px;
color: #000;
}
.order-item__bd {
margin-bottom: 0;

4
src/subpage/pages/trade/invoice-info.config.js Executable file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '开票信息',
navigationStyle: 'custom',
}

218
src/subpage/pages/trade/invoice-info.js Executable file
View File

@ -0,0 +1,218 @@
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, ScrollView, Input } from '@tarojs/components'
import _mapKeys from 'lodash/mapKeys'
import { Loading, SpPage, SpPrice, SpCheckboxNew } from '@/components'
import api from '@/api'
import { classNames, navigateTo } from '@/utils'
import { AtModal, AtIcon } from 'taro-ui'
// import { log, pickBy, resolveOrderStatus, authSetting } from '@/utils'
import './invoice-info.scss'
import { useImmer } from 'use-immer'
const initState = {
formList: [
{
name: '抬头类型',
type: 'checkbox',
key: 'invoice_title',
required: true,
},
{
name: '发票抬头',
type: 'input',
key: 'invoice_title',
placeholder: '请填写抬头名称(必填)',
required: true,
},
{
name: '邮箱地址',
type: 'input',
key: 'email',
placeholder: '用于接收电子发票(必填)',
required: true,
},
{
name: '注册地址',
type: 'input',
key: 'addr',
placeholder: '(选填)',
},
{
name: '注册电话',
type: 'input',
key: 'tel',
placeholder: '(选填)',
},
{
name: '开户银行',
type: 'input',
key: 'yh',
placeholder: '(选填)',
},
{
name: '银行账号',
type: 'input',
key: 'zh',
placeholder: '(选填)',
},
],
form: {},
showModal: false,
visible: false,
showDetail: false
}
function InvoiceInfo (props) {
const [state, setState] = useImmer(initState)
const { formList, form, showModal, visible, showDetail } = state
const onChangeItemCheck = () => {
}
const hadnleInput = (val, item) => {
const { key } = item
setState((draft) => {
draft.form[key] = val
})
}
const onPickerCancel = () => {
setState((draft) => {
draft.visible = false
})
}
return <SpPage className='page-invoice-info has-navbar' navigationBarTitleText='开票信息'>
<View className="info-bd">
{showDetail && <View className="info-bd-tips">共{0}张发票，含{1}个订单</View>}
<View className="info-item">
<View className="tit">发票类型</View>
<View className="content">
<Text>电子发票</Text>
{showDetail ? <View className='flex'>
<Text className='ck'>查看</Text>
<AtIcon value='chevron-right' size='18' color='#000'></AtIcon>
</View> : <Text className='sq'>一键授权微信发票</Text>}
</View>
</View>
{showDetail && <View className="info-item">
<View className="tit">发票状态</View>
<View className="content">
<Text>已申请</Text>
</View>
</View>}
<View className="info-item">
<View className="tit">发票金额</View>
<View className="content">
<Text>¥9999</Text>
</View>
</View>
{formList.map((item) => <View className="info-item">
<View className="tit">{item.name}</View>
{showDetail ? <View className="content">{form[item.key] || '测试'}</View> : <>{item.type === 'checkbox' && <View className="content">
<View className="content-item">
<SpCheckboxNew checked={form.gr === '1'} onChange={() => onChangeItemCheck()} >
<Text className="">个人/非企业单位</Text>
</SpCheckboxNew>
</View>
<View className="content-item">
<SpCheckboxNew checked={form.gr === '2'} onChange={onChangeItemCheck()} >
<Text className="">企业</Text>
</SpCheckboxNew>
</View>
</View>}
{item.type === 'input' && <Input value={form[item.key]} onInput={(e) => hadnleInput(e.target.value, item)} className='ipt' placeholderClass='ipt-placeholder' placeholder={item.placeholder}></Input>}</>}
</View>)}
{!showDetail && <View className="tips">
<View className="tit">温馨提示</View>
<View className="tit">
1、应国家税务总局要求，您若开具增值税普通发票，须同时提供
企业抬头及纳税人识别号，否则发票将无法用于企业报销;
</View>
<View>2、发票将由订单所属城市的公司为您开具;</View>
<View>
3、配合国家税务总局推进全面数字化的电子发票，部分城市已转
为全电发票，发票处理时长为1-3个工作日，请耐心等待。
</View>
</View>}
</View>
<View className={classNames("bottom")}>
<View onClick={() => setState((draft) => {
draft.visible = true
})} className={classNames("btn", { "btn-disabled": true })}>提交申请</View>
</View>
<View className="sp-picker">
<View
className={classNames('mask', {
visible: visible
})}
onTap={onPickerCancel}
catchtouchmove
></View>
<View
className={classNames('sp-picker-cnt', {
visible: visible
})}
>
<View className={classNames('sp-picker-hd')} catchtouchmove>
<Text className='center'>{showDetail ? '确定邮箱地址' : '开具电子发票'}</Text>
<AtIcon onClick={onPickerCancel} value='close' size={14} color='#000' ></AtIcon>
</View>
<View className='sp-picker-bd'>
{!showDetail && <>
<View className='sp-picker-bd-item'>
<View className="tit">发票类型</View>
<View className="content">电子发票</View>
</View>
<View className='sp-picker-bd-item'>
<View className="tit">抬头类型</View>
<View className="content">电子发票</View>
</View>
<View className='sp-picker-bd-item'>
<View className="tit">发票抬头</View>
<View className="content">电子发票</View>
</View>
</>}
<View className='sp-picker-bd-item'>
<View className="tit">邮箱地址</View>
<View className="content">电子发票</View>
</View>
<View onClick={() => setState((draft) => {
draft.visible = false
draft.showModal = true
})} className={classNames("btn", { "notop": showDetail })}>提交申请</View>
</View>
</View>
</View>
<View className={classNames('toast', {
visible: false
})}>
<View>已超重开发票时限</View>
<View>不可操作重开发票</View>
</View>
<AtModal
isOpened={showModal}
title=''
cancelText='关闭'
confirmText='查看记录'
onClose={() => setState((draft) => {
draft.showModal = false
})}
onCancel={() => setState((draft) => {
draft.showModal = false
})}
onConfirm={() => {
setState((draft) => {
draft.showModal = false
})
navigateTo('/subpage/pages/trade/invoice-record')
}}
content='发票申请提交成功'
/>
</SpPage>
}
export default InvoiceInfo

241
src/subpage/pages/trade/invoice-info.scss Executable file
View File

@ -0,0 +1,241 @@
@import '@/style/imports';
.page-invoice-info {
.info-bd {
margin: 10px 50px 60px;
padding-top: 10px;
&-tips {
color: #8e8e8e;
font-size: 20px;
text-align: center;
margin-bottom: 12px;
}
}
.info-item {
display: flex;
align-items: center;
color: #808080;
background: #e5e5e5;
border-radius: 6px;
margin-bottom: 2px;
padding-right: 40px;
box-sizing: border-box;
.tit {
color: #808080;
font-size: 26px;
line-height: 1;
padding: 28px 50px 28px 30px;
box-sizing: border-box;
}
.content {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
font-size: 26px;
line-height: 1;
color: #000;
&-item {
display: flex;
align-items: center;
color: #808080;
font-size: 26px;
min-width: 120px;
.sp-checkbox-new__label {
font-size: 26px;
}
}
.sq {
font-size: 20px;
line-height: 1;
border-bottom: 1px solid #000;
}
.flex {
display: flex;
align-items: center;
.ck {
font-size: 26px;
color: #163586;
margin-right: 2px;
}
}
}
.ipt {
display: flex;
flex: 1;
font-size: 26px;
line-height: 1;
color: #000;
padding-right: 40px;
box-sizing: border-box;
&-placeholder {
color: #808080;
}
}
}
.tips {
padding: 60px 40px 40px;
view,
text {
font-size: 20px;
color: #999;
}
}
.bottom {
position: fixed;
bottom: 90px;
left: 0;
right: 0;
width: 100%;
.btn {
&-disabled {
background: #666;
}
}
}
.at-modal {
&__overlay {
background-color: rgba(0, 0, 0, 0.6);
}
&__container {
width: 560px;
border-radius: 10px;
}
&__header {
display: none;
}
&__content {
padding: 70px 80px 50px;
text-align: center;
min-height: auto;
display: flex;
.content-simple {
font-size: 30px;
}
}
.at-modal__footer--simple .at-modal__action > button:last-child:nth-child(2) {
color: #222;
}
}
.sp-picker {
.mask {
position: fixed;
z-index: 2;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
&.visible {
visibility: visible;
opacity: 1;
}
}
&-cnt {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease-in-out;
transform: translateY(100%);
z-index: 13;
background-color: #fff;
border-radius: 30rpx 30rpx 0 0;
&.visible {
transform: translateY(0);
}
}
&-hd {
padding: 30px 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: none;
position: relative;
font-size: 26px;
.center {
margin: auto;
}
.at-icon-close {
padding: 20px 30px;
position: absolute;
right: 20px;
}
}
&-bd {
padding-bottom: 90px;
&-item {
display: flex;
align-items: center;
border-bottom: none;
padding: 0 90px;
view {
color: #000;
font-size: 26px;
line-height: 1;
}
.tit {
padding: 28px 50px 28px 30px;
box-sizing: border-box;
}
.content {
display: flex;
flex: 1;
color: #000;
}
}
.btn {
margin-top: 60px;
}
}
}
.btn {
margin: 0 50px;
display: flex;
height: 80px;
align-items: center;
justify-content: center;
font-size: 32px;
line-height: 1;
background: #000;
color: #fff;
border-radius: 6px;
&.notop {
margin-top: 10px;
}
}
.toast {
position: fixed;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 400px;
height: 120px;
background: #666;
color: #fff;
border-radius: 10px;
view {
font-size: 30px;
}
&.visible {
visibility: visible;
opacity: 1;
}
}
}

66
src/subpage/pages/trade/invoice-list.js
View File

@ -2,11 +2,11 @@ import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import _mapKeys from 'lodash/mapKeys'
import { Loading, SpNote, SpPage } from '@/components'
import { Loading, SpNote, SpPage, SpPrice, SpCheckboxNew } from '@/components'
import api from '@/api'
import { withPager, withLogin } from '@/hocs'
import { log, pickBy, resolveOrderStatus, authSetting } from '@/utils'
import TradeItem from './comps/item'
// import TradeItem from './comps/item'
import './invoice-list.scss'
@ -65,7 +65,7 @@ export default class InvoiceList extends Component {
log.debug('[trade list] list fetched and processed: ', nList)
this.setState({
list: [...this.state.list, ...nList]
list: [...this.state.list, ...nList, {}, {}, {}, {}, {}, {}, {}, {}]
})
return { total }
@ -127,6 +127,9 @@ export default class InvoiceList extends Component {
)
}
}
onChangeItemCheck = (item) => {
console.log(item, 'ckeck点击')
}
render () {
const { list, page } = this.state
@ -136,23 +139,52 @@ export default class InvoiceList extends Component {
{/* <SpNavBar title='发票管理' leftIconType='chevron-left' fixed='true' /> */}
<ScrollView scrollY className='trade-list__scroll' onScrollToLower={this.nextPage}>
{list.map((item) => {
{list.map((item, idx) => {
return (
<TradeItem
customFooter
payType={item.pay_type}
key={item.tid}
info={item}
onClick={this.handleClickItem.bind(this, item)}
onClickBtn={this.handleClickItemBtn}
renderFooter={
<View className='trade-item__ft'>
<Text className='trade-item__status'>已开票</Text>
// <TradeItem
// customFooter
// payType={item.pay_type}
// key={item.tid}
// info={item}
// onClick={this.handleClickItem.bind(this, item)}
// onClickBtn={this.handleClickItemBtn}
// renderFooter={
// <View className='trade-item__ft'>
// <Text className='trade-item__status'>已开票</Text>
// </View>
// }
// />
<View className='invoice-item' key={`invoice_item_${idx}`}>
<SpCheckboxNew
checked={item.is_checked}
onChange={this.onChangeItemCheck.bind(this, item)}
/>
<View className="right">
<View className="right-item">{idx + 1}开票金额：
<SpPrice size={28} className='total-pirce' value={item.payment / 100} showSeparator noDecimal />
</View>
}
/>
<View className="right-item">订单编号：{item.tid}</View>
<View className="right-item">下单时间：{item.create_date}</View>
</View>
</View>
)
})}
{!page.isLoading && list?.length && <View className="bottom">
<View className="bottom-line">
<View className="left">已选{1}个订单，共计
<SpPrice size={20} className='total-pirce' value={900900 / 100} showSeparator noDecimal />
</View>
<View className="right">开票金额以实际为准</View>
</View>
<View className='bottom-wrap'>
<SpCheckboxNew
checked={false}
onChange={this.onChangeItemCheck.bind(this, {})}
/>
<View className="bottom-txt">本页全选</View>
<View className="bottom-btn">下一步</View>
</View>
</View>}
{/*<AtButton
circle
type='primary'
@ -161,7 +193,7 @@ export default class InvoiceList extends Component {
>下载</AtButton>*/}
{page.isLoading && <Loading>正在加载...</Loading>}
{!page.isLoading && !page.hasNext && !list.length && (
<SpNote img='trades_empty.png'>赶快去添加吧~</SpNote>
<SpNote img='trades_empty.png'>已完成订单为空~</SpNote>
)}
</ScrollView>
</SpPage>

86
src/subpage/pages/trade/invoice-list.scss
View File

@ -4,10 +4,92 @@
.page-invoice-list {
.trade-list {
&__scroll {
@include page-scroll($tabs-height + $navigate-height + 10px, 0);
// @include page-scroll($tabs-height + $navigate-height + 10px, 0);
@include page-scroll(var(--nav-height), 140px);
padding-top: 20px;
padding-bottom: 210px;
}
}
.invoice-item {
margin: 20px;
margin-top: 0;
padding: 50px 30px;
box-sizing: border-box;
background: #f7f7f7;
border-radius: 6px;
display: flex;
align-items: center;
.right {
display: flex;
flex-direction: column;
margin-left: 10px;
&-item {
color: #000;
margin-bottom: 20px;
line-height: 1;
}
&-item:last-child {
margin-bottom: 0;
}
}
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
&-line {
width: 100%;
padding: 16px 36px 16px 50px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background: #999;
color: #fff;
.left {
display: flex;
align-items: center;
font-size: 20px;
line-height: 1;
.sp-price__symbol,
.sp-price__int {
color: #fff;
margin-right: 0 !important;
}
}
.right {
font-size: 20px;
line-height: 1;
}
}
&-wrap {
width: 100%;
padding: 10px 36px 50px 50px;
display: flex;
align-items: center;
box-sizing: border-box;
background: #fff;
}
&-txt {
margin-left: 20px;
line-height: 1;
}
&-btn {
margin-left: auto;
display: flex;
width: 300px;
height: 80px;
align-items: center;
justify-content: center;
font-size: 32px;
line-height: 1;
background: #000;
color: #fff;
border-radius: 6px;
}
}
.trade-item {
&__ft {
flex: 1;

4
src/subpage/pages/trade/invoice-record.config.js Executable file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: ' ',
navigationStyle: 'custom',
}

163
src/subpage/pages/trade/invoice-record.js Executable file
View File

@ -0,0 +1,163 @@
import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import _mapKeys from 'lodash/mapKeys'
import { Loading, SpNote, SpPage, SpPrice, SpCheckboxNew } from '@/components'
import api from '@/api'
import { withPager, withLogin } from '@/hocs'
import { log, pickBy, resolveOrderStatus, authSetting } from '@/utils'
import { AtIcon } from 'taro-ui'
import './invoice-record.scss'
@withPager
@withLogin()
export default class InvoiceList extends Component {
constructor(props) {
super(props)
this.state = {
...this.state,
list: []
}
}
componentDidMount () {
this.nextPage()
}
componentWillUnmount () { }
async fetch (params) {
params = _mapKeys(
{
...params
},
function (val, key) {
if (key === 'page_no') return 'page'
if (key === 'page_size') return 'pageSize'
return key
}
)
const { list, total_count: total } = await api.trade.involiceList(params)
let nList = pickBy(list, {
tid: 'order_id',
status_desc: 'order_status_msg',
status: ({ order_status }) => resolveOrderStatus(order_status),
totalItems: ({ items }) => items.reduce((acc, item) => +item.num + acc, 0),
payment: ({ total_fee }) => (total_fee / 100).toFixed(2),
pay_type: 'pay_type',
point: 'point',
create_date: 'create_date',
order: ({ items }) =>
pickBy(items, {
order_id: 'order_id',
item_id: 'item_id',
pic_path: 'pic',
title: 'item_name',
price: ({ item_fee }) => (+item_fee / 100).toFixed(2),
point: 'item_point',
num: 'num'
})
})
log.debug('[trade list] list fetched and processed: ', nList)
this.setState({
list: [...this.state.list, ...nList, {}, {}, {}, {}, {}, {}, {}, {}]
})
return { total }
}
handleClickItem = (trade) => {
const { tid } = trade
Taro.navigateTo({
url: `/subpage/pages/trade/detail?id=${tid}`
})
}
handleClickItemBtn = async (type, trade) => {
const params = { ...trade }
// console.log(trade, 84)
switch (type) {
case 'add-card':
await Taro.addCard(params)
break
case 'open-card':
await Taro.openCard(params)
break
}
}
handleClickBtn = async (type) => {
if (type === 'add-card') {
const showErr = (title = '下载失败') => {
return Taro.showToast({
icon: 'none',
title
})
}
authSetting(
'writePhotosAlbum',
async () => {
const { tempFilePath } = await Taro.downloadFile({
url: 'http://mmbiz.qpic.cn/mmbiz_png/1nDJByqmW2drJSibeWL0bEib2rj4OxG6ep2Y8VggMzP2pSSHVGNW3eIEy9BUiaMfxD4MrWUQ2oVaNEZs4VfQg8tSw/0?wx_fmt=png'
})
try {
await Taro.saveImageToPhotosAlbum({
filePath: tempFilePath
})
Taro.showToast({
icon: 'success',
title: '成功保存照片'
})
} catch (e) {
console.log(e)
}
// this.handleClickLayer()
},
() => {
showErr()
}
)
}
}
onChangeItemCheck = (item) => {
console.log(item, 'ckeck点击')
}
render () {
const { list, page } = this.state
return (
<SpPage className='page-invoice-info has-navbar' navigationBarTitleText='发票记录'>
<ScrollView scrollY className='trade-list__scroll' onScrollToLower={this.nextPage}>
{list.map((item, idx) => {
return (
<View className='invoice-item' key={`invoice_item_${idx}`}>
<View className="right">
<View className="right-item">{idx + 1}发票金额：
<SpPrice size={28} className='total-pirce' value={item.payment / 100} showSeparator noDecimal />
</View>
<View className="right-item">发票类型：电子发票</View>
<View className="right-item">抬头类型：{item.create_date}</View>
<View className="right-item">申请时间：{item.create_date || '2023-12-18 10:10'}</View>
</View>
<View className="status">
<Text className="txt">已申请</Text>
<AtIcon value='chevron-right' size='18' color='#888'></AtIcon>
</View>
</View>
)
})}
{page.isLoading && <Loading>正在加载...</Loading>}
</ScrollView>
</SpPage>
)
}
}

113
src/subpage/pages/trade/invoice-record.scss Executable file
View File

@ -0,0 +1,113 @@
@import '@/style/imports';
.page-invoice-info {
.trade-list {
&__scroll {
// @include page-scroll($tabs-height + $navigate-height + 10px, 0);
@include page-scroll(var(--nav-height), 140px);
padding-top: 20px;
padding-bottom: 210px;
}
}
.invoice-item {
margin: 0 20px 10px;
padding: 46px 36px 46px 50px;
box-sizing: border-box;
background: #f7f7f7;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
.right {
display: flex;
flex-direction: column;
margin-left: 10px;
&-item {
color: #000;
margin-bottom: 20px;
line-height: 1;
}
&-item:last-child {
margin-bottom: 0;
}
}
.status {
color: #888;
display: flex;
align-items: center;
.txt {
margin-right: 20px;
}
}
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
&-line {
width: 100%;
padding: 16px 36px 16px 50px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background: #999;
color: #fff;
.left {
display: flex;
align-items: center;
font-size: 20px;
line-height: 1;
.sp-price__symbol,
.sp-price__int {
color: #fff;
margin-right: 0 !important;
}
}
.right {
font-size: 20px;
line-height: 1;
}
}
&-wrap {
width: 100%;
padding: 10px 36px 50px 50px;
display: flex;
align-items: center;
box-sizing: border-box;
background: #fff;
}
&-txt {
margin-left: 20px;
line-height: 1;
}
&-btn {
margin-left: auto;
display: flex;
width: 300px;
height: 80px;
align-items: center;
justify-content: center;
font-size: 32px;
line-height: 1;
background: #000;
color: #fff;
border-radius: 6px;
}
}
.trade-item {
&__ft {
flex: 1;
display: flex;
align-items: top;
justify-content: flex-end;
}
&__status {
font-size: $font-size-small;
color: #c1c1c1;
line-height: 40px;
}
}
}

11
src/subpage/pages/trade/list.js
View File

@ -35,8 +35,9 @@ export default class TradeList extends Component {
...this.state,
curTabIdx: 0,
tabList: [
{ title: '全部订单', status: '0' },
{ title: '待支付', status: '5' },
{ title: '全部', status: '0' },
{ title: '待付款', status: '5' },
{ title: '待发货', status: '6' },
{ title: '待收货', status: '1' }
],
// 是否显示待评价
@ -52,6 +53,7 @@ export default class TradeList extends Component {
const _tabList = JSON.parse(JSON.stringify(this.state.tabList))
if (evaluate == 1) {
_tabList.push({ title: '待评价', status: '7', is_rate: 0 })
_tabList.push({ title: '售后', status: '---', is_rate: 0 })
}
const tabIdx = _tabList.findIndex((tab) => tab.status === status)
if (tabIdx >= 0) {
@ -312,6 +314,7 @@ export default class TradeList extends Component {
className={classNames('page-trade-list', {
'has-navbar': true || isNavbar()
})}
showNavSearchIcon
>
<SpNavBar title='订单列表' leftIconType='chevron-left' fixed='true' />
<AtTabs
@ -349,8 +352,8 @@ export default class TradeList extends Component {
})}
{page.isLoading && <Loading>正在加载...</Loading>}
{!page.isLoading && !page.hasNext && !list.length && (
<SpNote isUrl img={`${process.env.APP_IMAGE_CDN}/empty_order.png`}>
您还没有商城订单呦~
<SpNote isUrl img={`${process.env.APP_IMAGE_CDN_NEW}/cart/logo-hui.png`} height={144} width={144}>
您的{curTabIdx != '0' ? tabList[curTabIdx].title : ''}订单为空
</SpNote>
)}
{!!curItemActionsId && <View className='layer' onClick={this.hideLayer} />}

37
src/subpage/pages/trade/list.scss
View File

@ -23,7 +23,8 @@
}
.trade-list {
&__scroll {
@include page-scroll($navigate-height-h5, $edge-margin);
// @include page-scroll($navigate-height-h5, $edge-margin);
@include page-scroll(var(--nav-height), 40px);
}
}
}
@ -39,10 +40,12 @@
&__item {
// height: $tabs-height;
color: $color-brand-accent-light;
font-size: 26px;
padding: 24px 10px;
}
&__item-underline {
width: 40%;
left: 30%;
width: 70%;
left: 15%;
background: $color-brand-primary;
}
&__item--active {
@ -60,7 +63,8 @@
// $tabs-height + 30px,
// $edge-margin
// );
@include page-scroll($tabs-height + $navigate-height + 30px, $edge-margin);
// @include page-scroll($tabs-height + $navigate-height + 30px, $edge-margin);
@include page-scroll(calc(var(--nav-height) + 110px), $edge-margin);
/* #ifdef h5 */
@include page-scroll($navigate-height-h5 + $tabs-height + 30px, $edge-margin);
/* #endif */
@ -68,6 +72,17 @@
&.with-tabs-wx {
@include page-scroll($navigate-height-h5, $edge-margin);
}
.sp-note {
.sp-image {
margin-top: 400px;
}
&__text {
margin-top: 24px;
font-weight: bold;
font-size: 40px;
color: #000;
}
}
}
.trade-cont {
.more {
@ -83,15 +98,17 @@
position: relative;
.btn-action {
width: auto;
margin-left: 20px;
padding: 0 22px;
height: 42px;
line-height: 42px;
border-radius: 8px;
font-size: $font-size-small;
margin-left: 10px;
padding: 15px 20px;
// height: 42px;
line-height: 22px;
border-radius: 6px;
font-size: 20px;
color: #fff;
background: #fff;
margin-top: 0px;
box-sizing: border-box;
box-shadow: 0 0 0 1px #000000 !important;
&::after {
background: none;
border: none;

5
src/subpages/auth/reg-rule.config.js
View File

@ -1 +1,4 @@
export default {}
export default {
navigationBarTitleText: ' ',
navigationStyle: 'custom',
}

18
src/subpages/auth/reg-rule.js
View File

@ -18,11 +18,11 @@ export default class RegRule extends Component {
}
}
componentDidMount() {
componentDidMount () {
this.fetch()
}
async fetch() {
async fetch () {
let data = ''
let navBarTitle = '协议'
const { type } = this.$instance.router.params
@ -65,14 +65,16 @@ export default class RegRule extends Component {
})
}
render() {
render () {
const { info, title } = this.state
return (
<ScrollView enhanced scrollY showScrollbar={false} className='page-auth-reg-rule'>
{info && (
<SpHtml content={info} />
)}
</ScrollView>
<SpPage className="has-navbar" navigationBarTitleText={title}>
<ScrollView enhanced scrollY showScrollbar={false} className='page-auth-reg-rule'>
{info && (
<SpHtml content={info} />
)}
</ScrollView>
</SpPage>
)
}
}

2
src/subpages/auth/reg-rule.scss
View File

@ -2,5 +2,5 @@
padding: 30px;
background: #fff;
box-sizing: border-box;
height: 100vh;
height: calc(100vh - var(--nav-height) - 40px);
}

31
src/subpages/member/index.js
View File

@ -108,7 +108,7 @@ function MemberIndex (props) {
// console.log('===>getCurrentPages==>', getCurrentPages(), getCurrentInstance())
const $instance = getCurrentInstance()
const { isLogin, isNewUser, login, getUserInfoAuth } = useLogin({
autoLogin: true,
autoLogin: false,
// policyUpdateHook: (isUpdate) => {
// // isUpdate && setPolicyModal(true)
// if (isUpdate) {
@ -457,11 +457,13 @@ function MemberIndex (props) {
>
<View className='header-hd'>
<View className='header-hd__header' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
<SpImage
className='usericon'
src={(userInfo && userInfo.avatar) || ''}
width='110'
/>
<SpLogin newUser={isNewUser}>
<SpImage
className='usericon'
src={(userInfo && userInfo.avatar) || `${process.env.APP_IMAGE_CDN_NEW}/member/user-icon.png`}
width='114'
/>
</SpLogin>
</View>
<View className='header-hd__body' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
<View className='username-wrap'>
@ -583,7 +585,7 @@ function MemberIndex (props) {
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=1')}
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=6')}
>
<View className='order-item-view'>
<SpImage src='member/daifahuo.png' className='icon-style' isNew />
@ -611,7 +613,7 @@ function MemberIndex (props) {
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/after-sale')}
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
>
<View className='order-item-view'>
<SpImage src='member/yiwancheng.png' className='icon-style' isNew />
@ -625,7 +627,8 @@ function MemberIndex (props) {
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/after-sale')}
// /subpage/pages/trade/after-sale
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
>
<View className='order-item-view'>
<SpImage src='member/pingjia.png' className='icon-style' mode='aspectFit' height={42} isNew />
@ -704,15 +707,15 @@ function MemberIndex (props) {
</View>
</View>
{state.isOpen && <View className={`${state.isOpen ? 'show ' : 'hide '}` + 'curtain'} onClick={() => setState((draft) => { draft.isOpen = false })}>
<View className="curtain_mask">
<View className="curtain_content">
<View className="curtain_content_title">
{state.isOpen && <View className={`${state.isOpen ? 'show ' : 'hide '}` + 'curtain-block'} onClick={() => setState((draft) => { draft.isOpen = false })}>
<View className="curtain-block_mask">
<View className="curtain-block_content">
<View className="curtain-block_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<View className="">隐私政策</View>
</View>
<ScrollView scrollY
scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
scrollWithAnimation className="curtain-block_content_text" showScrollbar={false} enhanced>
亲爱的用户,感谢您使用Birkenstock微信小程序!为了加强对您个人信息的保护,我们根据最新法律的要求制定/更新了《隐私政策》,我们将基于合法以及正当必要的原则,按照本政策的规定向您提供各项服务
本政策旨在向您说明休迪贸易 (上海)有限公司及其在中国大陆境内的线上线下门店如何收集、使用、传输和保护您的个人信息
通过《隐私政策》,我们向您主要说明:

8
src/subpages/member/index.scss
View File

@ -16,9 +16,10 @@
}
.usericon {
border: 4px solid #fff;
// border: none;
width: 110px;
height: 110px;
border-radius: 50px;
border-radius: 50%;
margin-right: 20px;
overflow: hidden;
}
@ -217,7 +218,8 @@
.order-bradge {
position: absolute;
top: -6px;
right: 45px;
// right: 45px;
right: -16px;
font-size: 20px;
display: block;
border: 3px solid #fff;
@ -321,7 +323,7 @@
}
}
}
.curtain {
.curtain-block {
display: block;
position: fixed;
top: 0;

115
src/subpages/member/user-info.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react'
import { useSelector } from 'react-redux'
import { useSelector, useDispatch } from 'react-redux'
import { useImmer } from 'use-immer'
import Taro from '@tarojs/taro'
import { AtButton } from 'taro-ui'
@ -10,6 +10,7 @@ import { SG_POLICY } from '@/consts'
import { classNames, showToast, formatTime, isWeixin, isWeb, pickBy } from '@/utils'
import imgUploader from '@/utils/upload'
import { View, Input, Picker, Button, Text, Checkbox } from '@tarojs/components'
import { updateUserInfo } from '@/store/slices/user'
import './user-info.scss'
const initialState = {
@ -30,6 +31,7 @@ const initialState = {
function MemberUserInfo () {
const [state, setState] = useImmer(initialState)
const dispatch = useDispatch()
const {
formItems,
formUserInfo,
@ -49,7 +51,6 @@ function MemberUserInfo () {
useEffect(() => {
getFormItem()
fetchData()
}, [])
useEffect(() => {
@ -68,30 +69,32 @@ function MemberUserInfo () {
label: 'label',
children: 'children'
})
let arrProvice = []
let arrCity = []
let arrCounty = []
_nList.map((item, index) => {
arrProvice.push(item.label)
if (index === 0) {
item.children.map((c_item, c_index) => {
arrCity.push(c_item.label)
if (c_index === 0) {
c_item.children.map((cny_item) => {
arrCounty.push(cny_item.label)
})
}
})
}
})
setState((draft) => {
draft.nList = _nList
draft.areaList = [arrProvice, arrCity, arrCounty]
// draft.multiIndex = [0, 0, 0]
})
// let arrProvice = []
// let arrCity = []
// let arrCounty = []
// _nList.map((item, index) => {
// arrProvice.push(item.label)
// if (index === 0) {
// item.children.map((c_item, c_index) => {
// arrCity.push(c_item.label)
// if (c_index === 0) {
// c_item.children.map((cny_item) => {
// arrCounty.push(cny_item.label)
// })
// }
// })
// }
// })
// setState((draft) => {
// draft.nList = _nList
// draft.areaList = [arrProvice, arrCity, arrCounty]
// // draft.multiIndex = [0, 0, 0]
// })
return _nList
}
const getFormItem = async () => {
const _areaList = await fetchData()
const data = await api.user.regParam({
is_edite_page: true
})
@ -111,7 +114,6 @@ function MemberUserInfo () {
}
Object.keys(data).forEach((key, i) => {
const value = custom_data[key] || userInfo[key]
console.log("🚀 ~ key:", key, formSort[key])
if (data[key].is_open) {
// if (key !== 'mobile' && key !== 'username') {
// }
@ -132,10 +134,52 @@ function MemberUserInfo () {
}
})
_formItems.push({ name: "居住城市", required_message: "请输入居住城市", key: "city", element_type: "area", field_type: 7, placeholder: "请选择居住城市", range: [], sort: 999 })
console.log("🚀 ~ _formItems:", _formItems)
const { life_province, life_city, life_county } = userInfo
_formUserInfo.life_province = life_province
_formUserInfo.life_city = life_city
_formUserInfo.life_county = life_county
// _formUserInfo.multiIndex = userInfo.multiIndex || [0, 0, 0]
let _multiIndex = [0, 0, 0]
let arrProvice = []
let arrCity = []
let arrCounty = []
_areaList.forEach((item, index) => {
arrProvice.push(item.label)
if (life_province && life_city && life_county) {
if (item.label === life_province) {
_multiIndex[0] = index
item.children.map((s_item, sIndex) => {
arrCity.push(s_item.label)
if (s_item.label === life_city) {
_multiIndex[1] = sIndex
s_item.children.map((th_item, thIndex) => {
arrCounty.push(th_item.label)
if (th_item.label === life_county) {
_multiIndex[2] = thIndex
}
})
}
})
}
} else {
if (index === 0) {
item.children.map((c_item, c_index) => {
arrCity.push(c_item.label)
if (c_index === 0) {
c_item.children.map((cny_item) => {
arrCounty.push(cny_item.label)
})
}
})
}
}
})
setState((draft) => {
draft.nList = _areaList
draft.formItems = _formItems.sort((a, b) => a.sort - b.sort)
draft.formUserInfo = _formUserInfo
draft.areaList = [arrProvice, arrCity, arrCounty]
draft.multiIndex = _multiIndex
})
}
@ -186,12 +230,14 @@ function MemberUserInfo () {
}
const renderDatePicker = ({ key, required_message }) => {
const disabled = key === 'birthday' && !userInfo.birthday_can_edit
return (
<Picker mode='date' value={formUserInfo[key]} onChange={onChangePicker.bind(this, key)} start='1900-01-01' end={formatTime(new Date())}>
<Picker mode='date' disabled={disabled} value={formUserInfo[key]} onChange={onChangePicker.bind(this, key)} start='1900-01-01' end={formatTime(new Date())}>
<View
className={classNames('picker-value', {
'placeholder': !formUserInfo[key]
})}
style={{ 'color': disabled ? '#a5a5a5' : '#000' }}
>
{formUserInfo[key] || required_message}
</View>
@ -278,9 +324,11 @@ function MemberUserInfo () {
})
}
})
const { province: life_province, city: life_city, county: life_county } = _info
setState((draft) => {
draft.multiIndex = e.detail.value
draft.info = _info
draft.formUserInfo = { ...draft.formUserInfo, life_province, life_city, life_county, multiIndex }
})
}
@ -342,7 +390,7 @@ function MemberUserInfo () {
value={multiIndex}
range={areaList}
>
<View className='picker'>
<View className='picker' style={{ 'color': multiIndex.length > 0 ? '#000' : '#a5a5a5' }}>
{info.address_id ? (
`${info.province}-${info.city}-${info.county}`
) : (
@ -380,16 +428,19 @@ function MemberUserInfo () {
const { avatar, username } = formUserInfo
await api.member.updateMemberInfo({
username,
avatar
avatar,
...formUserInfo
})
await api.member.setMemberInfo({
...formUserInfo
...formUserInfo,
})
showToast('修改成功')
await getUserInfo(true)
let memberRes = await api.member.memberInfo()
dispatch(updateUserInfo(memberRes))
setTimeout(() => {
Taro.navigateBack()
}, 200)
}, 300)
}
const handleLogOff = async () => {
@ -469,7 +520,7 @@ function MemberUserInfo () {
if (isWeixin) {
return (
<Button class='avatar-wrapper' open-type='chooseAvatar' onChooseAvatar={onChooseAvatar}>
<SpImage src={formUserInfo.avatar || 'user_icon.png'} width={110} height={110} circle />
<SpImage src={'cart/logo-hui.png'} width={110} height={110} circle isNew />
</Button>
)
} else {
@ -513,7 +564,7 @@ function MemberUserInfo () {
onInput={onChangeUsername}
onConfirm={onChangeUsername}
/> : renderFormItem(item)}
{(item.element_type === 'select' || item.element_type === 'date') && <View className="iconfont icon-arrowRight"></View>}
{(item.element_type === 'select' || item.element_type === 'date') && <View className="iconfont icon-arrowRight" style={{ color: item.key === 'birthday' && !userInfo.birthday_can_edit ? '#a5a5a5' : '#000' }}></View>}
</View>
</View>)}
</View>