|
@@ -1,7 +1,73 @@
|
|
<template>
|
|
<template>
|
|
<view class="content">
|
|
<view class="content">
|
|
- <view class="text-area">
|
|
|
|
- <text class="title">{{title}}</text>
|
|
|
|
|
|
+ <view class="top" v-if="list.length !=0">
|
|
|
|
+ <view class="text_1">
|
|
|
|
+ <checkbox class="checkbox" @click="selectAll(false)" :checked="isAll">全选</checkbox>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text_2" v-if="num==0" @click="edit(1)">编辑</view>
|
|
|
|
+ <view class="text_2" v-if="num==1" @click="edit(0)">完成</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="one" v-if="list.length==0&&user._id">
|
|
|
|
+ <view class="logo"><text class="iconfont icon-gouwuche"></text></view>
|
|
|
|
+ <view class="one_1">购物车空空如也~</view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+ <button type="primary" size="mini" @click="toCommon('/pages/home/index')">去逛逛</button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="two" v-if="list.length !=0">
|
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
|
+ <view class="list-scroll-view">
|
|
|
|
+ <checkbox-group name="checkbox" @change="marketChange">
|
|
|
|
+ <view class="list" v-for="(item, index) in list" :key="index">
|
|
|
|
+ <view class="list_2">
|
|
|
|
+ <view class="title">
|
|
|
|
+ <checkbox :value="item.shop" :checked="item.check">
|
|
|
|
+ <text class="iconfont icon-shangdian"></text>
|
|
|
|
+ {{item.shop_name}}
|
|
|
|
+ </checkbox>
|
|
|
|
+ </view>
|
|
|
|
+ <checkbox-group name="checkbox" @change="goodsChange">
|
|
|
|
+ <view class="content" v-for="gs in item.goods" :key="gs.goodsSpec_id">
|
|
|
|
+ <view class="box">
|
|
|
|
+ <checkbox :value="gs.goodsSpec_id" :checked="gs.check" />
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image :src="getFile(gs)"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="one_1" v-if="num==0"
|
|
|
|
+ @click="toCommon('/pagesHome/order/detail',gs)">
|
|
|
|
+ <view class="name">{{gs.goods_name}}</view>
|
|
|
|
+ <view class="info">
|
|
|
|
+ <view class="title_1" v-if="gs.goodsSpec_name">
|
|
|
|
+ <text>规格:{{gs.goodsSpec_name}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="money" v-if="num==0">
|
|
|
|
+ <view>¥{{gs.price}}</view>
|
|
|
|
+ <view>x{{gs.num}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="num" v-if="num==1">
|
|
|
|
+ <uni-number-box @change="changeValue(gs)" name="num" value="gs" :min="1"
|
|
|
|
+ v-model="gs.num" />
|
|
|
|
+ </view>
|
|
|
|
+ <view class="del" v-if="num==1">
|
|
|
|
+ <text class="iconfont icon-del-copy" @click="toDel(gs)"></text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </checkbox-group>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </checkbox-group>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="foot" v-if="list.length !=0">
|
|
|
|
+ <view class="total">总价:<text>¥{{totalMoney}}(不含运费)</text></view>
|
|
|
|
+ <view class="btn" v-if="hasCheck()">
|
|
|
|
+ <button type="primary" size="mini" @click="toSettle()" v-if="num==0">提交订单</button>
|
|
|
|
+ <button type="primary" size="mini" @click="toDel()" v-if="num==1">删除</button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
@@ -10,29 +76,651 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- title: '购物车'
|
|
|
|
|
|
+ // 用户
|
|
|
|
+ user: {},
|
|
|
|
+ // 购物车列表
|
|
|
|
+ list: [],
|
|
|
|
+ // 全选
|
|
|
|
+ isAll: false,
|
|
|
|
+ // 编辑/完成按钮传的数字
|
|
|
|
+ num: 0,
|
|
|
|
+ // 总额
|
|
|
|
+ totalMoney: 0,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- onLoad() {
|
|
|
|
-
|
|
|
|
|
|
+ onShow() {
|
|
|
|
+ const that = this;
|
|
|
|
+ that.searchToken();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
-
|
|
|
|
|
|
+ searchToken() {
|
|
|
|
+ const that = this;
|
|
|
|
+ try {
|
|
|
|
+ const res = uni.getStorageSync('token');
|
|
|
|
+ if (res) {
|
|
|
|
+ that.$set(that, `user`, res);
|
|
|
|
+ that.searchMarket();
|
|
|
|
+ }
|
|
|
|
+ } catch (e) {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: err.errmsg,
|
|
|
|
+ icon: 'error',
|
|
|
|
+ duration: 2000
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 查询购物车信息
|
|
|
|
+ async searchMarket() {
|
|
|
|
+ const that = this;
|
|
|
|
+ const res = await that.$api(`/Cart`, 'GET', {
|
|
|
|
+ user: that.user._id
|
|
|
|
+ });
|
|
|
|
+ if (res.errcode == '0') that.$set(that, `list`, res.data)
|
|
|
|
+ },
|
|
|
|
+ // 编辑
|
|
|
|
+ edit(num) {
|
|
|
|
+ const that = this;
|
|
|
|
+ that.$set(that, `num`, num)
|
|
|
|
+ },
|
|
|
|
+ //全选
|
|
|
|
+ selectAll(e) {
|
|
|
|
+ const that = this;
|
|
|
|
+ const list = that.list;
|
|
|
|
+ const isAll = that.isAll;
|
|
|
|
+ let data = [];
|
|
|
|
+ for (const val of list) {
|
|
|
|
+ let a = isAll ? false : true;
|
|
|
|
+ val.check = a;
|
|
|
|
+ for (let s of val.goods) {
|
|
|
|
+ s.check = a
|
|
|
|
+ }
|
|
|
|
+ data.push(val);
|
|
|
|
+ }
|
|
|
|
+ that.$set(that, `list`, data)
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ // 赋值是否全选
|
|
|
|
+ that.$set(that, `isAll`, isAll ? false : true)
|
|
|
|
+ },
|
|
|
|
+ // 选择店铺
|
|
|
|
+ marketChange(e) {
|
|
|
|
+ const that = this;
|
|
|
|
+ const list = this.list;
|
|
|
|
+ const {
|
|
|
|
+ value
|
|
|
|
+ } = e.detail;
|
|
|
|
+ for (const p1 of list) {
|
|
|
|
+ let p2;
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (p1.is_set == '0') p2 = value.find((i) => i == p1._id);
|
|
|
|
+ else p2 = value.find((i) => i == p1.shop);
|
|
|
|
+ let a = p2 ? true : false;
|
|
|
|
+ p1.check = a;
|
|
|
|
+ for (let s of p1.goods) {
|
|
|
|
+ s.check = a
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ that.$set(that, `list`, list);
|
|
|
|
+ that.marketAllChange();
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ },
|
|
|
|
+ //店铺全部选择true,全选自动选择,
|
|
|
|
+ marketAllChange() {
|
|
|
|
+ const that = this;
|
|
|
|
+ let list = that.list;
|
|
|
|
+ for (let val of list) {
|
|
|
|
+ if (val.check == true) {
|
|
|
|
+ that.$set(that, `isAll`, true)
|
|
|
|
+ } else {
|
|
|
|
+ that.$set(that, `isAll`, false)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ that.$set(that, `list`, list)
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ },
|
|
|
|
+ //选择商品
|
|
|
|
+ goodsChange(e) {
|
|
|
|
+ const that = this;
|
|
|
|
+ let list = that.list;
|
|
|
|
+ const {
|
|
|
|
+ value
|
|
|
|
+ } = e.detail;
|
|
|
|
+ let shop = list.find(f => f.goods.find(i => value.find(s => s == i.goodsSpec_id)))
|
|
|
|
+ if (shop) {
|
|
|
|
+ for (let val of shop.goods) {
|
|
|
|
+ let p2 = value.find((i) => i == val.goodsSpec_id);
|
|
|
|
+ if (p2) val.check = true;
|
|
|
|
+ else val.check = false;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ list = list.map(i => {
|
|
|
|
+ i.goods = i.goods.map(g => ({
|
|
|
|
+ ...g,
|
|
|
|
+ check: false
|
|
|
|
+ }))
|
|
|
|
+ return i;
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ that.$set(that, `list`, list)
|
|
|
|
+ that.goodsAllChange();
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ },
|
|
|
|
+ //商品全部选择true,店铺自动选择,
|
|
|
|
+ // 所有店铺为true,则全选为true
|
|
|
|
+ goodsAllChange() {
|
|
|
|
+ const that = this;
|
|
|
|
+ let list = that.list;
|
|
|
|
+ list = list.map(i => {
|
|
|
|
+ const isAllSelect = i.goods.every(f => f.check);
|
|
|
|
+ if (isAllSelect) i.check = true;
|
|
|
|
+ else i.check = false;
|
|
|
|
+ return i;
|
|
|
|
+ })
|
|
|
|
+ const allSelect = list.every(e => e.check)
|
|
|
|
+ if (allSelect) this.$set(this, `isAll`, true)
|
|
|
|
+ else this.$set(this, `isAll`, false)
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ },
|
|
|
|
+ // 加减商品数量
|
|
|
|
+ async changeValue(value) {
|
|
|
|
+ const that = this;
|
|
|
|
+ this.$nextTick(async () => {
|
|
|
|
+ let res;
|
|
|
|
+ const {
|
|
|
|
+ goodsSpec_id: goodsSpecId,
|
|
|
|
+ num,
|
|
|
|
+ cart_id: cartId
|
|
|
|
+ } = value
|
|
|
|
+ res = await that.$api(`/cart/checkGoodsNum`, 'GET', {
|
|
|
|
+ cartId,
|
|
|
|
+ goodsSpecId,
|
|
|
|
+ num
|
|
|
|
+ });
|
|
|
|
+ if (res.errcode === 0) {
|
|
|
|
+ const {
|
|
|
|
+ enough,
|
|
|
|
+ total
|
|
|
|
+ } = res.data
|
|
|
|
+ if (!enough) {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: `库存最大为${total}`,
|
|
|
|
+ icon: 'error',
|
|
|
|
+ });
|
|
|
|
+ // 将该商品的库存量修改为最大值
|
|
|
|
+ value.num = total;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 计算总额
|
|
|
|
+ that.countMoney();
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 删除, 接口,购物车删除,然后将该数据移除
|
|
|
|
+ async toDel(e) {
|
|
|
|
+ let list = this.list;
|
|
|
|
+ let set_list = [];
|
|
|
|
+ let goods_list = [];
|
|
|
|
+ uni.showModal({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '请选择要删除的商品',
|
|
|
|
+ success: async (res) => {
|
|
|
|
+ if (!res.confirm) return
|
|
|
|
+ if (e?.cart_id) {
|
|
|
|
+ const result = await this.$api(`/cart/${e.cart_id}`, 'Delete');
|
|
|
|
+ if (result.errcode === 0) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ set_list = list.filter(i => i.is_set == '0')
|
|
|
|
+ goods_list = list.filter(i => i.is_set !== '0')
|
|
|
|
+ set_list = set_list.filter(i => i.cart_id !== e.cart_id)
|
|
|
|
+ goods_list = goods_list.map(i => ({
|
|
|
|
+ ...i,
|
|
|
|
+ goods: i.goods.filter(f => f.cart_id !== e.cart_id)
|
|
|
|
+ }))
|
|
|
|
+ this.$set(this, `list`, [...set_list, ...goods_list]);
|
|
|
|
+ // 检查店铺内是否还有商品
|
|
|
|
+ this.checkShopGoodsExist();
|
|
|
|
+ // 计算总额
|
|
|
|
+ this.countMoney();
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ let goodsList = [];
|
|
|
|
+ let cartIds = [];
|
|
|
|
+ for (let val of this.list) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (val.is_set == '0') goodsList.push(val)
|
|
|
|
+ else goodsList.push(val.goods)
|
|
|
|
+ }
|
|
|
|
+ for (let val of goodsList) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (val.is_set == '0') {
|
|
|
|
+ if (val.check) cartIds.push(val.cart_id)
|
|
|
|
+ } else {
|
|
|
|
+ for (let set of val) {
|
|
|
|
+ if (set.check) cartIds.push(set.cart_id)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ set_list = list.filter(i => i.is_set == '0')
|
|
|
|
+ goods_list = list.filter(i => i.is_set !== '0')
|
|
|
|
+ for (let val of cartIds) {
|
|
|
|
+ const result = await this.$api(`/cart/${val}`, 'Delete');
|
|
|
|
+ if (result.errcode === 0) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ set_list = set_list.filter(i => i.cart_id !== val)
|
|
|
|
+ goods_list = goods_list.map(i => ({
|
|
|
|
+ ...i,
|
|
|
|
+ goods: i.goods.filter(f => f.cart_id !== val)
|
|
|
|
+ }))
|
|
|
|
+ this.$set(this, `list`, [...set_list, ...goods_list]);
|
|
|
|
+ // 检查店铺内是否还有商品
|
|
|
|
+ this.checkShopGoodsExist();
|
|
|
|
+ // 计算总额
|
|
|
|
+ this.countMoney();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //检查店铺内是否还有商品
|
|
|
|
+ checkShopGoodsExist() {
|
|
|
|
+ let list = this.list;
|
|
|
|
+ list = list.filter(f => f.goods && f.goods.length > 0)
|
|
|
|
+ this.$set(this, `list`, list);
|
|
|
|
+ },
|
|
|
|
+ // 计算总额
|
|
|
|
+ countMoney() {
|
|
|
|
+ const that = this;
|
|
|
|
+ const list = that.list;
|
|
|
|
+ let totalMoney = 0;
|
|
|
|
+ // 渲染结束执行下面方法
|
|
|
|
+ that.$nextTick(() => {
|
|
|
|
+ for (const val of list) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (val.is_set == '0') {
|
|
|
|
+ if (val.check == true) {
|
|
|
|
+ let total = that.$multiply(val.sell_money, val.num);
|
|
|
|
+ totalMoney += Number(total);
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ for (let s of val.goods) {
|
|
|
|
+ if (s.check == true) {
|
|
|
|
+ let total = that.$multiply(s.price, s.num);
|
|
|
|
+ totalMoney += Number(total);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ that.$set(that, `totalMoney`, totalMoney.toFixed(2))
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getFile(data) {
|
|
|
|
+ const file = data.file;
|
|
|
|
+ if (!file) return '';
|
|
|
|
+ if (file.length && file.length > 0) return file[0].url
|
|
|
|
+ },
|
|
|
|
+ // 去结算
|
|
|
|
+ async toSettle() {
|
|
|
|
+ // 将选中的购物车放到数组中,传回服务端进行检查.然后拿着key去订单页请求数据
|
|
|
|
+ let goodsList = [];
|
|
|
|
+ let cartIds = [];
|
|
|
|
+ for (let val of this.list) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (val.is_set == '0') goodsList.push(val)
|
|
|
|
+ else goodsList.push(val.goods)
|
|
|
|
+ }
|
|
|
|
+ for (let val of goodsList) {
|
|
|
|
+ // 判断是套装还是正常商品
|
|
|
|
+ if (val.is_set == '0') {
|
|
|
|
+ if (val.check) cartIds.push(val.cart_id)
|
|
|
|
+ } else {
|
|
|
|
+ for (let set of val) {
|
|
|
|
+ if (set.check) cartIds.push(set.cart_id)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ const res = await this.$api(`/util/checkCartBuy`, 'POST', {
|
|
|
|
+ cartIds
|
|
|
|
+ });
|
|
|
|
+ if (res.errcode == '0') {
|
|
|
|
+ const {
|
|
|
|
+ data
|
|
|
|
+ } = res
|
|
|
|
+ if (data.result) {
|
|
|
|
+ const key = data.key;
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: `/pagesHome/order/order?key=${key}`
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 是否选中商品,控制提交订单按钮
|
|
|
|
+ hasCheck() {
|
|
|
|
+ return this.list.some(e => e.goods.some(eg => eg.check))
|
|
|
|
+ },
|
|
|
|
+ // 公共跳转
|
|
|
|
+ toCommon(route, e) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: `${route}?id=${e && e.goods_id}`
|
|
|
|
+ })
|
|
|
|
+ },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
|
|
+<style lang="scss">
|
|
.content {
|
|
.content {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 92vh;
|
|
|
|
+ background-color: var(--footColor);
|
|
|
|
+
|
|
|
|
+ .top {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ background-color: var(--mainColor);
|
|
|
|
+ height: 35px;
|
|
|
|
+ margin: 0 0 4px 0;
|
|
|
|
+ padding: 5px 4vw;
|
|
|
|
+
|
|
|
|
+ .text_1 {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .text_2 {
|
|
|
|
+ line-height: 35px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .one {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin: 2vw 0;
|
|
|
|
+
|
|
|
|
+ .logo {
|
|
|
|
+ margin: 10vw 0 2vw 0;
|
|
|
|
+
|
|
|
|
+ .iconfont {
|
|
|
|
+ font-size: 35vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .one_1 {
|
|
|
|
+ margin: 3vw 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ button {
|
|
|
|
+ background-color: var(--f3CColor);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .two {
|
|
|
|
+ position: relative;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ margin: 0 2vw;
|
|
|
|
+
|
|
|
|
+ .list_1 {
|
|
|
|
+ background-color: var(--mainColor);
|
|
|
|
+ margin: 2vw 0 2vw 0;
|
|
|
|
+ padding: 2vw 3vw;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ border-bottom: 1px solid var(--fcColor);
|
|
|
|
+ padding: 0 0 2vw 0;
|
|
|
|
+ font-size: var(--font18Size);
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ margin: 0 1vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ padding: 2vw 0;
|
|
|
|
+ font-size: var(--font16Size);
|
|
|
|
+ border-bottom: 1px dashed var(--fcColor);
|
|
|
|
+
|
|
|
|
+ .img {
|
|
|
|
+ width: 20vw;
|
|
|
|
+ height: 20vw;
|
|
|
|
+ border-radius: 2vw;
|
|
|
|
+ border: 1px solid var(--fcColor);
|
|
|
|
+
|
|
|
|
+ image {
|
|
|
|
+ width: 20vw;
|
|
|
|
+ height: 20vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .one_1 {
|
|
|
|
+ margin: 0 2.5vw;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .info {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+
|
|
|
|
+ .title_1 {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #666;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ background-color: #eee;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .money {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-top: 2vw;
|
|
|
|
+ text-align: right;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .total {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 1vw;
|
|
|
|
+
|
|
|
|
+ .total_1 {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: var(--fFB1Color);
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .total_2 {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .del {
|
|
|
|
+ margin: 0 0 0 3vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list_2 {
|
|
|
|
+ background-color: var(--mainColor);
|
|
|
|
+ margin: 2vw 0 2vw 0;
|
|
|
|
+ padding: 2vw 3vw;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ border-bottom: 1px solid var(--fcColor);
|
|
|
|
+ padding: 0 0 2vw 0;
|
|
|
|
+ font-size: var(--font18Size);
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ margin: 0 1vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ padding: 2vw 0;
|
|
|
|
+ font-size: var(--font16Size);
|
|
|
|
+ border-bottom: 1px dashed var(--fcColor);
|
|
|
|
+
|
|
|
|
+ .box {
|
|
|
|
+ line-height: 20vw;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .img {
|
|
|
|
+ width: 20vw;
|
|
|
|
+ height: 20vw;
|
|
|
|
+ border-radius: 2vw;
|
|
|
|
+ border: 1px solid var(--fcColor);
|
|
|
|
+
|
|
|
|
+ image {
|
|
|
|
+ width: 20vw;
|
|
|
|
+ height: 20vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .one_1 {
|
|
|
|
+ margin: 0 2.5vw;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+
|
|
|
|
+ .info {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+
|
|
|
|
+ .title_1 {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #666;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ background-color: #eee;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .gift {
|
|
|
|
+ margin: 2vw 1vw 0 0;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #FFA500;
|
|
|
|
+ border: 1px solid #FFA500;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ padding: 0 1vw;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .act {
|
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ padding: 0 1vw;
|
|
|
|
+ border: 1px solid var(--fFB1Color);
|
|
|
|
+ color: var(--fFB1Color);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .money {
|
|
|
|
+ margin-top: 2vw;
|
|
|
|
+ text-align: right;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .num {
|
|
|
|
+ margin: 6vw 4vw;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .del {
|
|
|
|
+ margin: 6vw 0;
|
|
|
|
+ text-align: right;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .foot {
|
|
|
|
+ background-color: var(--fffColor);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ height: 44px;
|
|
|
|
+ padding: 0 0 0 6vw;
|
|
|
|
+ border-right: 1px solid var(--f99Color);
|
|
|
|
+
|
|
|
|
+ .total {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-content: flex-end;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ color: var(--fFB1Color);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ button {
|
|
|
|
+ width: 30vw;
|
|
|
|
+ height: 44px;
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ border-radius: 0px;
|
|
|
|
+ background-color: var(--fFB1Color);
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ font-size: var(--font15Size);
|
|
|
|
+ color: var(--fffColor);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- .text-area {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
|
|
+ .scroll-view {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+
|
|
|
|
+ .list-scroll-view {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ // 复选框样式
|
|
|
|
+ checkbox .wx-checkbox-input {
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border-color: var(--f99Color);
|
|
|
|
+ background-color: var(--mainColor);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 复选框选中样式
|
|
|
|
+ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
|
|
|
+ border-color: var(--fFB1Color);
|
|
|
|
+ background-color: var(--fFB1Color);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 复选框选中之后对号的样式
|
|
|
|
+ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
|
|
|
+ color: var(--fffColor);
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|