962 lines
24 KiB
Vue
962 lines
24 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: kBank
|
|
* @Date: 2022-11-21 15:11:22
|
|
-->
|
|
<template>
|
|
<view class="content">
|
|
<view class="context">
|
|
<view
|
|
class="kuang"
|
|
v-for="(item, index) in shopCarList"
|
|
:key="item.specialArea"
|
|
>
|
|
<view
|
|
v-for="(ctem, cndex) in item.shoppingCartList"
|
|
:key="cndex"
|
|
class="goodList"
|
|
>
|
|
<!-- <u-checkbox activeColor="red"
|
|
:name="ctem.shoppingId"></u-checkbox> -->
|
|
<view class="goodList_i">
|
|
<view class="goodList_it">
|
|
<img :src="ctem.cover1" class="cover" alt="" />
|
|
<view class="goodList_ir">
|
|
<view class="tit1">
|
|
{{ ctem.waresName }}
|
|
</view>
|
|
<view class="goodList_ib">
|
|
<view class="tit2">
|
|
{{ ctem.waresPrice | numberToCurrency | isLocal }}
|
|
</view>
|
|
<view class="tit3"
|
|
>业绩: {{ ctem.achieve | numberToCurrency | isLocal }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-for="(stem, sndex) in ctem.productParams"
|
|
:key="sndex"
|
|
class="product_i"
|
|
>
|
|
<img :src="stem.cover" alt="" />
|
|
<view class="product_il">
|
|
<view class="tit4"
|
|
>{{ stem.productName
|
|
}}{{
|
|
(stem.waresItemsParamsList.length > 0 &&
|
|
stem.waresItemsParamsList[0].specsName) ||
|
|
''
|
|
}}</view
|
|
>
|
|
<!-- <view class="tit4"></view> -->
|
|
<view class="tit5"
|
|
>x{{
|
|
(stem.waresItemsParamsList.length > 0 &&
|
|
stem.waresItemsParamsList[0].quantity) ||
|
|
''
|
|
}}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="goodsSet">
|
|
<u-number-box
|
|
:min="1"
|
|
@change="changeCar($event, item, ctem)"
|
|
v-model="ctem.number"
|
|
></u-number-box>
|
|
<u-icon
|
|
name="trash"
|
|
@tap="delOne(ctem)"
|
|
size="26"
|
|
color="#BFBFBF"
|
|
></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- </u-checkbox-group> -->
|
|
</view>
|
|
</view>
|
|
<view class="kong_t" v-show="cartEmpty">
|
|
<img class="kong" src="@/static/images/kong.png" alt=""
|
|
/></view>
|
|
<view class="zhan"></view>
|
|
<!-- 底部 -->
|
|
<view class="footer_f">
|
|
<view class="footer">
|
|
<view class="footer_l">
|
|
<view class="footer_ll">
|
|
<u-icon size="36" name="shopping-cart"> </u-icon>
|
|
<view class="footer_lr">
|
|
<view class="r1">{{
|
|
totalPrice | numberToCurrency | isLocal
|
|
}}</view>
|
|
<view class="l1">业绩:{{ totalAchive | numberToCurrency }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer_r">
|
|
<u-button
|
|
type="success"
|
|
class="uBtn"
|
|
shape="circle"
|
|
:loading="isLoading"
|
|
:loadingText="'购买中'"
|
|
@tap="goBuy"
|
|
:disabled="submitDisabled"
|
|
color="#005BAC"
|
|
>{{ '去结算' }}
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pp">
|
|
<u-popup
|
|
:show="dialogVisible2"
|
|
:closeable="true"
|
|
:closeOnClickOverlay="false"
|
|
mode="center"
|
|
@close="dialogVisible2 = false"
|
|
>
|
|
<view class="popList">
|
|
<u-checkbox-group
|
|
v-model="allTable"
|
|
placement="column"
|
|
@change="handleSelectionChange"
|
|
>
|
|
<view class="popList_i" v-for="item in tableData" :key="item.pkId">
|
|
<u-checkbox :name="item.pkId"> </u-checkbox>
|
|
<view class="popList_ii">
|
|
<img :src="item.cover || item.cover1" alt="" />
|
|
<view>
|
|
<view>{{ item.waresName }}</view>
|
|
<view>{{ item.waresCode }}</view>
|
|
<view>{{ item.waresPrice }}</view>
|
|
<!-- <view>{{ item.quantity }}</view> -->
|
|
<u-number-box v-model="item.quantity" :min="1"></u-number-box>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
<view class="popBtm">
|
|
<view>合计:{{ total | toThousandthAndKeepDecimal }}</view>
|
|
<view class="que" @click="tableTrue">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/goods'
|
|
import { canOrder } from '@/config/order'
|
|
export default {
|
|
data() {
|
|
return {
|
|
newShareMember: false,
|
|
isSelectAll: [],
|
|
shopCarList: [],
|
|
isLoading: false,
|
|
isTo: 0,
|
|
goodsCheck: [],
|
|
totalPrice: 0,
|
|
totalAchive: 0,
|
|
num: 0,
|
|
pkCountry: 1,
|
|
specialArea: 1,
|
|
userInfo: {},
|
|
tableData: [],
|
|
dialogVisible2: false,
|
|
selTable: [],
|
|
allTable: [],
|
|
total: '0.00',
|
|
// show:false,
|
|
// title:'提示',
|
|
// content:'确认删除该商品？'
|
|
}
|
|
},
|
|
computed: {
|
|
submitDisabled() {
|
|
if (this.goodsCheck[0]?.orderItemsParams) {
|
|
return this.goodsCheck[0]?.orderItemsParams?.length === 0
|
|
}
|
|
return true
|
|
},
|
|
cartEmpty() {
|
|
return (
|
|
this.shopCarList.length === 0 ||
|
|
this.shopCarList[0]?.shoppingCartList?.length === 0
|
|
)
|
|
},
|
|
},
|
|
watch: {
|
|
selTable: {
|
|
handler(n, o) {
|
|
let total = 0
|
|
n.forEach(item => {
|
|
total += Number(item.waresPrice) * item.quantity
|
|
})
|
|
this.total = total
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
props: {
|
|
areas: {
|
|
type: Number | String,
|
|
default: 1,
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
// this.getCarList()
|
|
},
|
|
onShow() {
|
|
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
|
console.log('this.nerShareMember', this.newShareMember)
|
|
// this.getCarList()
|
|
},
|
|
methods: {
|
|
tableTrue() {
|
|
if (this.selTable.length > 0) {
|
|
let a = {
|
|
specialArea: this.goodsCheck[0].specialArea,
|
|
orderItemsParams: [],
|
|
}
|
|
a.orderItemsParams = this.selTable.map(item => {
|
|
return {
|
|
waresCode: item.waresCode,
|
|
quantity: item.quantity,
|
|
waresItemsParamList: item.productGroup,
|
|
energySilo: 1,
|
|
}
|
|
})
|
|
a.orderItemsParams.forEach(item => {
|
|
item.waresItemsParamList = item.waresItemsParamList.map(ctem => {
|
|
return {
|
|
pkWaresSpecsSku: ctem.pkSkuId,
|
|
quantity: ctem.quantity,
|
|
}
|
|
})
|
|
})
|
|
api.energyShopSilo(a).then(res => {
|
|
if (res.code == 200) {
|
|
this.dialogVisible2 = false
|
|
let shoppArr = this.goodsCheck[0].orderItemsParams.map(item => {
|
|
return item.shoppingId
|
|
})
|
|
if (this.goodsCheck[0].specialArea == 1) {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/regiest/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr) +
|
|
'&selTable=' +
|
|
JSON.stringify(this.selTable),
|
|
})
|
|
} else if (this.goodsCheck[0].specialArea == 2) {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/other/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr) +
|
|
'&selTable=' +
|
|
JSON.stringify(this.selTable),
|
|
})
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '请选择赠品',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
},
|
|
handleSelectionChange(val) {
|
|
let arr = []
|
|
this.tableData.forEach(item => {
|
|
val.forEach(ctem => {
|
|
if (item.pkId == ctem) {
|
|
arr.push(item)
|
|
}
|
|
})
|
|
})
|
|
this.selTable = arr
|
|
},
|
|
selectAll(e) {
|
|
let i = 0
|
|
// isSelected
|
|
if (e.length > 0) {
|
|
this.shopCarList.forEach(item => {
|
|
item.isSelected = true
|
|
item.shoppingCartList.forEach(ctem => {
|
|
ctem.isSelected = true
|
|
item.isSelect.push(ctem.shoppingId)
|
|
})
|
|
})
|
|
this.shopCarList.forEach(item => {
|
|
if (item.isSelected) {
|
|
i++
|
|
}
|
|
})
|
|
this.isTo = i
|
|
// this.checkArea()
|
|
} else {
|
|
this.shopCarList.forEach(item => {
|
|
item.isSelected = false
|
|
item.shoppingCartList.forEach(ctem => {
|
|
ctem.isSelected = false
|
|
item.isSelect = []
|
|
})
|
|
})
|
|
this.shopCarList.forEach(item => {
|
|
if (item.isSelected) {
|
|
i++
|
|
}
|
|
})
|
|
this.isTo = i
|
|
// this.checkArea()
|
|
}
|
|
},
|
|
delAll() {
|
|
let arr = []
|
|
this.shopCarList.forEach(item => {
|
|
item.isSelect.forEach(ctem => {
|
|
arr.push({
|
|
shoppingId: ctem,
|
|
})
|
|
})
|
|
})
|
|
api.batchDelShopping({ deleteList: arr }).then(res => {
|
|
this.getCarList()
|
|
// this.getShoppingCount()
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none',
|
|
duration: 1500,
|
|
})
|
|
})
|
|
},
|
|
canOrder(shoppingArr) {
|
|
return new Promise((resolve, reject) => {
|
|
canOrder({
|
|
shoppingIds: shoppingArr,
|
|
specialArea: this.specialArea,
|
|
}).then(res => {
|
|
if (res.code == 200 && res.data?.flag === 0) {
|
|
resolve(true)
|
|
} else {
|
|
reject(res.data?.msg)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
async goBuy() {
|
|
let shoppArr = this.goodsCheck[0].orderItemsParams.map(item => {
|
|
return item.shoppingId
|
|
})
|
|
try {
|
|
await this.canOrder(shoppArr)
|
|
} catch (msg) {
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: 'none',
|
|
})
|
|
return
|
|
}
|
|
uni.setStorageSync('allGoods', JSON.stringify(shoppArr))
|
|
if (
|
|
this.goodsCheck[0].specialArea == 1 ||
|
|
this.goodsCheck[0].specialArea == 24
|
|
) {
|
|
let deleteList = []
|
|
shoppArr.forEach(item => {
|
|
deleteList.push({
|
|
shoppingId: item,
|
|
})
|
|
})
|
|
// sangelxiu1
|
|
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
|
if(this.newShareMember){
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/regiest/shareRegister?specialArea=' +
|
|
41 +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/regiest/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
}
|
|
} else if (this.goodsCheck[0].specialArea == 21) {
|
|
if (
|
|
this.userInfo.registerShare == 0 ||
|
|
this.userInfo.registerFans == 0
|
|
) {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/shareArea/haiShare?allData=' +
|
|
JSON.stringify(this.goodsCheck[0].orderItemsParams),
|
|
})
|
|
} else {
|
|
uni.setStorageSync(
|
|
'haiConfirm',
|
|
JSON.stringify(this.goodsCheck[0].orderItemsParams)
|
|
)
|
|
uni.navigateTo({
|
|
url: '/pages/other/haiConfirm?shoppArr=' + JSON.stringify(shoppArr),
|
|
})
|
|
}
|
|
} else if (this.goodsCheck[0].specialArea == 7) {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/hiFans/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
} else {
|
|
if (this.goodsCheck[0].specialArea == 2) {
|
|
let deleteList = []
|
|
shoppArr.forEach(item => {
|
|
deleteList.push({
|
|
shoppingId: item,
|
|
})
|
|
})
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/other/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
} else if (this.goodsCheck[0].specialArea == 30) {
|
|
if (this.goodsCheck[0].orderItemsParams.length > 1) {
|
|
uni.showToast({
|
|
title: '续约专区每次只能购买一件商品',
|
|
icon: 'none',
|
|
})
|
|
return false
|
|
} else {
|
|
let num = this.goodsCheck[0].orderItemsParams.some(
|
|
item => item.quantity > 1
|
|
)
|
|
if (num) {
|
|
uni.showToast({
|
|
title: '续约专区每次只能购买一件商品',
|
|
icon: 'none',
|
|
})
|
|
return false
|
|
} else {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/other/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
}
|
|
}
|
|
} else if (this.goodsCheck[0].specialArea == 31) {
|
|
if (this.totalPrice < 1000) {
|
|
uni.showToast({
|
|
title: '购买商品总价格不能低于1000元',
|
|
icon: 'none',
|
|
duration: 1500,
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/other/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
}
|
|
} else {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/other/index?specialArea=' +
|
|
this.goodsCheck[0].specialArea +
|
|
'&shoppArr=' +
|
|
JSON.stringify(shoppArr),
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 修改数量
|
|
changeCar(e, item, ctem) {
|
|
api
|
|
.plusReduceShopping({
|
|
shoppingId: ctem.shoppingId,
|
|
number: e.value,
|
|
specialArea: item.specialArea,
|
|
})
|
|
.then(res => {
|
|
if (res.code == 200) {
|
|
this.dealData()
|
|
} else {
|
|
this.getCarList()
|
|
}
|
|
|
|
// this.getShoppingCount()
|
|
})
|
|
},
|
|
// 计算价格
|
|
checkPrice() {
|
|
let totalPrice = 0
|
|
let totalAchive = 0
|
|
let num = 0
|
|
this.goodsCheck.forEach(item => {
|
|
item.orderItemsParams.forEach(ctem => {
|
|
totalPrice += parseFloat(ctem.waresPrice * ctem.quantity)
|
|
totalAchive += parseFloat(ctem.achieve * ctem.quantity)
|
|
num += ctem.quantity
|
|
})
|
|
})
|
|
// if (this.goodsCheck.length != 1) {
|
|
this.totalPrice = totalPrice.toFixed(2)
|
|
this.totalAchive = totalAchive.toFixed(2)
|
|
this.num = num
|
|
// }
|
|
},
|
|
checkboxChange(e, item) {
|
|
if (e.length > 0) {
|
|
this.$set(item, 'isSelected', true)
|
|
this.$set(item, 'isSelect', e)
|
|
// this.checkArea()
|
|
} else {
|
|
this.$set(item, 'isSelected', false)
|
|
this.$set(item, 'isSelect', e)
|
|
// this.checkArea()
|
|
}
|
|
let i = 0
|
|
this.shopCarList.forEach(item => {
|
|
if (item.isSelected) {
|
|
i++
|
|
}
|
|
})
|
|
this.isTo = i
|
|
let blin = true
|
|
this.shopCarList.forEach(item => {
|
|
if (item.isSelect.length != item.shoppingCartList.length) {
|
|
blin = false
|
|
}
|
|
})
|
|
if (blin) {
|
|
this.isSelectAll = [1]
|
|
} else {
|
|
this.isSelectAll = []
|
|
}
|
|
},
|
|
// 单删
|
|
delOne(ctem) {
|
|
let deleteList = [
|
|
{
|
|
shoppingId: ctem.shoppingId,
|
|
},
|
|
]
|
|
api.batchDelShopping({ deleteList: deleteList }).then(res => {
|
|
this.getCarList()
|
|
// this.getShoppingCount()
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none',
|
|
duration: 1500,
|
|
})
|
|
})
|
|
},
|
|
getCarList(specialArea) {
|
|
if (specialArea) {
|
|
this.specialArea = specialArea
|
|
this.userInfo = uni.getStorageSync('User')
|
|
if (this.specialArea == 1) {
|
|
if (uni.getStorageSync('pkCountry')) {
|
|
this.pkCountry = uni.getStorageSync('pkCountry')
|
|
} else {
|
|
this.pkCountry = this.userInfo.pkSettleCountry
|
|
}
|
|
} else {
|
|
this.pkCountry = this.userInfo.pkSettleCountry
|
|
}
|
|
}
|
|
api
|
|
.getShopping({
|
|
specialArea: this.specialArea,
|
|
pkCountry: this.pkCountry,
|
|
})
|
|
.then(res => {
|
|
res.data.forEach(item => {
|
|
item.isSelected = false
|
|
item.isSelect = []
|
|
item.shoppingCartList.forEach(ctem => {
|
|
ctem.isSelected = false
|
|
ctem.waresItemsParamList = []
|
|
if (item.specialArea != 21) {
|
|
ctem.productParams.forEach(stem => {
|
|
if (stem.waresItemsParamsList.length > 0) {
|
|
stem.waresItemsParamsList[0].pkWaresSpecsSku =
|
|
stem.waresItemsParamsList[0].pkSkuId
|
|
stem.waresItemsParamsList[0].productName = stem.productName
|
|
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0])
|
|
}
|
|
})
|
|
} else {
|
|
}
|
|
})
|
|
})
|
|
this.shopCarList = res.data
|
|
this.goPay()
|
|
this.dealData()
|
|
})
|
|
},
|
|
goPay() {
|
|
let arr = []
|
|
this.shopCarList.forEach(item => {
|
|
item.shoppingCartList.forEach(ctem => {
|
|
arr.push({
|
|
specialArea: item.specialArea,
|
|
orderItemsParams: [
|
|
{
|
|
waresCode: ctem.waresCode,
|
|
waresName: ctem.waresName,
|
|
achieve: ctem.achieve,
|
|
shoppingId: ctem.shoppingId,
|
|
waresPrice: ctem.waresPrice,
|
|
cover1: ctem.cover1,
|
|
source: ctem.source,
|
|
quantity: ctem.number,
|
|
waresItemsParamList: ctem.waresItemsParamList,
|
|
waresSkuList: ctem.waresSkuList || [],
|
|
},
|
|
],
|
|
})
|
|
})
|
|
})
|
|
const arrayHashmap = arr.reduce((obj, item) => {
|
|
obj[item.specialArea]
|
|
? obj[item.specialArea].orderItemsParams.push(
|
|
...item.orderItemsParams
|
|
)
|
|
: (obj[item.specialArea] = item)
|
|
return obj
|
|
}, {})
|
|
this.goodsCheck = Object.values(arrayHashmap)
|
|
},
|
|
// 处理数据
|
|
dealData() {
|
|
let arr = [
|
|
{
|
|
specialArea: this.shopCarList[0].specialArea,
|
|
orderItemsParams: [],
|
|
},
|
|
]
|
|
this.shopCarList[0].shoppingCartList.forEach(ctem => {
|
|
arr[0].orderItemsParams.push({
|
|
waresCode: ctem.waresCode,
|
|
waresName: ctem.waresName,
|
|
shoppingId: ctem.shoppingId,
|
|
achieve: ctem.achieve,
|
|
waresPrice: ctem.waresPrice,
|
|
cover1: ctem.cover1,
|
|
source: ctem.source,
|
|
quantity: ctem.number,
|
|
waresItemsParamList: ctem.waresItemsParamList,
|
|
waresSkuList: ctem.waresSkuList || [],
|
|
})
|
|
})
|
|
this.goodsCheck = arr
|
|
this.checkPrice()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #f9f9f9;
|
|
height: 50vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.context {
|
|
// padding: 24rpx;
|
|
}
|
|
|
|
.kuang {
|
|
// padding: 20rpx 40rpx;
|
|
background: #fff;
|
|
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5); // border-top: 20rpx solid #f6f5f3;
|
|
}
|
|
|
|
.kuang_t {
|
|
border-bottom: 1px solid #eeeeee;
|
|
padding: 40rpx 24rpx;
|
|
}
|
|
|
|
.goodList {
|
|
display: flex;
|
|
padding: 0 20rpx;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.cover {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
background: #ffffff;
|
|
border: 1px solid #eeeeee;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.goodList_i {
|
|
flex: 1;
|
|
}
|
|
|
|
.goodList_it {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
.goodList_ir {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.goodList_ib {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
img {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsSet {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 26rpx 0;
|
|
}
|
|
|
|
.product_i {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f6f6f6;
|
|
padding: 15rpx;
|
|
.product_il {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
margin-left: 20rpx;
|
|
}
|
|
img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background: #ffffff;
|
|
border: 1px solid #dddddd;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.tit1 {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.tit2 {
|
|
font-size: 36rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #f82c1a;
|
|
}
|
|
|
|
.tit3 {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.tit4 {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.tit5 {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.footer_f {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 24rpx;
|
|
background: #fff;
|
|
.footer_l {
|
|
display: flex;
|
|
align-items: center;
|
|
.footer_ll {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
.pop {
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: -16rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
background: #005bac;
|
|
box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
color: #f1f2f7;
|
|
}
|
|
}
|
|
}
|
|
.footer_lr {
|
|
margin-left: 20rpx; // display: flex;
|
|
// align-items: center;
|
|
}
|
|
.footer_r {
|
|
// flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.disFlex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.h1 {
|
|
font-size: 10px;
|
|
font-family:
|
|
PingFang SC-Medium,
|
|
PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.r1 {
|
|
font-size: 36rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #f82c1a;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.l1 {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.uBtn {
|
|
padding: 20rpx 70rpx;
|
|
}
|
|
|
|
.zhan {
|
|
height: 240rpx;
|
|
}
|
|
|
|
.deldel {
|
|
color: #005bac;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.sel {
|
|
position: relative;
|
|
}
|
|
|
|
.kong_t {
|
|
text-align: center;
|
|
padding-top: 20%;
|
|
}
|
|
|
|
.kong {
|
|
width: 576rpx;
|
|
height: 406rpx;
|
|
}
|
|
::v-deep .pp .u-popup__content {
|
|
width: 80%;
|
|
height: 60%;
|
|
overflow-y: auto;
|
|
}
|
|
.popList {
|
|
padding-top: 40rpx;
|
|
}
|
|
.popList_i {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0rpx 40rpx 0rpx 20rpx;
|
|
margin-bottom: 40rpx;
|
|
.popList_ii {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 8px;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.popBtm {
|
|
position: sticky;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 1);
|
|
padding: 20rpx 40rpx;
|
|
font-size: 14px;
|
|
.que {
|
|
background: #e03030;
|
|
border-radius: 20px;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
}
|
|
</style>
|