2100 lines
51 KiB
Vue
2100 lines
51 KiB
Vue
<template>
|
||
<view style="height: 100vh" class="o-h">
|
||
<!-- <view v-if="cid == 21" class="form-top-nav d-b-c">
|
||
<view class="form-top-nav-item" :class="{ active: qdtype == 1 }" @click="changeRegistType(0)">云仓
|
||
</view>
|
||
<view class="form-top-nav-item" :class="{ active: qdtype == 17 }" @click="changeRegistType(17)">精选
|
||
</view>
|
||
</view> -->
|
||
<template v-if="cid == -1">
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="haifx" class="share-bg Poster1" :src="haifx"
|
||
mode=""></image>
|
||
<view class="Poster1 share-text d-c-c f30 mb20 pr gray3" style="z-index: 2">
|
||
<view class="Poster1" :data-enode="userinfo.memberCode || ''">{{
|
||
userinfo.memberCode || ""
|
||
}}</view>
|
||
</view>
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-codeimg Poster1"
|
||
:src="qrcode" mode=""></image>
|
||
<image class="btnShare" src="/static/bg/btnShare.png" @click="downImage('Poster1')" mode=""></image>
|
||
<!-- <button class="domation-sharebtn" @click="startDownload(qrcode)">保存</button> -->
|
||
</template>
|
||
<!-- 新海粉分享 -->
|
||
<template v-if="cid == 7 && showPop">
|
||
<image @click="showPop = false" style="
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
left: 40rpx;
|
||
top: 60rpx;
|
||
z-index: 120;
|
||
" src="/static/icon/back.png" mode=""></image>
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="haifxnews" class="share-bg Poster2"
|
||
:src="haifxnews" mode=""></image>
|
||
<view class="Poster2 share-text d-c-c f30 mb20 pr gray3" style="z-index: 2">
|
||
<view class="Poster2" :data-enode="userinfo.memberCode || ''">{{
|
||
userinfo.memberCode || ""
|
||
}}</view>
|
||
</view>
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-codeimg Poster2"
|
||
:src="qrcode" mode=""></image>
|
||
<image class="btnShare Poster3" src="/static/bg/btnShare.png" @click="downImage('Poster2')" mode=""></image>
|
||
<!-- <button class="domation-sharebtn" @click="startDownload(qrcode)">保存</button> -->
|
||
</template>
|
||
<!-- <view class="share-pop" v-if="showPop">
|
||
<view class="d-e-c mb10" @click="showPop = false"><u-icon name="close" size="32rpx" bold color="#999"></u-icon></view>
|
||
<view class="d-c-c f30 fb gray3">{{ $t('w_0009') }}</view>
|
||
<view class="share-box">
|
||
<image crossorigin="anonymous" data-etype="image" data-enode="/static/bg/share-code.png" class="share-code Poster2" src="/static/bg/share-code.png"></image>
|
||
<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-image Poster2" :src="qrcode"></image>
|
||
</view>
|
||
<view class="d-c-c">
|
||
<button class="domation-btn" @click="downImage('Poster2')">{{ $t('PER_DA_12') }}</button>
|
||
</view>
|
||
</view> -->
|
||
<template v-else>
|
||
<view class="zone">
|
||
<view class="pop-tips" v-if="isMaxGrade && cid == 201">
|
||
<u-icon name="info-circle-fill" color="#fff" size="32rpx" style="margin-right: 10rpx"></u-icon>
|
||
{{ $t("fn_013") }}
|
||
<text class="tips-num">{{ formatNum(nextText) }}PV</text>
|
||
{{ $t("MN_F_T_953") }}
|
||
</view>
|
||
<view class="pop-tips" v-if="!isMaxGrade && cid == 201">{{
|
||
$t("fn_058")
|
||
}}</view>
|
||
<view class="pop-tips" v-if="cid == 30">
|
||
{{ $t("fn_012") }}:{{ currencyIcon() }}
|
||
<text class="tips-num">{{ formatNum(resaleIncomeBonus) }}</text>
|
||
</view>
|
||
<view class="d-b-s">
|
||
<view class="category-left">
|
||
<template v-if="cid == 21">
|
||
<view v-for="(item, index) in category1" :key="index" class="hf-leftmenu">
|
||
<view class="category-left-item" @click="changeCategory1(item.pkId)"
|
||
:class="{ active: category1_id == item.pkId }">
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
<template v-if="category1_id == item.pkId">
|
||
<view class="left-item-child" @click="changeCategory2(0)"
|
||
:class="{ active: category2_id == 0 }">
|
||
<text>{{ $t("ENU_GIFT_T_1") }}</text>
|
||
</view>
|
||
<view @click="changeCategory2(sitem.pkId)" v-for="(sitem, sindex) in category2"
|
||
:key="sindex" class="left-item-child"
|
||
:class="{ active: category2_id == sitem.pkId }">
|
||
<text>{{ sitem.title }}</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="category-left-item" @click="changeCategory1(0)"
|
||
:class="{ active: category1_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
|
||
<view class="category-left-item" @click="changeCategory1(item.pkId)"
|
||
:class="{ active: category1_id == item.pkId }" v-for="(item, index) in category1"
|
||
:key="index">
|
||
<text>{{ item.classifyName }}</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="right-box">
|
||
<template v-if="cid == 21">
|
||
<view class="category-right-top21">
|
||
<view class="category-right-top hftop">
|
||
<view class="flex-1 lefttopbox">
|
||
<view class="category-right-top-item" @click="changeCategory3(0)"
|
||
:class="{ active: category3_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
|
||
<view class="category-right-top-item" @click="changeCategory3(item.pkId)"
|
||
:class="{ active: item.pkId == category3_id }"
|
||
v-for="(item, index) in category3" :key="index">
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
<view @click="openTop" class="open-top-btn mr20"><u-icon name="arrow-down"
|
||
size="26rpx" bold color="#333"></u-icon></view>
|
||
</view>
|
||
<view class="d-b-c border-t p-20-0">
|
||
<view class="f24 gray6 flex-1 tc" @click="changeType(1)"
|
||
:class="{ activeColor: activeType == 1 }">{{ $t("w_0326") }}</view>
|
||
<view class="f24 gray6 d-c-c flex-1 tc" @click="changeType(2)">
|
||
<text class="mr10"
|
||
:class="{ activeColor: activeType == 2 }">{{ $t("w_0149") }}</text>
|
||
<u-icon :name="
|
||
priceSorting == 1 ? 'arrow-down-fill' : 'arrow-up-fill'
|
||
" size="22rpx" :color="activeType == 2 ? '#E03030' : '#999999'"></u-icon>
|
||
</view>
|
||
<view class="f24 gray6 d-c-c flex-1 tc" @click="changeType(3)"
|
||
:class="{ activeColor: activeType == 3 }">
|
||
<text class="mr10">{{ $t("CK_KS_102") }}</text>
|
||
<u-icon :name="
|
||
salesSorting == 1 ? 'arrow-down-fill' : 'arrow-up-fill'
|
||
" size="22rpx" :color="activeType == 3 ? '#E03030' : '#999999'"></u-icon>
|
||
</view>
|
||
<view @click="isRight = true" class="icon iconfont icon-shaixuan p-0-20"
|
||
style="color: #fff; font-size: 32rpx"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="d-b-c">
|
||
<view class="category-right-top flex-1">
|
||
<view class="category-right-top-item" @click="changeCategory2(0)"
|
||
:class="{ active: category2_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
|
||
<view class="category-right-top-item" @click="changeCategory2(item.pkId)"
|
||
:class="{ active: item.pkId == category2_id }"
|
||
v-for="(item, index) in category2" :key="index">
|
||
{{ item.classifyName }}
|
||
</view>
|
||
</view>
|
||
<view class="d-c-c pr20" v-if="cid == 101 || cid == 102 || cid == 201 || cid == 202"
|
||
@click.stop="openCPop('pkCountry')">
|
||
<image class="queryimg mr10" mode="heightFix" :src="
|
||
pkCountryIndex >= 0 && countryList[pkCountryIndex]
|
||
? countryList[pkCountryIndex].nationalFlag2
|
||
: ''
|
||
">
|
||
</image>
|
||
<u-icon name="arrow-down" size="28rpx" color="#999"></u-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<scroll-view scroll-y="true" class="scroll-Y scroll-3"
|
||
:style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
|
||
@scrolltolower="scrolltolowerFunc">
|
||
<view class="product-list">
|
||
<view class="product-item" v-for="(item, index) in listData" :key="index" @click.stop="
|
||
gotoPage(
|
||
'/pages/product/detail?pkCountry=' +
|
||
pkCountry +
|
||
'&cid=' +
|
||
cid +
|
||
'&' +
|
||
(cid != 21
|
||
? 'waresCode=' + item.waresCode
|
||
: 'pkId=' + item.pkId)
|
||
)
|
||
">
|
||
<view class="pr">
|
||
<!-- <view class="pop-stock-null">已售罄</view> -->
|
||
<image class="product-img" :src="item.cover1" mode=""></image>
|
||
</view>
|
||
|
||
<view class="product-info">
|
||
<view class="ww100">
|
||
<view class="f24 gray3 line-h-15 text-ellipsis mb10">{{ item.waresName }}
|
||
</view>
|
||
<view class="f22 gray9 line-h-15"
|
||
v-if="cid != 10 && cid != 13 && cid != 30">
|
||
{{ $t("ENU_TOTAL_V_1") }}：{{
|
||
formatNum(item.waresAchieve)
|
||
}}
|
||
</view>
|
||
<view class="f22 gray9 line-h-15" v-if="cid == 10">
|
||
{{ $t("w_0118") }}：{{ formatNum(item.deductMoney) }}
|
||
</view>
|
||
<view class="f22 gray9 line-h-15" v-if="cid == 13">
|
||
{{ $t("BV") }}：{{ formatNum(item.assAchieve) }}
|
||
</view>
|
||
<!-- <view class="f22 gray9 line-h-15">
|
||
{{ $t('fn_105') }}：{{item.inventoryNum*1>999?'999+':item.inventoryNum*1}}
|
||
</view> -->
|
||
</view>
|
||
<view class="ww100 d-b-c">
|
||
<view class="price-color f24 fb">
|
||
<view class="prices" v-if="
|
||
(cid == 101 ||
|
||
cid == 102 ||
|
||
cid == 201 ||
|
||
cid == 202) &&
|
||
userinfo.pkSettleCountry != pkCountry
|
||
">
|
||
{{ item.borderUnit }}{{ formatNum(item.borderPrice) }}
|
||
<text>({{ currencyIcon()
|
||
}}{{ formatNum(item.waresPrice) }})</text>
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}
|
||
<text class="f30">{{
|
||
formatNum(item.waresPrice)
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<image @click.stop="addProduct(item)" class="icon iconfont icon-cart"
|
||
src="/static/icon/cart-icon.png" mode=""></image>
|
||
<!-- <image class="icon iconfont icon-cart" src="/static/icon/share-icon.png" mode=""></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pop-icons">
|
||
<image @click="getCode" v-if="cid == 7" class="pop-icon" src="/static/icon/product/pop-share.png"
|
||
mode=""></image>
|
||
<!-- <image class="pop-icon" src="/static/icon/product/pop-service.png" mode=""></image> -->
|
||
<view class="pop-icon" v-if="!showPop">
|
||
<image @click="getShopping" src="/static/icon/product/pop-cart.png" mode=""></image>
|
||
<view v-if="sCount > 0" class="scount-pop">{{ sCount }}</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="showCart">
|
||
<view class="pop-cart">
|
||
<view class="d-e-c" style="padding: 0 24rpx"><u-icon name="close" size="32rpx" color="#999"
|
||
@click="showCart = false"></u-icon></view>
|
||
<view class="f32 gray3 d-c-c">{{ $t("N_I_194") }}</view>
|
||
<view class="cart-list">
|
||
<view class="cart-item" v-for="(item, index) in cartData" :key="index">
|
||
<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff"
|
||
size="26rpx"></u-icon></view>
|
||
<view class="order-product">
|
||
<view class="product-item">
|
||
<view class="d-b-s mb20">
|
||
<image class="product-img" :src="item.cover1" mode=""></image>
|
||
<view class="product-info d-c d-b-s flex-1">
|
||
<view class="text-ellipsis-2 f28 gray3">{{
|
||
item.waresName
|
||
}}</view>
|
||
<view class="price-color f24">
|
||
<view v-if="
|
||
(cid == 101 ||
|
||
cid == 102 ||
|
||
cid == 201 ||
|
||
cid == 202) &&
|
||
userinfo.pkSettleCountry != pkCountry
|
||
">
|
||
{{
|
||
item.productParams[0].waresItemsParamsList[0]
|
||
.borderUnit
|
||
}}
|
||
<text class="f32 fb">{{
|
||
formatNum(
|
||
item.productParams[0].waresItemsParamsList[0]
|
||
.borderPrice
|
||
)
|
||
}}</text>
|
||
({{ currencyIcon() }}
|
||
<text class="f32 fb">{{
|
||
formatNum(item.waresPrice)
|
||
}}</text>)
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}
|
||
<text class="f32 fb">{{
|
||
formatNum(item.waresPrice)
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="secend-product">
|
||
<template v-if="cid != 21">
|
||
<view class="d-b-s mb20" v-for="(pitem, pindex) in item.productParams"
|
||
:key="pindex">
|
||
<view class="d-s-c">
|
||
<image :src="pitem.waresItemsParamsList[0].specCover" mode=""
|
||
class="s-product-img"></image>
|
||
<view class="f28">
|
||
{{ pitem.productName }}
|
||
<text class="ml20">{{
|
||
pitem.waresItemsParamsList[0].specsName
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray9 ml20">
|
||
X{{ pitem.waresItemsParamsList[0].quantity }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="d-b-s mb20" v-for="(pitem, pindex) in item.waresSkuList"
|
||
:key="pindex">
|
||
<view class="d-s-c">
|
||
<view class="f28">{{ pitem.specValueNames }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="d-b-c mt20">
|
||
<view class="counter-box">
|
||
<view class="d-c-c counter-add"
|
||
@click="plusReduceShopping(item, 'reduce')">
|
||
<u-icon name="minus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
<view class="counter-num">{{ item.number }}</view>
|
||
<view class="d-c-c counter-add"
|
||
@click="plusReduceShopping(item, 'add')">
|
||
<u-icon name="plus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
</view>
|
||
<u-icon @click="deleteCart(item)" width="34rpx" height="36rpx"
|
||
name="/static/icon/product/cart-delete.png"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--底部按钮-->
|
||
<view class="bottom-btns d-e-c f28">
|
||
<view class="total d-s-c flex-1 mr20">
|
||
<view class="cart-img">
|
||
<image src="/static/icon/cart-cart.png" mode=""></image>
|
||
<!-- <view class="cart-num">10</view> -->
|
||
</view>
|
||
<view>
|
||
<view class="price f32">
|
||
<view v-if="
|
||
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
||
userinfo.pkSettleCountry != pkCountry
|
||
">
|
||
{{ borderUnits
|
||
}}<text class="num f38 fb">{{
|
||
formatNum(cartMoney1)
|
||
}}</text>
|
||
({{ currencyIcon()
|
||
}}<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>)
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}
|
||
<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray3" v-if="cid != 30">
|
||
{{ $t("ENU_TOTAL_V_1") }}:{{ formatNum(cartAchieve) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button :disabled="payClock()" type="primary" class="buy-btn theme-btn" @click="toPay">
|
||
{{ $t("w_0312") }}
|
||
</button>
|
||
</view>
|
||
<view class="pop-bg" @click.stop="showCart = false"></view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<u-popup :show="showTop" mode="top" @close="closeTop" round="25rpx">
|
||
<view class="zone" style="padding: 40rpx 20rpx">
|
||
<view class="f28 gray3">{{ getC2Name() }}</view>
|
||
<view class="category-right-top hftop h-at" style="padding-left: 0">
|
||
<view class="flex-1 lefttopbox fw">
|
||
<view class="category-right-top-item mt20" @click="changeCategory3(0)"
|
||
:class="{ active: category3_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
|
||
<view class="category-right-top-item mt20" @click="changeCategory3(item.pkId)"
|
||
:class="{ active: item.pkId == category3_id }" v-for="(item, index) in category3"
|
||
:key="index">
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 筛选 -->
|
||
<u-popup :show="isRight" mode="right" @close="closeRight()">
|
||
<view class="pop-content rightpop" style="padding-top: 0">
|
||
<view class="pop-title d-b-c">
|
||
<view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
|
||
<view class="f28 domation" @click="isRight = false">{{
|
||
$t("N_I_241")
|
||
}}</view>
|
||
</view>
|
||
<view class="right-item-title">{{ $t("w_0078") }}</view>
|
||
<view style="padding: 0 24rpx">
|
||
<view class="search-box">
|
||
<u-icon name="search" size="36rpx" color="#999"></u-icon>
|
||
<input v-model="form.waresName" class="search-input" type="text" value=""
|
||
:placeholder="$t('w_0253')" />
|
||
</view>
|
||
</view>
|
||
<view class="right-item-title">{{ $t("w_0254") }}</view>
|
||
<view class="d-c-c" style="padding-left: 20rpx">
|
||
<view class="search-box"><input v-model="form.startPrice" class="search-input" type="text" value=""
|
||
:placeholder="$t('w_0255')" /></view>
|
||
<view style="
|
||
width: 30rpx;
|
||
height: 1rpx;
|
||
background-color: #333;
|
||
margin: 0 24rpx;
|
||
"></view>
|
||
<view class="search-box"><input v-model="form.endPrice" class="search-input" type="text" value=""
|
||
:placeholder="$t('w_0256')" /></view>
|
||
</view>
|
||
<view class="pop-btns">
|
||
<view class="pop-left-btn" @click="resetSubmit()">{{
|
||
$t("w_0257")
|
||
}}</view>
|
||
<view class="pop-right-btn" @click="searchSubmit()">{{
|
||
$t("w_0035")
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<view v-if="isQuery" @touchmove.stop.prevent="moveHandle">
|
||
<view class="pop-up-bg" @click="isQuery = false"></view>
|
||
<view class="pop-up">
|
||
<view class="d-e-c p20">
|
||
<view class="blue f28" @click="closeQuery">{{
|
||
$t("MY_ORD_57")
|
||
}}</view>
|
||
</view>
|
||
<picker-view :indicator-style="'height: 80px;'" @change="changeQuery" class="picker-view">
|
||
<picker-view-column>
|
||
<view class="item d-c d-c-c" v-for="(item, index) in countryList" :key="index">
|
||
<image style="height: 50px" mode="heightFix" :src="item.nationalFlag2"></image>
|
||
<view class="f28 gray9 mt10">{{ item.name }}</view>
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
<Store v-if="isStore" :isPop="isStore" @close="closeStore"></Store>
|
||
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
|
||
@on-error="onErrorFunc" ref="Eposter"></Eposter>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Eposter from "@/components/evils-el-poster/Poster.vue";
|
||
import haifxnews from "@/static/bg/haifxnews.jpg";
|
||
import haifx from "@/static/bg/haifx.jpg";
|
||
import Store from "./popup/store.vue";
|
||
export default {
|
||
components: {
|
||
Eposter,
|
||
Store,
|
||
},
|
||
data() {
|
||
return {
|
||
haifx,
|
||
haifxnews,
|
||
list: [],
|
||
showTop: false,
|
||
showCart: false,
|
||
cid: 0,
|
||
showPop: false,
|
||
/*手机高度*/
|
||
phoneHeight: 0,
|
||
/*可滚动视图区域高度*/
|
||
scrollviewHigh: 0,
|
||
category1: [],
|
||
category2: [],
|
||
category3: [],
|
||
category1_id: 0,
|
||
category2_id: 0,
|
||
category3_id: 0,
|
||
isAll2: true,
|
||
isAll3: true,
|
||
listData: [],
|
||
cartData: [],
|
||
addLock: false,
|
||
qrcode: "",
|
||
downImg: "",
|
||
sCount: 0,
|
||
qdtype: 1,
|
||
pageNum: 1,
|
||
total: 0,
|
||
no_more: false,
|
||
priceSorting: 1,
|
||
salesSorting: 1,
|
||
comprehensive: 0,
|
||
newProduct: 0,
|
||
menu_id1: 0,
|
||
menu_id2: 0,
|
||
menu_id3: 0,
|
||
loading: false,
|
||
activeType: 1,
|
||
isRight: false,
|
||
borderPrice: "",
|
||
borderUnits: "",
|
||
form: {
|
||
waresName: "",
|
||
startPrice: "",
|
||
endPrice: "",
|
||
},
|
||
userinfo: {},
|
||
countryList: [],
|
||
pkCountry: "",
|
||
pkCountry1: "",
|
||
pkCountryIndex: 0,
|
||
queryValue: 0,
|
||
isQuery: false,
|
||
posterImg: "",
|
||
isStore: false,
|
||
storeProduct: null,
|
||
isInit: true,
|
||
nextText: "",
|
||
resaleIncomeBonus: "",
|
||
isMaxGrade: 1,
|
||
};
|
||
},
|
||
computed: {
|
||
cartMoney: function() {
|
||
let self = this;
|
||
let price = 0;
|
||
self.cartData.forEach((item) => {
|
||
price += item.waresPrice * 1 * item.number;
|
||
});
|
||
return price.toFixed(2);
|
||
},
|
||
cartMoney1: function() {
|
||
let self = this;
|
||
let price1 = 0;
|
||
self.cartData.forEach((item) => {
|
||
item.productParams.forEach((etem) => {
|
||
price1 += etem.waresItemsParamsList[0].borderPrice * 1 * item.number;
|
||
});
|
||
});
|
||
return price1.toFixed(2);
|
||
},
|
||
cartAchieve: function() {
|
||
let self = this;
|
||
let achieve = 0;
|
||
self.cartData.forEach((item) => {
|
||
achieve += item.achieve * 1 * item.number;
|
||
});
|
||
return achieve;
|
||
},
|
||
},
|
||
onLoad(e) {
|
||
this.pkCountry1 = uni.getStorageSync("currencyIcon");
|
||
this.cid = e.cid;
|
||
let title = this.$t("ENU_TRADE_T_121");
|
||
switch (e.cid * 1) {
|
||
case -1:
|
||
title = this.$t("ENU_MENU_303");
|
||
break;
|
||
case 0:
|
||
title = this.$t("ENU_TRADE_T_121");
|
||
break;
|
||
case 1:
|
||
title = this.$t("ENU_MENU_311");
|
||
break;
|
||
case 2:
|
||
title = this.$t("ENU_MENU_321");
|
||
break;
|
||
case 3:
|
||
title = this.$t("ENU_TRADE_T_121");
|
||
break;
|
||
case 7:
|
||
title = this.$t("N_I_2");
|
||
break;
|
||
case 10:
|
||
title = this.$t("ENU_MENU_360");
|
||
break;
|
||
case 11:
|
||
title = this.$t("ENU_MENU_350");
|
||
break;
|
||
case 12:
|
||
title = this.$t("ENU_MENU_333");
|
||
break;
|
||
case 13:
|
||
title = this.$t("ENU_MENU_340");
|
||
break;
|
||
case 14:
|
||
title = this.$t("ENU_MENU_334");
|
||
break;
|
||
case 18:
|
||
title = this.$t("ENU_SPECIAL_A_18");
|
||
break;
|
||
case 19:
|
||
title = this.$t("ENU_SPECIAL_A_19");
|
||
break;
|
||
case 21:
|
||
title = this.$t("N_I_4");
|
||
break;
|
||
case 22:
|
||
title = this.$t("ENU_SPECIAL_A_22");
|
||
break;
|
||
case 23:
|
||
title = this.$t("ENU_SPECIAL_A_8");
|
||
break;
|
||
case 24:
|
||
// title = '乐学易考';
|
||
title = this.$t("ENU_MENU_312");
|
||
break;
|
||
case 25:
|
||
// title = '乐学易考';
|
||
title = this.$t("ENU_MENU_322");
|
||
break;
|
||
case 26:
|
||
// title = '乐学易考';
|
||
title = this.$t("ENU_MENU_335");
|
||
break;
|
||
case 27:
|
||
// title = '海粉升级';
|
||
title = this.$t("ENU_ORDER_T_27");
|
||
break;
|
||
case 101:
|
||
title = this.$t("fn_004");
|
||
break;
|
||
case 102:
|
||
title = this.$t("fn_005");
|
||
break;
|
||
case 201:
|
||
title = this.$t("fn_007");
|
||
break;
|
||
case 202:
|
||
title = this.$t("fn_008");
|
||
break;
|
||
case 30:
|
||
title = this.$t("fn_009");
|
||
|
||
break;
|
||
case 33:
|
||
title = this.$t("APP_ADD_27");
|
||
break;
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: title,
|
||
});
|
||
},
|
||
onShow() {
|
||
if (this.cid == 201) {
|
||
this.getNextLevelPv();
|
||
}
|
||
if (this.cid == 30) {
|
||
this.getMemberAnnuity();
|
||
}
|
||
this.getShoppingCount();
|
||
this.borderUnits = uni.getStorageSync("borderUnit");
|
||
console.log(this.borderUnits, "borderUnits");
|
||
},
|
||
mounted() {
|
||
this.getInfo();
|
||
|
||
if (this.cid == -1) {
|
||
this.getCode();
|
||
} else {
|
||
this.getCategory1();
|
||
}
|
||
},
|
||
methods: {
|
||
getMemberAnnuity() {
|
||
let self = this;
|
||
self._get("/member/api/member/get-member-annuity-time", {}, (res) => {
|
||
self.resaleIncomeBonus = res.data.resaleIncomeBonus;
|
||
});
|
||
},
|
||
getNextLevelPv() {
|
||
let self = this;
|
||
self._get("/member/api/member/next-level-pv", {}, (res) => {
|
||
self.nextText = res.data.gradeValue;
|
||
self.isMaxGrade = res.data.isMaxGrade;
|
||
});
|
||
},
|
||
payClock() {
|
||
let self = this;
|
||
if (self.cartData && self.cartData.length > 0) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
closeStore(e) {
|
||
let self = this;
|
||
if (e) {
|
||
let params = {};
|
||
let product = self.storeProduct;
|
||
if (self.cid != 21) {
|
||
params = {
|
||
number: 1,
|
||
pkCountry: self.userinfo.pkCountry,
|
||
pkId: product.pkId,
|
||
productGroup: product.productGroup,
|
||
specialArea: self.cid * 1,
|
||
waresCode: product.waresCode,
|
||
pkCountry: self.pkCountry,
|
||
pkMakerSpace: e,
|
||
};
|
||
} else {
|
||
params = {
|
||
number: 1, //数量
|
||
pkId: product.pkId,
|
||
productGroup: product.productGroup,
|
||
source: 2,
|
||
//所属专区
|
||
specialArea: 21,
|
||
pkMakerSpace: e,
|
||
};
|
||
}
|
||
self._post("sale/api/shopping/addShopping", params, (res) => {
|
||
self.getShoppingCount();
|
||
uni.showToast({
|
||
title: self.$t("fn_056"),
|
||
icon: "none",
|
||
});
|
||
});
|
||
}
|
||
this.storeProduct = null;
|
||
this.isStore = false;
|
||
},
|
||
getCountry() {
|
||
let self = this;
|
||
self._get("system/api/country/list", {}, (res) => {
|
||
self.countryList = res.data;
|
||
self.pkCountryIndex = 0;
|
||
self.countryList.forEach((item, index) => {
|
||
if (item.pkId == self.pkCountry) {
|
||
self.pkCountryIndex = index;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
openCPop() {
|
||
this.isQuery = true;
|
||
},
|
||
getInfo() {
|
||
let self = this;
|
||
self._get("member/api/member/get-info", {}, (res) => {
|
||
self.userinfo = res.data;
|
||
self.pkCountry = res.data.pkCountry;
|
||
self.getCountry();
|
||
});
|
||
},
|
||
resetSubmit: function() {
|
||
this.form.waresName = "";
|
||
this.form.startPrice = "";
|
||
this.form.endPrice = "";
|
||
this.searchSubmit();
|
||
},
|
||
searchSubmit: function() {
|
||
this.isRight = false;
|
||
/*获取数据*/
|
||
this.listData = [];
|
||
this.pageNum = 1;
|
||
this.getData();
|
||
},
|
||
closeRight() {
|
||
this.isRight = false;
|
||
},
|
||
changeType(e) {
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
if (e == 2 && this.activeType == e) {
|
||
if (this.priceSorting == 1) {
|
||
this.priceSorting = 2;
|
||
} else {
|
||
this.priceSorting = 1;
|
||
}
|
||
}
|
||
if (e == 3 && this.activeType == e) {
|
||
if (this.salesSorting == 1) {
|
||
this.salesSorting = 2;
|
||
} else {
|
||
this.salesSorting = 1;
|
||
}
|
||
}
|
||
this.activeType = e;
|
||
this.listData = [];
|
||
this.pageNum = 1;
|
||
this.getData();
|
||
},
|
||
getC2Name() {
|
||
let list = this.category2;
|
||
let id = this.category2_id;
|
||
let name = "";
|
||
if (id == 0) {
|
||
return this.$t("ENU_GIFT_T_1");
|
||
} else {
|
||
list.forEach((item, index) => {
|
||
if (item.pkId == id) {
|
||
name = item.title;
|
||
}
|
||
});
|
||
return name;
|
||
}
|
||
},
|
||
closeTop() {
|
||
this.showTop = false;
|
||
},
|
||
openTop() {
|
||
this.showTop = true;
|
||
},
|
||
scrolltolowerFunc() {
|
||
let self = this;
|
||
if (self.cid != 21) {
|
||
return;
|
||
}
|
||
if (self.pageNum * 50 < self.total) {
|
||
self.pageNum++;
|
||
self.getData();
|
||
}
|
||
self.no_more = true;
|
||
},
|
||
changeRegistType(e) {
|
||
this.qdtype = e;
|
||
},
|
||
getShoppingCount() {
|
||
let self = this;
|
||
self._get(
|
||
"sale/api/shopping/getShoppingCount", {
|
||
specialArea: self.cid,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
self.sCount = res.data.smallCount;
|
||
}
|
||
);
|
||
},
|
||
downImage(elClass) {
|
||
this.$refs.Eposter.createForElRect(elClass, false);
|
||
},
|
||
startDownload(img) {
|
||
let self = this;
|
||
let title = self.$t("S_C_63");
|
||
uni.showLoading({
|
||
title: title,
|
||
});
|
||
self.downImg = "";
|
||
let n = 0;
|
||
uni.downloadFile({
|
||
//获得的临时地址
|
||
url: img,
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
self.downImg = res.tempFilePath;
|
||
self.posterImg = res.tempFilePath;
|
||
uni.hideLoading();
|
||
self.downloadImg();
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t("w_0034"),
|
||
content: self.$t("MY_ORD_64"),
|
||
showCancel: false,
|
||
});
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t("w_0034"),
|
||
content: self.$t("MY_ORD_64"),
|
||
showCancel: false,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
|
||
downloadImg() {
|
||
let self = this;
|
||
let n = 0;
|
||
uni.showLoading({
|
||
title: self.$t("w_0413"),
|
||
});
|
||
self.downImg = [this.posterImg];
|
||
self.downImg.forEach((item, index) => {
|
||
console.log(item);
|
||
// 图片保存到本地
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: item,
|
||
success(data) {
|
||
n++;
|
||
if (n == self.downImg.length) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: self.$t("w_0311"),
|
||
duration: 2000,
|
||
});
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
|
||
uni.showToast({
|
||
title: self.$t("w_0412"),
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.openSetting();
|
||
}, 1000);
|
||
}
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: self.$t("w_0414"),
|
||
});
|
||
return;
|
||
},
|
||
complete(res) {
|
||
console.log("complete");
|
||
},
|
||
});
|
||
});
|
||
},
|
||
getCode() {
|
||
let self = this;
|
||
let url = "member/api/share/fans-code";
|
||
if (self.cid == -1) {
|
||
url = "member/api/share/share-code-h5";
|
||
}
|
||
self._get(url, {}, (res) => {
|
||
if (self.cid == -1) {
|
||
self.qrcode = res.data.dataUrl;
|
||
} else {
|
||
self.qrcode = res.data;
|
||
}
|
||
self.showPop = true;
|
||
});
|
||
},
|
||
deleteCart(e) {
|
||
let self = this;
|
||
if (self.addLock) {
|
||
return;
|
||
}
|
||
self.addLock = true;
|
||
self._post(
|
||
"sale/api/shopping/batchDelShopping", {
|
||
deleteList: [{
|
||
shoppingId: e.shoppingId,
|
||
}, ],
|
||
},
|
||
(res) => {
|
||
uni.showToast({
|
||
title: self.$t("fn_056"),
|
||
icon: "none",
|
||
success() {
|
||
self.getShopping();
|
||
},
|
||
});
|
||
},
|
||
false,
|
||
() => {
|
||
self.addLock = false;
|
||
}
|
||
);
|
||
},
|
||
plusReduceShopping(e, type) {
|
||
let self = this;
|
||
if (self.addLock) {
|
||
return;
|
||
}
|
||
self.addLock = true;
|
||
let num = e.number;
|
||
if (type == "add") {
|
||
num++;
|
||
}
|
||
if (type == "reduce") {
|
||
num--;
|
||
if (num <= 0) {
|
||
num = 1;
|
||
}
|
||
}
|
||
self._post(
|
||
"sale/api/shopping/plusReduceShopping", {
|
||
number: num,
|
||
shoppingId: e.shoppingId,
|
||
specialArea: self.cid,
|
||
},
|
||
(res) => {
|
||
uni.showToast({
|
||
title: self.$t("fn_056"),
|
||
icon: "none",
|
||
success() {
|
||
self.getShopping();
|
||
},
|
||
});
|
||
},
|
||
false,
|
||
() => {
|
||
self.addLock = false;
|
||
}
|
||
);
|
||
},
|
||
addProduct(e) {
|
||
let self = this;
|
||
let params = {};
|
||
if (e.isMakerGift == 2) {
|
||
this.storeProduct = e;
|
||
this.isStore = true;
|
||
return;
|
||
}
|
||
if (self.cid != 21) {
|
||
params = {
|
||
number: 1,
|
||
pkCountry: self.userinfo.pkCountry,
|
||
pkId: e.pkId,
|
||
productGroup: e.productGroup,
|
||
specialArea: self.cid * 1,
|
||
waresCode: e.waresCode,
|
||
pkCountry: self.pkCountry,
|
||
};
|
||
} else {
|
||
params = {
|
||
number: 1, //数量
|
||
pkId: e.pkId,
|
||
productGroup: e.productGroup,
|
||
source: 2,
|
||
specialArea: 21, //所属专区
|
||
};
|
||
}
|
||
self._post("sale/api/shopping/addShopping", params, (res) => {
|
||
self.getShoppingCount();
|
||
uni.showToast({
|
||
title: self.$t("fn_056"),
|
||
icon: "none",
|
||
});
|
||
});
|
||
},
|
||
getShopping() {
|
||
let self = this;
|
||
self._get(
|
||
"sale/api/shopping/getShopping", {
|
||
specialArea: self.cid,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
if (res.data != "") {
|
||
self.cartData = res.data[0].shoppingCartList;
|
||
} else {
|
||
self.cartData = [];
|
||
}
|
||
self.showCart = true;
|
||
}
|
||
);
|
||
self.getShoppingCount();
|
||
},
|
||
getCategory3() {
|
||
let self = this;
|
||
if (self.cid == 21) {
|
||
let ids = [];
|
||
console.log("---");
|
||
console.log(self.menu_id2);
|
||
console.log(self.category2);
|
||
if (self.menu_id2 == 0) {
|
||
self.category2.forEach((item) => {
|
||
ids.push(item.pkId);
|
||
});
|
||
} else {
|
||
ids = [self.menu_id2];
|
||
}
|
||
console.log(ids);
|
||
self._post(
|
||
"sale/api/twares-category-category/option-list", {
|
||
parentIds: ids,
|
||
},
|
||
(res) => {
|
||
self.category3 = res.data;
|
||
// self.category3_id = self.category3[0] ? self.category3[0].pkId : '';
|
||
self.menu_id3 = self.category3[0] ? self.category3[0].pkId : 0;
|
||
self.getData();
|
||
}
|
||
);
|
||
} else {
|
||
self._get(
|
||
"sale/api/area-classify/list", {
|
||
specialArea: self.cid,
|
||
pkParent: "",
|
||
hierarchy: 1,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
self.category2 = res.data;
|
||
self.getData();
|
||
}
|
||
);
|
||
}
|
||
},
|
||
getCategory2() {
|
||
let self = this;
|
||
console.log(2222);
|
||
if (self.cid == 21) {
|
||
self._post(
|
||
"sale/api/twares-category-category/option-list", {
|
||
parentIds: [self.menu_id1],
|
||
},
|
||
(res) => {
|
||
self.category2 = res.data;
|
||
// self.category2_id = self.category2[0] ? self.category2[0].pkId : '';
|
||
self.category2_id = 0;
|
||
self.menu_id2 = 0;
|
||
self.getCategory3();
|
||
}
|
||
);
|
||
} else {
|
||
self._get(
|
||
"sale/api/area-classify/list", {
|
||
specialArea: self.cid,
|
||
pkParent: "",
|
||
hierarchy: 1,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
self.category2 = res.data;
|
||
self.getData();
|
||
}
|
||
);
|
||
}
|
||
},
|
||
getCategory1() {
|
||
let self = this;
|
||
console.log(1111);
|
||
self.pageNum = 1;
|
||
if (self.cid == 21) {
|
||
self._post(
|
||
"sale/api/twares-category-category/option-list", {
|
||
parentIds: [0],
|
||
},
|
||
(res) => {
|
||
self.category1 = res.data;
|
||
self.category1_id = self.category1[0] ? self.category1[0].pkId : 0;
|
||
self.menu_id1 = self.category1[0] ? self.category1[0].pkId : 0;
|
||
self.getCategory2();
|
||
}
|
||
);
|
||
} else {
|
||
self._get(
|
||
"sale/api/area-classify/list", {
|
||
specialArea: self.cid,
|
||
hierarchy: 0,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
self.category1 = res.data;
|
||
self.getCategory2();
|
||
}
|
||
);
|
||
}
|
||
},
|
||
changeCategory1(id) {
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
this.menu_id1 = id;
|
||
this.menu_id2 = 0;
|
||
this.menu_id3 = 0;
|
||
this.category1_id = id;
|
||
this.category2_id = 0;
|
||
this.category3_id = 0;
|
||
this.listData = [];
|
||
this.pageNum = 1;
|
||
if (this.cid == 21) {
|
||
this.getCategory2();
|
||
} else {
|
||
this.getData();
|
||
}
|
||
},
|
||
changeCategory2(id) {
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
this.menu_id2 = id;
|
||
this.menu_id3 = 0;
|
||
this.category2_id = id;
|
||
this.category3_id = 0;
|
||
this.listData = [];
|
||
this.pageNum = 1;
|
||
if (this.cid == 21) {
|
||
this.getCategory3();
|
||
} else {
|
||
this.getData();
|
||
}
|
||
},
|
||
changeCategory3(id) {
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
this.menu_id3 = id;
|
||
this.category3_id = id;
|
||
this.listData = [];
|
||
this.pageNum = 1;
|
||
this.getData();
|
||
},
|
||
getData() {
|
||
let self = this;
|
||
let id = "";
|
||
if (self.cid == 21) {
|
||
if (self.category2_id) {
|
||
id = self.category2_id;
|
||
} else {
|
||
id = self.category1_id || 0;
|
||
}
|
||
self._get(
|
||
"sale/api/wares/sharing-zone-wares", {
|
||
pageNum: self.pageNum,
|
||
pkCategoryOne: self.category1_id || "",
|
||
pkCategoryTwo: self.category2_id || "",
|
||
pkCategoryThree: self.category3_id || "",
|
||
priceSorting: self.priceSorting,
|
||
salesSorting: self.salesSorting,
|
||
waresName: self.form.waresName,
|
||
startPrice: self.form.startPrice,
|
||
endPrice: self.form.endPrice,
|
||
pageSize: 50,
|
||
},
|
||
(res) => {
|
||
self.listData = [...self.listData, ...res.rows];
|
||
self.total = res.total;
|
||
if (self.total < self.pageNum * 50) {
|
||
self.no_more = true;
|
||
}
|
||
self.loading = false;
|
||
},
|
||
(err) => {
|
||
self.loading = false;
|
||
}
|
||
);
|
||
} else {
|
||
if (self.category2_id) {
|
||
id = self.category2_id;
|
||
} else {
|
||
id = self.category1_id || "";
|
||
}
|
||
self._post(
|
||
"sale/api/wares/query-spe-wares", {
|
||
pkAreaClassify: id,
|
||
specialArea: self.cid,
|
||
pkCountry: self.pkCountry,
|
||
},
|
||
(res) => {
|
||
self.loading = false;
|
||
self.listData = res.data;
|
||
uni.setStorageSync("borderUnit", self.listData[0].borderUnit);
|
||
},
|
||
(err) => {
|
||
self.loading = false;
|
||
}
|
||
);
|
||
}
|
||
if (self.isInit) {
|
||
self.init();
|
||
}
|
||
},
|
||
/*初始化*/
|
||
init() {
|
||
let self = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
self.phoneHeight = res.windowHeight;
|
||
// 计算组件的高度
|
||
let view = uni.createSelectorQuery().select(".category-right-top");
|
||
if (self.cid == 21) {
|
||
view = uni.createSelectorQuery().select(".category-right-top21");
|
||
}
|
||
view
|
||
.boundingClientRect((data) => {
|
||
let h = self.phoneHeight - data.height;
|
||
self.scrollviewHigh = h;
|
||
})
|
||
.exec();
|
||
self.isInit = false;
|
||
},
|
||
});
|
||
},
|
||
checkresorder(deleteList, callback) {
|
||
let self = this;
|
||
let params = {
|
||
specialArea: self.cid,
|
||
deleteList: deleteList,
|
||
};
|
||
callback();
|
||
// self._post("/sale/api/order/valid-enough-shop", params, (res) => {
|
||
// if (res.code != 500) {
|
||
// callback();
|
||
// }
|
||
// });
|
||
},
|
||
toPay() {
|
||
let self = this;
|
||
let arr = [];
|
||
|
||
self.cartData.forEach((item) => {
|
||
arr.push(item.shoppingId);
|
||
});
|
||
let callback = function() {
|
||
self.showCart = false;
|
||
uni.setStorageSync("cartinfo", arr);
|
||
let id = self.cid;
|
||
if (
|
||
self.cid == 101 ||
|
||
self.cid == 102 ||
|
||
self.cid == 201 ||
|
||
self.cid == 202
|
||
) {
|
||
id = self.cid + "&userCountry=" + self.pkCountry;
|
||
}
|
||
self.gotoPage("/pages/prefecture/confirm-order?specialArea=" + id);
|
||
};
|
||
if (self.cid == 101 || self.cid == 102 || self.cid == 2) {
|
||
let deleteList = [];
|
||
self.cartData.forEach((item) => {
|
||
deleteList.push({
|
||
shoppingId: item.shoppingId,
|
||
});
|
||
});
|
||
self.checkresorder(deleteList, callback);
|
||
return;
|
||
}
|
||
if (self.cid == 21) {
|
||
arr = [];
|
||
let arr2 = [];
|
||
self.cartData.forEach((item) => {
|
||
arr.push({
|
||
pkTWares: item.waresSkuList[0].pkTWares,
|
||
pkTWaresSku: item.waresSkuList[0].pkThWaresSku,
|
||
quantity: item.number,
|
||
source: 2,
|
||
shoppingId: item.shoppingId,
|
||
});
|
||
});
|
||
}
|
||
callback();
|
||
},
|
||
changeQuery(e) {
|
||
this.queryValue = e.detail.value[0];
|
||
},
|
||
closeQuery() {
|
||
this.pkCountryIndex = this.queryValue;
|
||
this.pkCountry = this.countryList[this.pkCountryIndex].pkId;
|
||
this.isQuery = false;
|
||
this.getCategory1();
|
||
},
|
||
moveHandle() {
|
||
return false;
|
||
},
|
||
saveImage(e) {},
|
||
onSuccess(val) {
|
||
this.posterImg = val;
|
||
this.downloadImg(this.posterImg);
|
||
},
|
||
onErrorFunc(err) {
|
||
console.log(`err`, err);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.prices {
|
||
display: flex;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.zone {
|
||
.category-left {
|
||
height: 100vh;
|
||
padding-bottom: 100rpx;
|
||
width: 198rpx;
|
||
background-color: #f2f2f2;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.hf-leftmenu {
|
||
.category-left-item {}
|
||
|
||
.category-left-item.active {
|
||
background: #ee252a;
|
||
color: #fff;
|
||
}
|
||
|
||
.category-left-item.active::after {
|
||
display: none;
|
||
}
|
||
|
||
.left-item-child {
|
||
background: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 15rpx 0;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
colo: #666;
|
||
display: inline-block;
|
||
padding: 15rpx 26rpx;
|
||
border-radius: 200rpx;
|
||
background: #fff;
|
||
width: 142rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.left-item-child.active {
|
||
text {
|
||
background: #ee252a;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-left-item {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
width: 198rpx;
|
||
padding: 36rpx 25rpx;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
}
|
||
|
||
.category-left-item.active {
|
||
position: relative;
|
||
color: #fb3024;
|
||
}
|
||
|
||
.category-left-item.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
margin: auto;
|
||
width: 6rpx;
|
||
height: 22rpx;
|
||
background: #fb3024;
|
||
}
|
||
|
||
.category-right-top {
|
||
height: 86rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
overflow-x: auto;
|
||
padding-left: 22rpx;
|
||
}
|
||
|
||
.category-right-top.hftop {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.category-right-top.hftop.h-at {
|
||
height: auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.category-right-top.hftop .lefttopbox {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.category-right-top.hftop .lefttopbox.fw {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.category-right-top-item {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
line-height: 86rpx;
|
||
}
|
||
|
||
.category-right-top-item.active {
|
||
color: #fb3024;
|
||
}
|
||
|
||
.category-right-top-item.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 2rpx;
|
||
width: 40%;
|
||
height: 6rpx;
|
||
margin: auto;
|
||
background: #fb3024;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.lefttopbox .category-right-top-item {
|
||
padding: 0 20rpx;
|
||
height: 58rpx;
|
||
background: #f6f6f6;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
border-radius: 58rpx;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.lefttopbox .category-right-top-item.active {
|
||
background: #fb3024;
|
||
color: #fff;
|
||
}
|
||
|
||
.lefttopbox .category-right-top-item.active::after {
|
||
display: none;
|
||
}
|
||
|
||
.right-box {
|
||
overflow: hidden;
|
||
background-color: #ffffff;
|
||
height: 100vh;
|
||
flex: 1;
|
||
|
||
.product-list {
|
||
width: 100%;
|
||
padding: 0 21rpx 100rpx 19rpx;
|
||
box-sizing: border-box;
|
||
|
||
.product-item {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 20rpx 0 16rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.product-img {
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.pop-stock-null {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: rgba(0, 0, 0, 0.55);
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
z-index: 2;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
height: 152rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
|
||
.icon-cart {
|
||
flex-shrink: 0;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border-radius: 50%;
|
||
box-shadow: 0rpx 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pop-bg {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
z-index: 99;
|
||
}
|
||
|
||
.share-pop {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background-color: #fff;
|
||
width: 665rpx;
|
||
height: 704rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
z-index: 100;
|
||
padding: 32rpx 20rpx 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.share-box {
|
||
width: 586rpx;
|
||
height: 522rpx;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
margin-bottom: 68rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.share-code {
|
||
width: 586rpx;
|
||
height: 522rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.share-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.share-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
position: absolute;
|
||
left: 202rpx;
|
||
bottom: 44rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.share-codeimg {
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
bottom: 35%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.share-codeimg.Poster2 {
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
bottom: 220rpx;
|
||
}
|
||
|
||
.share-text.Poster2 {
|
||
font-size: 32rpx;
|
||
bottom: 170rpx;
|
||
}
|
||
|
||
.btnShare.Poster3 {
|
||
bottom: 40rpx;
|
||
}
|
||
|
||
.share-text {
|
||
// width: 320rpx;
|
||
// height: 320rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
bottom: 29%;
|
||
z-index: 2;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.domation-btn {
|
||
width: 264rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
font-size: 30rpx;
|
||
line-height: 1;
|
||
overflow: hidden;
|
||
background: #fb3024;
|
||
color: #fff;
|
||
margin-right: 25rpx;
|
||
}
|
||
|
||
.btnShare {
|
||
width: 270rpx;
|
||
height: 89rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
bottom: 20%;
|
||
z-index: 1014;
|
||
}
|
||
|
||
@keyframes scale {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* 添加动画 */
|
||
.btnShare {
|
||
animation: scale 1s infinite;
|
||
}
|
||
|
||
.defaul-btn {
|
||
width: 264rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
font-size: 30rpx;
|
||
line-height: 1;
|
||
overflow: hidden;
|
||
background: #cccccc;
|
||
color: #fff;
|
||
}
|
||
|
||
.pop-icons {
|
||
position: fixed;
|
||
right: 10rpx;
|
||
bottom: 42rpx;
|
||
z-index: 90;
|
||
}
|
||
|
||
.pop-icon {
|
||
position: relative;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
margin-top: 20rpx;
|
||
box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.45);
|
||
|
||
image {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.pop-cart {
|
||
position: fixed;
|
||
bottom: 96rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 101;
|
||
background-color: #fff;
|
||
padding: 0 0;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
border-radius: 25rpx 25rpx 0 0;
|
||
min-height: 200rpx;
|
||
}
|
||
|
||
.bottom-btns {
|
||
position: fixed;
|
||
width: 100%;
|
||
padding: 0 24rpx 0 27rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 96rpx;
|
||
// /* bottom: calc(var(--window-bottom); */
|
||
bottom: 0;
|
||
left: 0;
|
||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
background: #ffffff;
|
||
z-index: 101;
|
||
}
|
||
|
||
.bottom-btns .buy-btn {
|
||
margin: 0;
|
||
padding: 0 24rpx;
|
||
height: 67rpx;
|
||
line-height: 67rpx;
|
||
border-radius: 38rpx;
|
||
// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
|
||
font-size: 28rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-btns .price {
|
||
color: $dominant-color;
|
||
}
|
||
|
||
.pop-bg {
|
||
position: fixed;
|
||
z-index: 99;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.counter-box {
|
||
width: 168rpx;
|
||
height: 50rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #eeeeee;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.counter-num {
|
||
height: 50rpx;
|
||
min-width: 56rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
border-left: 1rpx solid #eeeeee;
|
||
border-right: 1rpx solid #eeeeee;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.counter-add {
|
||
height: 50rpx;
|
||
width: 56rpx;
|
||
flex-shrink: 0;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cart-list {
|
||
padding: 0 24rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
/*高宽分别对应横竖滚动条的尺寸*/
|
||
display: block;
|
||
width: 5rpx !important;
|
||
height: 1rpx !important;
|
||
-webkit-appearance: default-button;
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px;
|
||
background-color: #909399;
|
||
// background-image: -webkit-linear-gradient(45deg,
|
||
// rgba(255, 255, 255, 0.2) 25%,
|
||
// transparent 25%,
|
||
// transparent 50%,
|
||
// rgba(255, 255, 255, 0.2) 50%,
|
||
// rgba(255, 255, 255, 0.2) 75%,
|
||
// transparent 75%,
|
||
// transparent);
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
background: #ededed;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.cart-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: relative;
|
||
margin-right: 18rpx;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.cart-num {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: #fb3024;
|
||
box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
|
||
border-radius: 50%;
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -14rpx;
|
||
}
|
||
|
||
.scount-pop {
|
||
background: #fb3024;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.form-top-nav {
|
||
height: 94rpx;
|
||
background: #fb3024;
|
||
}
|
||
|
||
.form-top-nav-item {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
line-height: 1.5;
|
||
word-break: break-all;
|
||
flex: 1;
|
||
padding: 0 20rpx;
|
||
flex-shrink: 0;
|
||
height: 94rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.form-top-nav-item.active::before {
|
||
content: "";
|
||
width: 52rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 12rpx;
|
||
margin: auto;
|
||
height: 6rpx;
|
||
background: #ffffff;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.open-top-btn {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
background: #f6f6f6;
|
||
border-radius: 29rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.activeColor {
|
||
color: #e03030;
|
||
}
|
||
|
||
.search-box {
|
||
flex: 1;
|
||
height: 65rpx;
|
||
background: #f5f6f8;
|
||
border-radius: 33rpx;
|
||
padding: 0 52rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.search-input {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-left: 14rpx;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.queryimg {
|
||
height: 40rpx;
|
||
flex-shrink: 0;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.pop-up-bg {
|
||
position: fixed;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
z-index: 99;
|
||
}
|
||
|
||
.pop-up {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 60vh;
|
||
background-color: #ffffff;
|
||
z-index: 100;
|
||
}
|
||
|
||
.picker-view {
|
||
width: 750rpx;
|
||
height: 600rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 80px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon.iconfont.icon-shaixuan {
|
||
background-color: #fb3024;
|
||
padding: 20rpx 40rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
button[disabled][type="primary"] {
|
||
background-color: rgba(#fb3024, 0.6);
|
||
}
|
||
|
||
.pop-tips {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 84rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 0 25rpx;
|
||
line-height: 1.5;
|
||
background: #fb4633;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
box-sizing: border-box;
|
||
z-index: 20;
|
||
}
|
||
</style> |