|
|
@@ -1,748 +1,884 @@
|
|
|
<template>
|
|
|
- <!-- 购物车 -->
|
|
|
- <view class="page">
|
|
|
- <u-navbar :safeAreaInsetTop="true" :placeholder="true">
|
|
|
- <view class="u-nav-slot" slot="left">
|
|
|
- <view class="">
|
|
|
- <text class="shopcart">{{ i18n.Shopping }}</text>
|
|
|
- <text class="sum">({{ goodsNum }})</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="u-nav-slot" slot="right">
|
|
|
- <view class="u-flex">
|
|
|
- <text @click="admin" v-if="success">{{ i18n.manage }}</text>
|
|
|
- <text @click="admin" v-else>{{ i18n.complete }}</text>
|
|
|
- <view class="" style="width: 200rpx"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
|
|
|
- <view class="box" v-for="(item, idx) in goodsList" :key="idx">
|
|
|
- <view class="item">
|
|
|
- <view class="shopname u-flex">
|
|
|
- <image src="/static/mine/354.png" class="circle" mode="scaleToFill"
|
|
|
- @click="shopSelectAll(item.goods)" v-if="shop(item.goods)" />
|
|
|
- <image src="/static/mine/353.png" class="circle" mode="scaleToFill"
|
|
|
- @click="shopSelectAll(item.goods)" v-else />
|
|
|
-
|
|
|
- <image :src="item.image" style="width: 28rpx; height: 28rpx" mode=""></image>
|
|
|
- <text>{{ item.merchant_name }}</text>
|
|
|
- <image src="/static/express/next1.png" style="width: 32rpx; height: 32rpx" mode=""></image>
|
|
|
- </view>
|
|
|
- <u-swipe-action>
|
|
|
- <view class="u-flex" style="margin-top: 30rpx; width: 100%" v-for="(chid, index) in item.goods"
|
|
|
- :key="index">
|
|
|
- <u-swipe-action-item :options="options2" @click="followOrdelete" :autoClose="true"
|
|
|
- :name="chid.cart.sku_item_id" :disabled="chid.status == 'down'">
|
|
|
- <!-- <view class="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(255, 255, 255, 0.5);"></view> -->
|
|
|
- <u-checkbox shape="circle" :customStyle="{ marginBottom: '8px' }"
|
|
|
- :name="chid.cart.sku_item_id" activeColor="#F83224"
|
|
|
- :disabled="chid.status == 'down'">
|
|
|
- </u-checkbox>
|
|
|
- <view class="" style="
|
|
|
+ <!-- 购物车 -->
|
|
|
+ <view class="page" @click="num = ''">
|
|
|
+ <u-navbar :safeAreaInsetTop="true" :placeholder="true">
|
|
|
+ <view class="u-nav-slot" slot="left">
|
|
|
+ <view class="">
|
|
|
+ <text class="shopcart">{{ i18n.Shopping }}</text>
|
|
|
+ <text class="sum">({{ goodsNum }})</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-nav-slot" slot="right">
|
|
|
+ <view class="u-flex">
|
|
|
+ <text @click="admin" v-if="success">{{ i18n.manage }}</text>
|
|
|
+ <text @click="admin" v-else>{{ i18n.complete }}</text>
|
|
|
+ <view class="" style="width: 200rpx"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <u-checkbox-group
|
|
|
+ v-model="checkboxValue1"
|
|
|
+ placement="column"
|
|
|
+ @change="checkboxChange"
|
|
|
+ >
|
|
|
+ <view class="box" v-for="(item, idx) in goodsList" :key="idx">
|
|
|
+ <view class="item">
|
|
|
+ <view class="shopname u-flex">
|
|
|
+ <image
|
|
|
+ src="/static/mine/354.png"
|
|
|
+ class="circle"
|
|
|
+ mode="scaleToFill"
|
|
|
+ @click="shopSelectAll(item.goods)"
|
|
|
+ v-if="shop(item.goods)"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="/static/mine/353.png"
|
|
|
+ class="circle"
|
|
|
+ mode="scaleToFill"
|
|
|
+ @click="shopSelectAll(item.goods)"
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+
|
|
|
+ <image
|
|
|
+ :src="item.image"
|
|
|
+ style="width: 28rpx; height: 28rpx"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ <text>{{ item.merchant_name }}</text>
|
|
|
+ <image
|
|
|
+ src="/static/express/next1.png"
|
|
|
+ style="width: 32rpx; height: 32rpx"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <u-swipe-action>
|
|
|
+ <view
|
|
|
+ class="u-flex"
|
|
|
+ style="margin-top: 30rpx; width: 100%"
|
|
|
+ v-for="(chid, index) in item.goods"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <u-swipe-action-item
|
|
|
+ ref="show"
|
|
|
+ :options="options2"
|
|
|
+ @click="followOrdelete"
|
|
|
+ :autoClose="true"
|
|
|
+ :name="chid.cart.id"
|
|
|
+ :disabled="chid.status == 'down'"
|
|
|
+ >
|
|
|
+ <!-- <view class="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(255, 255, 255, 0.5);"></view> -->
|
|
|
+ <u-checkbox
|
|
|
+ shape="circle"
|
|
|
+ :customStyle="{ marginBottom: '8px' }"
|
|
|
+ :name="chid.cart.id"
|
|
|
+ activeColor="#F83224"
|
|
|
+ :disabled="chid.status == 'down'"
|
|
|
+ >
|
|
|
+ </u-checkbox>
|
|
|
+ <view
|
|
|
+ class=""
|
|
|
+ style="
|
|
|
position: relative;
|
|
|
width: 172rpx;
|
|
|
height: 172rpx;
|
|
|
border-radius: 16rpx;
|
|
|
- ">
|
|
|
- <image :src="chid.image" style="width: 172rpx; height: 172rpx; border-radius: 20rpx"
|
|
|
- mode="">
|
|
|
- </image>
|
|
|
- <view class="down" v-if="chid.status == 'down'">
|
|
|
- <view class="sold"> 商品下架 </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="good" style="flex: 1; margin-left: 10rpx; width: 65%">
|
|
|
- <view class="goodname">{{ chid.name_cn }}</view>
|
|
|
- <view class="goods" v-if="chid.sku_item.length > 0">{{
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ :src="chid.image"
|
|
|
+ style="width: 172rpx; height: 172rpx; border-radius: 20rpx"
|
|
|
+ mode=""
|
|
|
+ >
|
|
|
+ </image>
|
|
|
+ <view class="down" v-if="chid.status == 'down'">
|
|
|
+ <view class="sold"> 商品下架 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="good"
|
|
|
+ style="flex: 1; margin-left: 10rpx; width: 65%"
|
|
|
+ >
|
|
|
+ <view class="goodname">{{ chid.name_cn }}</view>
|
|
|
+ <view class="goods" v-if="chid.sku_item.length > 0">{{
|
|
|
chid.sku_item[0].item
|
|
|
}}</view>
|
|
|
- <view class="" style="margin-top: 21rpx">
|
|
|
- <view class="goodtab" v-for="itemLabel in chid.label_arr" :key="itemLabel.id">
|
|
|
- {{ itemLabel.name_cn }}</view>
|
|
|
- </view>
|
|
|
- <view class="u-flex u-row-between" style="width: 100%; margin-top: 20rpx">
|
|
|
- <view class="" v-if="chid.sku_item.length > 0">
|
|
|
- <text class="money">¥</text>
|
|
|
- <text class="money" style="font-size: 30rpx">{{
|
|
|
+ <view class="" style="margin-top: 21rpx">
|
|
|
+ <view
|
|
|
+ class="goodtab"
|
|
|
+ v-for="itemLabel in chid.label_arr"
|
|
|
+ :key="itemLabel.id"
|
|
|
+ >
|
|
|
+ {{ itemLabel.name_cn }}</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="u-flex u-row-between"
|
|
|
+ style="width: 100%; margin-top: 20rpx"
|
|
|
+ >
|
|
|
+ <view class="" v-if="chid.sku_item.length > 0">
|
|
|
+ <text class="money">¥</text>
|
|
|
+ <text class="money" style="font-size: 30rpx">{{
|
|
|
chid.sku_item[0].price.split(".")[0]
|
|
|
}}</text>
|
|
|
- <text class="money">.{{ chid.sku_item[0].price.split(".")[1] }}</text>
|
|
|
- <text class="weight">{{ chid.sku_item[0].weight }}kg</text>
|
|
|
- </view>
|
|
|
- <view class="aaaaaa">
|
|
|
- <!-- <view class="delect" v-if='dele'>{{i18n.delete}}</view> -->
|
|
|
- <view class="" v-if="num == chid.cart.sku_item_id && success">
|
|
|
- <!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
|
|
|
- <u-number-box v-model="chid.cart.goods_num" @change="addOrReduce">
|
|
|
- <view slot="minus" class="minus">
|
|
|
- <u-icon name="minus" color="#B5B5B5" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- <text slot="input" style="
|
|
|
+ <text class="money"
|
|
|
+ >.{{ chid.sku_item[0].price.split(".")[1] }}</text
|
|
|
+ >
|
|
|
+ <text class="weight"
|
|
|
+ >{{ chid.sku_item[0].weight }}kg</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="aaaaaa">
|
|
|
+ <!-- <view class="delect" v-if='dele'>{{i18n.delete}}</view> -->
|
|
|
+ <view class="" v-if="num == chid.cart.id && success">
|
|
|
+ <!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
|
|
|
+ <u-number-box
|
|
|
+ v-model="chid.cart.goods_num"
|
|
|
+ @change="addOrReduce"
|
|
|
+ >
|
|
|
+ <view slot="minus" class="minus">
|
|
|
+ <u-icon
|
|
|
+ name="minus"
|
|
|
+ color="#B5B5B5"
|
|
|
+ size="12"
|
|
|
+ ></u-icon>
|
|
|
+ </view>
|
|
|
+ <text
|
|
|
+ slot="input"
|
|
|
+ style="
|
|
|
width: 50px;
|
|
|
text-align: center;
|
|
|
font-size: 20rpx;
|
|
|
- " class="input">{{ chid.cart.goods_num }}</text>
|
|
|
- <view slot="plus" class="plus">
|
|
|
- <u-icon name="plus" color="#B5B5B5" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- </u-number-box>
|
|
|
- </view>
|
|
|
- <view class="num" v-if="
|
|
|
- num != chid.cart.sku_item_id &&
|
|
|
+ "
|
|
|
+ class="input"
|
|
|
+ >{{ chid.cart.goods_num }}</text
|
|
|
+ >
|
|
|
+ <view slot="plus" class="plus">
|
|
|
+ <u-icon
|
|
|
+ name="plus"
|
|
|
+ color="#B5B5B5"
|
|
|
+ size="12"
|
|
|
+ ></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-number-box>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="num"
|
|
|
+ v-if="
|
|
|
+ num != chid.cart.id &&
|
|
|
success &&
|
|
|
chid.status == 'normal'
|
|
|
- " @click="num = chid.cart.sku_item_id">
|
|
|
- x{{ chid.cart.goods_num }}
|
|
|
- </view>
|
|
|
- <view v-if="chid.status == 'down'" class="del" @click="
|
|
|
+ "
|
|
|
+ @click.stop="num = chid.cart.id"
|
|
|
+ >
|
|
|
+ x{{ chid.cart.goods_num }}
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="success && chid.status == 'down'"
|
|
|
+ class="del"
|
|
|
+ @click="
|
|
|
followOrdelete({
|
|
|
index: 1,
|
|
|
- name: chid.cart.sku_item_id,
|
|
|
+ name: chid.cart.id,
|
|
|
})
|
|
|
- ">删除</view>
|
|
|
- </view>
|
|
|
- <view v-if="success == false" class="icon">
|
|
|
- <u-icon name="trash" color="#fff" size="20"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-swipe-action-item>
|
|
|
- </view>
|
|
|
- </u-swipe-action>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-checkbox-group>
|
|
|
- <u-toast ref="uToast"></u-toast>
|
|
|
- <view class="" style="height: 260rpx"></view>
|
|
|
- <view class="back-top" @click="backTop">
|
|
|
- <image class="back-icon" src="../../static/mine/355.png" mode="scaleToFill" />
|
|
|
- <text class="back-text">顶部</text>
|
|
|
- </view>
|
|
|
- <kj-tabbar ref="tabbar1" :value1="3" @allSelect="allSelect" :goodsWeight="goodsWeight"
|
|
|
- :goodsPrice="String(goodsPrice.toFixed(2))" :goodsList="goodsList"
|
|
|
- :checkboxValue1="checkboxValue1"></kj-tabbar>
|
|
|
- </view>
|
|
|
+ "
|
|
|
+ >删除</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="success == false"
|
|
|
+ class="icon delete-1"
|
|
|
+ @click="
|
|
|
+ followOrdelete({
|
|
|
+ index: 1,
|
|
|
+ name: chid.cart.id,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <u-icon name="trash" color="#fff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action-item>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox-group>
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
+ <view class="" style="height: 260rpx"></view>
|
|
|
+ <view class="back-top" @click="backTop">
|
|
|
+ <image
|
|
|
+ class="back-icon"
|
|
|
+ src="../../static/mine/355.png"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <text class="back-text">顶部</text>
|
|
|
+ </view>
|
|
|
+ <kj-tabbar
|
|
|
+ ref="tabbar1"
|
|
|
+ :value1="3"
|
|
|
+ :success="success"
|
|
|
+ @allSelect="allSelect"
|
|
|
+ :goodsWeight="goodsWeight"
|
|
|
+ :goodsPrice="String(goodsPrice.toFixed(2))"
|
|
|
+ :goodsList="goodsList"
|
|
|
+ :checkboxValue1="checkboxValue1"
|
|
|
+ @selectDelete="selectDelete"
|
|
|
+ ></kj-tabbar>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dele: true,
|
|
|
- success: true,
|
|
|
- shopitem: -1,
|
|
|
- checkboxValue1: [], //商品数组
|
|
|
- value: 0,
|
|
|
- all: [], //全选数组
|
|
|
- goodsList: [],
|
|
|
- selectall: -1,
|
|
|
- goodsNum: 0,
|
|
|
- num: false,
|
|
|
- goodsWeight: 0, //商品重量
|
|
|
- goodsPrice: 0, //商品价格
|
|
|
- options2: [{
|
|
|
- text: "移入关注",
|
|
|
- style: {
|
|
|
- backgroundColor: "#FFB115",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "删除",
|
|
|
- style: {
|
|
|
- backgroundColor: "#F83224",
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- tabarheight: "",
|
|
|
- removeProducts: 0, //已下架的商品数量
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- i18n() {
|
|
|
- return this.$t("index");
|
|
|
- },
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- const systemInfo = wx.getSystemInfoSync();
|
|
|
- const tab =
|
|
|
- systemInfo.screenHeight -
|
|
|
- systemInfo.safeArea.bottom +
|
|
|
- systemInfo.statusBarHeight;
|
|
|
- this.tabarheight = tab;
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getShopCarList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //返回顶部
|
|
|
- backTop() {
|
|
|
- uni.pageScrollTo({
|
|
|
- scrollTop: 0, // 滚动到页面的目标位置 这个是滚动到顶部, 0
|
|
|
- duration: 300, // 滚动动画的时长
|
|
|
- });
|
|
|
- },
|
|
|
- //商品下架之后的商品字体颜色
|
|
|
- getFontColor(status) {
|
|
|
- if (status == "down") {
|
|
|
- return "color:rgba(51, 51, 51, .6)";
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //关注商品 or 删除商品
|
|
|
- followOrdelete(e) {
|
|
|
- //关注商品
|
|
|
- if (e.index == 0) {
|
|
|
- this.goodsList.map((item) => {
|
|
|
- item.goods.map((items) => {
|
|
|
- if (e.name == items.cart.sku_item_id) {
|
|
|
- uni.$u.http
|
|
|
- .post(`/api/interest/follow`, {
|
|
|
- interest_type: 0,
|
|
|
- interest_id: items.merchant_goods_id,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- console.log(res);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- //删除商品
|
|
|
- this.goodsList.map((item) => {
|
|
|
- item.goods.map((items) => {
|
|
|
- if (e.name == items.cart.sku_item_id) {
|
|
|
- uni.$u.http
|
|
|
- .delete(`/api/cart?ids=${items.cart.id}`)
|
|
|
- .then((res) => {
|
|
|
- this.$refs.uToast.show({
|
|
|
- type: "default",
|
|
|
- title: "默认主题",
|
|
|
- message: "删除成功",
|
|
|
- });
|
|
|
- this.getShopCarList();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- shop(value) {
|
|
|
- let num = 0;
|
|
|
- value.map((item) => {
|
|
|
- if (this.checkboxValue1.indexOf(item.cart.sku_item_id) >= 0) {
|
|
|
- num++;
|
|
|
- }
|
|
|
- });
|
|
|
- return num;
|
|
|
- },
|
|
|
-
|
|
|
- //获取排除下架的商品之后的商品数量
|
|
|
- getNormalGoodsNum(value) {
|
|
|
- let num = 0;
|
|
|
- value.map((item) => {
|
|
|
- if (item.status != "down") {
|
|
|
- num++;
|
|
|
- }
|
|
|
- });
|
|
|
- return num;
|
|
|
- },
|
|
|
-
|
|
|
- //修改购物车商品数量
|
|
|
- addOrReduce(n) {
|
|
|
- uni.$u.http
|
|
|
- .post(`/api/cart/num/${this.num}`, {
|
|
|
- goods_num: n.value,
|
|
|
- type: ""
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- console.log(res);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //店铺商品全选
|
|
|
- shopSelectAll(value) {
|
|
|
- this.goodsPrice = 0;
|
|
|
- this.goodsWeight = 0;
|
|
|
- //先判断存放选中的数组有没有选中的数据
|
|
|
- if (this.checkboxValue1.length == 0) {
|
|
|
- //没有数据则直接将选中店铺中的商品存入数组
|
|
|
- value.map((item) => {
|
|
|
- //商品下架不得选中
|
|
|
- if (item.status != "down") {
|
|
|
- this.checkboxValue1.push(item.cart.sku_item_id);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- if (
|
|
|
- this.shop(value) > 0 &&
|
|
|
- this.shop(value) == this.getNormalGoodsNum(value)
|
|
|
- ) {
|
|
|
- value.map((item) => {
|
|
|
- //先判断选中的商品数组中该店铺商品是否已被选中，已被选中则取消选中
|
|
|
- if (this.checkboxValue1.indexOf(item.cart.sku_item_id) >= 0) {
|
|
|
- this.checkboxValue1.splice(
|
|
|
- this.checkboxValue1.indexOf(item.cart.sku_item_id),
|
|
|
- 1
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- } else if (
|
|
|
- (this.shop(value) > 0 &&
|
|
|
- this.shop(value) != this.getNormalGoodsNum(value)) ||
|
|
|
- this.shop(value) == 0
|
|
|
- ) {
|
|
|
- value.map((item) => {
|
|
|
- //先判断选中的商品数组中该店铺商品是否已被选中，未被选中则推入选中状态，商品下架不得选中
|
|
|
- if (
|
|
|
- this.checkboxValue1.indexOf(item.cart.sku_item_id) == -1 &&
|
|
|
- item.status != "down"
|
|
|
- ) {
|
|
|
- this.checkboxValue1.push(item.cart.sku_item_id);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
|
|
|
- this.$refs.tabbar1.cancelAll();
|
|
|
- } else {
|
|
|
- this.$refs.tabbar1.cancelAll("取消");
|
|
|
- }
|
|
|
-
|
|
|
- //将选中的商品价格相加
|
|
|
- this.goodsList.map((item) => {
|
|
|
- item.goods.map((items) => {
|
|
|
- if (this.checkboxValue1.indexOf(items.cart.sku_item_id) > -1) {
|
|
|
- this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
|
|
|
- this.goodsPrice +=
|
|
|
- Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- this.shop(value);
|
|
|
- },
|
|
|
- admin() {
|
|
|
- this.success = !this.success;
|
|
|
- },
|
|
|
- valChange(e) {
|
|
|
- console.log("当前值为: " + e.value);
|
|
|
- },
|
|
|
- //全选
|
|
|
- checkAll(e) {
|
|
|
- console.log("all", e);
|
|
|
- },
|
|
|
- //购物车单选
|
|
|
- checkboxChange(n) {
|
|
|
- console.log(n);
|
|
|
- //首先将价格和商品重量重置
|
|
|
- this.goodsWeight = 0;
|
|
|
- this.goodsPrice = 0;
|
|
|
- this.checkboxValue1 = n;
|
|
|
- this.goodsList.map((item) => {
|
|
|
- item.goods.map((items) => {
|
|
|
- if (n.indexOf(items.cart.sku_item_id) > -1) {
|
|
|
- this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
|
|
|
- this.goodsPrice +=
|
|
|
- Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- //判断是否全部选中
|
|
|
- if (
|
|
|
- this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
|
|
|
- this.goodsNum != 0
|
|
|
- ) {
|
|
|
- this.$refs.tabbar1.cancelAll();
|
|
|
- } else if (
|
|
|
- this.checkboxValue1.length <
|
|
|
- this.goodsNum - this.removeProducts
|
|
|
- ) {
|
|
|
- this.$refs.tabbar1.cancelAll("取消");
|
|
|
- }
|
|
|
- },
|
|
|
- //购物车全选
|
|
|
- allSelect() {
|
|
|
- const all = this.$refs.tabbar1.cancelAll("全选");
|
|
|
- if (
|
|
|
- this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
|
|
|
- all.length == 0
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- //判断是否已经全选，如已全选，则取消全选
|
|
|
- if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
|
|
|
- this.checkboxValue1 = [];
|
|
|
- this.goodsPrice = 0;
|
|
|
- this.goodsWeight = 0;
|
|
|
- } else {
|
|
|
- this.goodsList.map((item) => {
|
|
|
- item.goods.map((items) => {
|
|
|
- //判断是否有商品已被选中
|
|
|
- if (
|
|
|
- this.checkboxValue1.indexOf(items.cart.sku_item_id) == -1 &&
|
|
|
- items.status != "down"
|
|
|
- ) {
|
|
|
- this.checkboxValue1.push(items.cart.sku_item_id);
|
|
|
- this.goodsWeight +=
|
|
|
- items.sku_item[0].weight * items.cart.goods_num;
|
|
|
- this.goodsPrice +=
|
|
|
- Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- //获取购物车数据
|
|
|
- getShopCarList() {
|
|
|
- uni.$u.http.get(`/api/cart`).then((res) => {
|
|
|
- this.goodsList = res.data;
|
|
|
- //循环店铺，获取购物车商品数量
|
|
|
- this.goodsList.map((item) => {
|
|
|
- this.goodsNum += item.goods.length;
|
|
|
- item.goods.map((items) => {
|
|
|
- if (items.status == "down") {
|
|
|
- this.removeProducts++;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- // mounted() {
|
|
|
- // this.getShopCarList();
|
|
|
- // },
|
|
|
- };
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dele: true,
|
|
|
+ success: true,
|
|
|
+ shopitem: -1,
|
|
|
+ checkboxValue1: [], //商品数组
|
|
|
+ value: 0,
|
|
|
+ all: [], //全选数组
|
|
|
+ goodsList: [],
|
|
|
+ selectall: -1,
|
|
|
+ goodsNum: 0,
|
|
|
+ num: false,
|
|
|
+ goodsWeight: 0, //商品重量
|
|
|
+ goodsPrice: 0, //商品价格
|
|
|
+ options2: [
|
|
|
+ {
|
|
|
+ text: "移入关注",
|
|
|
+ style: {
|
|
|
+ backgroundColor: "#FFB115",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "删除",
|
|
|
+ style: {
|
|
|
+ backgroundColor: "#F83224",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tabarheight: "",
|
|
|
+ removeProducts: 0, //已下架的商品数量
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ i18n() {
|
|
|
+ return this.$t("index");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ const systemInfo = wx.getSystemInfoSync();
|
|
|
+ const tab =
|
|
|
+ systemInfo.screenHeight -
|
|
|
+ systemInfo.safeArea.bottom +
|
|
|
+ systemInfo.statusBarHeight;
|
|
|
+ this.tabarheight = tab;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getShopCarList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回顶部
|
|
|
+ backTop() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, // 滚动到页面的目标位置 这个是滚动到顶部, 0
|
|
|
+ duration: 300, // 滚动动画的时长
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //商品下架之后的商品字体颜色
|
|
|
+ getFontColor(status) {
|
|
|
+ if (status == "down") {
|
|
|
+ return "color:rgba(51, 51, 51, .6)";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //关注商品 or 删除商品
|
|
|
+ followOrdelete(e) {
|
|
|
+ //关注商品
|
|
|
+ if (e.index == 0) {
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (e.name == items.cart.id) {
|
|
|
+ console.log(items);
|
|
|
+ uni.$u.http
|
|
|
+ .post(`/api/interest/follow`, {
|
|
|
+ interest_type: 0,
|
|
|
+ interest_id: items.merchant_goods.id,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.$refs.show.forEach((item) => item.closeHandler(true));
|
|
|
+ console.log(res);
|
|
|
+ uni.showToast({
|
|
|
+ title: "关注成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //删除商品
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (e.name == items.cart.id) {
|
|
|
+ uni.$u.http
|
|
|
+ .delete(`/api/cart?ids=${items.cart.id}`)
|
|
|
+ .then((res) => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: "default",
|
|
|
+ title: "默认主题",
|
|
|
+ message: "删除成功",
|
|
|
+ });
|
|
|
+ //删除后关闭滑动打开的单元格
|
|
|
+ this.$refs.show.forEach((item) => item.closeHandler(true));
|
|
|
+ this.getShopCarList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //多选删除
|
|
|
+ selectDelete() {
|
|
|
+ let goodsIdList = []; //筛选选中的商品id
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (this.checkboxValue1.indexOf(items.cart.id) >= 0) {
|
|
|
+ goodsIdList.push(items.cart.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ uni.$u.http
|
|
|
+ .delete(`/api/cart`, { ids: goodsIdList.join(",") })
|
|
|
+ .then((res) => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: "default",
|
|
|
+ title: "默认主题",
|
|
|
+ message: "删除成功",
|
|
|
+ });
|
|
|
+ this.checkboxValue1 = [];
|
|
|
+ this.getShopCarList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ shop(value) {
|
|
|
+ let num = 0;
|
|
|
+ value.map((item) => {
|
|
|
+ if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取排除下架的商品之后的商品数量
|
|
|
+ getNormalGoodsNum(value) {
|
|
|
+ let num = 0;
|
|
|
+ value.map((item) => {
|
|
|
+ if (item.status != "down") {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+
|
|
|
+ //修改购物车商品数量
|
|
|
+ addOrReduce(n) {
|
|
|
+ console.log(n);
|
|
|
+ uni.$u.http
|
|
|
+ .post(`/api/cart/num/${this.num}`, {
|
|
|
+ goods_num: n.value,
|
|
|
+ type: "",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //店铺商品全选
|
|
|
+ shopSelectAll(value) {
|
|
|
+ this.goodsPrice = 0;
|
|
|
+ this.goodsWeight = 0;
|
|
|
+ //先判断存放选中的数组有没有选中的数据
|
|
|
+ if (this.checkboxValue1.length == 0) {
|
|
|
+ //没有数据则直接将选中店铺中的商品存入数组
|
|
|
+ value.map((item) => {
|
|
|
+ //商品下架不得选中
|
|
|
+ if (item.status != "down") {
|
|
|
+ this.checkboxValue1.push(item.cart.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ this.shop(value) > 0 &&
|
|
|
+ this.shop(value) == this.getNormalGoodsNum(value)
|
|
|
+ ) {
|
|
|
+ value.map((item) => {
|
|
|
+ //先判断选中的商品数组中该店铺商品是否已被选中，已被选中则取消选中
|
|
|
+ if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
|
|
|
+ this.checkboxValue1.splice(
|
|
|
+ this.checkboxValue1.indexOf(item.cart.id),
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (
|
|
|
+ (this.shop(value) > 0 &&
|
|
|
+ this.shop(value) != this.getNormalGoodsNum(value)) ||
|
|
|
+ this.shop(value) == 0
|
|
|
+ ) {
|
|
|
+ value.map((item) => {
|
|
|
+ //先判断选中的商品数组中该店铺商品是否已被选中，未被选中则推入选中状态，商品下架不得选中
|
|
|
+ if (
|
|
|
+ this.checkboxValue1.indexOf(item.cart.id) == -1 &&
|
|
|
+ item.status != "down"
|
|
|
+ ) {
|
|
|
+ this.checkboxValue1.push(item.cart.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
|
|
|
+ this.$refs.tabbar1.cancelAll();
|
|
|
+ } else {
|
|
|
+ this.$refs.tabbar1.cancelAll("取消");
|
|
|
+ }
|
|
|
+
|
|
|
+ //将选中的商品价格相加
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (this.checkboxValue1.indexOf(items.cart.id) > -1) {
|
|
|
+ this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
|
|
|
+ this.goodsPrice +=
|
|
|
+ Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.shop(value);
|
|
|
+ },
|
|
|
+ admin() {
|
|
|
+ console.log(this.checkboxValue1);
|
|
|
+ this.success = !this.success;
|
|
|
+ },
|
|
|
+ valChange(e) {
|
|
|
+ console.log("当前值为: " + e.value);
|
|
|
+ },
|
|
|
+ //全选
|
|
|
+ checkAll(e) {
|
|
|
+ console.log("all", e);
|
|
|
+ },
|
|
|
+ //购物车单选
|
|
|
+ checkboxChange(n) {
|
|
|
+ console.log(n);
|
|
|
+ //首先将价格和商品重量重置
|
|
|
+ this.goodsWeight = 0;
|
|
|
+ this.goodsPrice = 0;
|
|
|
+ this.checkboxValue1 = n;
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (n.indexOf(items.cart.id) > -1) {
|
|
|
+ this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
|
|
|
+ this.goodsPrice +=
|
|
|
+ Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //判断是否全部选中
|
|
|
+ if (
|
|
|
+ this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
|
|
|
+ this.goodsNum != 0
|
|
|
+ ) {
|
|
|
+ this.$refs.tabbar1.cancelAll();
|
|
|
+ } else if (
|
|
|
+ this.checkboxValue1.length <
|
|
|
+ this.goodsNum - this.removeProducts
|
|
|
+ ) {
|
|
|
+ this.$refs.tabbar1.cancelAll("取消");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //购物车全选
|
|
|
+ allSelect() {
|
|
|
+ const all = this.$refs.tabbar1.cancelAll("全选");
|
|
|
+ if (
|
|
|
+ this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
|
|
|
+ all.length == 0
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //判断是否已经全选，如已全选，则取消全选
|
|
|
+ if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
|
|
|
+ this.checkboxValue1 = [];
|
|
|
+ this.goodsPrice = 0;
|
|
|
+ this.goodsWeight = 0;
|
|
|
+ } else {
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ item.goods.map((items) => {
|
|
|
+ //判断是否有商品已被选中
|
|
|
+ if (
|
|
|
+ this.checkboxValue1.indexOf(items.cart.id) == -1 &&
|
|
|
+ items.status != "down"
|
|
|
+ ) {
|
|
|
+ this.checkboxValue1.push(items.cart.id);
|
|
|
+ this.goodsWeight +=
|
|
|
+ items.sku_item[0].weight * items.cart.goods_num;
|
|
|
+ this.goodsPrice +=
|
|
|
+ Number(items.sku_item[0].price) * items.cart.goods_num;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取购物车数据
|
|
|
+ getShopCarList() {
|
|
|
+ uni.$u.http.get(`/api/cart`).then((res) => {
|
|
|
+ this.goodsList = res.data;
|
|
|
+ //循环店铺，获取购物车商品数量
|
|
|
+ this.goodsList.map((item) => {
|
|
|
+ this.goodsNum += item.goods.length;
|
|
|
+ item.goods.map((items) => {
|
|
|
+ if (items.status == "down") {
|
|
|
+ this.removeProducts++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // mounted() {
|
|
|
+ // this.getShopCarList();
|
|
|
+ // },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .back-top {
|
|
|
- position: fixed;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- bottom: 280rpx;
|
|
|
- right: 20rpx;
|
|
|
- z-index: 1000;
|
|
|
-
|
|
|
- .back-icon {
|
|
|
- width: 32rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .back-text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #555;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sold {
|
|
|
- width: 108rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: rgba(0, 0, 0, 0.4);
|
|
|
- border-radius: 18rpx;
|
|
|
- // padding: 0 14rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 36rpx;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ffffff;
|
|
|
- font-style: normal;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-top: -18rpx;
|
|
|
- margin-left: -54rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .delect {
|
|
|
- // width: 68rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 22rpx;
|
|
|
- border: 1rpx solid #ff1515;
|
|
|
- padding: 0 14rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ff1515;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .allweight {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 32rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .sum {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 32rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .summon {
|
|
|
- font-family: JDZhengHT, JDZhengHT;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ff1515;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .settle {
|
|
|
- width: 176rpx;
|
|
|
- height: 68rpx;
|
|
|
- background: #f83224;
|
|
|
- border-radius: 38rpx;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 68rpx;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #f83224;
|
|
|
- border-radius: 12rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .dle {
|
|
|
- width: 136rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 38rpx;
|
|
|
- border: 1rpx solid #979797;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 60rpx;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-swipe-action-item__content {
|
|
|
- flex-direction: row !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-swipe-action-item__right__button__wrapper {
|
|
|
- width: 32px;
|
|
|
- word-wrap: break-word;
|
|
|
- font-size: 20rpx !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-swipe-action-item__right__button__wrapper__text {
|
|
|
- word-wrap: break-word;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-swipe-action-item {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-swipe-action-item__right {
|
|
|
- top: 2rpx !important;
|
|
|
- right: 2rpx !important;
|
|
|
- bottom: 2rpx !important;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- width: 750rpx;
|
|
|
- height: 100rpx;
|
|
|
- background: #ffffff;
|
|
|
- padding: 0 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- border: 1rpx solid rgba(151, 151, 151, 0.4);
|
|
|
- font-family: HarmonyOS_Sans;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .del {
|
|
|
- width: 68rpx;
|
|
|
- height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 44rpx;
|
|
|
- border: 2rpx solid #f83224;
|
|
|
- color: #f83224;
|
|
|
- font-size: 20rpx;
|
|
|
- border-radius: 22rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .box {
|
|
|
- padding: 0rpx 24rpx 20rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .item {
|
|
|
- padding: 36rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 702rpx;
|
|
|
- // height: 556rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- .money {
|
|
|
- font-family: HarmonyOS_Sans_Medium;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ff1515;
|
|
|
- line-height: 26rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .weight {
|
|
|
- font-family: SFPro, SFPro;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 24rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-left: 12rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .goodtab {
|
|
|
- // width: 96rpx;
|
|
|
- height: 32rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- border: 1rpx solid #ff1515;
|
|
|
- padding: 2rpx 8rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- line-height: 32rpx;
|
|
|
- display: inline;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ff1515;
|
|
|
- line-height: 28rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-right: 6rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .goods {
|
|
|
- // width: 284rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #f4f4f4;
|
|
|
- border-radius: 8rpx;
|
|
|
- display: inline;
|
|
|
- text-align: center;
|
|
|
- line-height: 40rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 6rpx 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #555555;
|
|
|
- line-height: 28rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .goodname {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- word-break: break-all;
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .shopname {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
-
|
|
|
- .circle {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shopcart {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 50rpx;
|
|
|
- text-align: right;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .sum {
|
|
|
- font-family: HarmonyOS_Sans;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 32rpx;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .down {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background-color: #c7c7c7;
|
|
|
- opacity: 0.7;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 10000;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.page {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .back-top {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ bottom: 280rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .back-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sold {
|
|
|
+ width: 108rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ border-radius: 18rpx;
|
|
|
+ // padding: 0 14rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-style: normal;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -18rpx;
|
|
|
+ margin-left: -54rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.delect {
|
|
|
+ // width: 68rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ border: 1rpx solid #ff1515;
|
|
|
+ padding: 0 14rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ff1515;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.allweight {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.sum {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.summon {
|
|
|
+ font-family: JDZhengHT, JDZhengHT;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ff1515;
|
|
|
+ line-height: 30rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.settle {
|
|
|
+ width: 176rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ background: #f83224;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ margin-left: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #f83224;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dle {
|
|
|
+ width: 136rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ border: 1rpx solid #979797;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-swipe-action-item__content {
|
|
|
+ flex-direction: row !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-swipe-action-item__right__button__wrapper {
|
|
|
+ width: 32px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ font-size: 20rpx !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-swipe-action-item__right__button__wrapper__text {
|
|
|
+ word-wrap: break-word;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-swipe-action-item {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-swipe-action-item__right {
|
|
|
+ top: 2rpx !important;
|
|
|
+ right: 2rpx !important;
|
|
|
+ bottom: 2rpx !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.num {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ border: 1rpx solid rgba(151, 151, 151, 0.4);
|
|
|
+ font-family: HarmonyOS_Sans;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.del {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44rpx;
|
|
|
+ border: 2rpx solid #f83224;
|
|
|
+ color: #f83224;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.box {
|
|
|
+ padding: 0rpx 24rpx 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 36rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 702rpx;
|
|
|
+ // height: 556rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-family: HarmonyOS_Sans_Medium;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ff1515;
|
|
|
+ line-height: 26rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weight {
|
|
|
+ font-family: SFPro, SFPro;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodtab {
|
|
|
+ // width: 96rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1rpx solid #ff1515;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ display: inline;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ff1515;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ // width: 284rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #f4f4f4;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ display: inline;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 6rpx 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #555555;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodname {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopname {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.shopcart {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.sum {
|
|
|
+ font-family: HarmonyOS_Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.down {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #c7c7c7;
|
|
|
+ opacity: 0.7;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 10000;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+</style>
|
