469 lines
11 KiB
Vue
469 lines
11 KiB
Vue
<template>
|
||
<div class="AppSupermarket">
|
||
<AiTopFixed>
|
||
<!-- <div class="area-content">
|
||
<AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
|
||
<img src="./components/img/local-icon.png" alt="">
|
||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||
<span v-else>请选择</span>
|
||
<u-icon name="arrow-down" color="#666" size="24"/>
|
||
</AiAreaPicker>
|
||
</div> -->
|
||
<div class="header-top">
|
||
<div>区域选择</div>
|
||
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
|
||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||
<span v-else>请选择</span>
|
||
<u-icon name="arrow-right" color="#666" size="24" style="margin-left:4px;" />
|
||
</AiAreaPicker>
|
||
</div>
|
||
</AiTopFixed>
|
||
<div class="goods-list" v-if="numList.length">
|
||
<div class="left">
|
||
<div :class="numIndex == index ? 'item active' : 'item'" v-for="(item, index) in numList" :key="index" @click="numClick(index)">
|
||
<span v-show="item.total > 0">{{ item.total }}</span>
|
||
{{ item.type }}分区
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="item" v-for="(item, index) in goodsList[numIndex]" :key="index">
|
||
<img :src="item.photo[0].url" alt="" />
|
||
<div class="item-info">
|
||
<p class="item-name">{{ item.merchandiseName }}</p>
|
||
<div class="item-point">
|
||
<span class="num">{{ item.costIntegral }}</span
|
||
>积分
|
||
</div>
|
||
<div class="item-bottom">
|
||
<div></div>
|
||
<div class="item-bottom__right">
|
||
<image v-show="item.num > 0" @click="cut(numIndex, index)" src="./components/img/cut.png"/>
|
||
<input v-show="item.num > 0" v-model="item.num" />
|
||
<image src="./components/img/add.png" @click="add(numIndex, index)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AiEmpty description="暂无数据，请选择到村/社区" v-if="!isAreaId && !numList.length"/>
|
||
<AiEmpty description="暂无数据" v-if="isAreaId && !numList.length" />
|
||
<div class="goods-footer" v-if="numList.length">
|
||
<div class="goods-footer__bottom">
|
||
<div class="goods-footer__bottom__left">
|
||
<h3>共{{ total }}件商品</h3>
|
||
<div class="goods-footer__bottom--middle">
|
||
<span>合计 ：</span>
|
||
<i>{{ money }}</i>
|
||
<em>积分</em>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="goods-footer__bottom--btn"
|
||
@click="toOrder"
|
||
hover-class="text-hover"
|
||
>
|
||
去结算
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
|
||
export default {
|
||
name: "AppSuperMarket",
|
||
appName: '积分兑换',
|
||
data() {
|
||
return {
|
||
numList: [],
|
||
numIndex: 0,
|
||
goodsList: [],
|
||
areaId: "",
|
||
areaName: "",
|
||
userInfo: {},
|
||
propAreaId: "",
|
||
isAreaId: false
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
...mapState(["user"]),
|
||
|
||
total() {
|
||
let total = 0;
|
||
if (!this.numList.length) {
|
||
return total;
|
||
}
|
||
|
||
this.numList.forEach((item) => {
|
||
total = item.total + total;
|
||
});
|
||
|
||
return total;
|
||
},
|
||
|
||
money() {
|
||
let money = 0;
|
||
if (!this.goodsList.length) {
|
||
return money;
|
||
}
|
||
|
||
this.goodsList.forEach((arr) => {
|
||
arr.forEach((item) => {
|
||
money = money + Number(item.num) * item.costIntegral;
|
||
});
|
||
});
|
||
|
||
return money;
|
||
},
|
||
},
|
||
|
||
onLoad() {
|
||
this.areaId = this.user.areaId
|
||
if(/[^0]0{0,2}$/.test(this.areaId)) {
|
||
this.isAreaId = true
|
||
this.getList()
|
||
}else {
|
||
this.isAreaId = false
|
||
}
|
||
this.areaName = this.user.areaName || ''
|
||
},
|
||
onShow() {
|
||
document.title = '积分超市'
|
||
},
|
||
methods: {
|
||
toOrder() {
|
||
if (!this.total) {
|
||
return this.$u.toast("请选择商品");
|
||
}
|
||
let goods = [];
|
||
|
||
this.goodsList.forEach((arr) => {
|
||
arr.forEach((item) => {
|
||
if (item.num) {
|
||
goods.push(item);
|
||
}
|
||
});
|
||
});
|
||
|
||
uni.navigateTo({ url: `./SubmitOrder?goods=${JSON.stringify(goods)}&total=${this.total}&money=${this.money}&areaId=${this.areaId}` })
|
||
},
|
||
areaSelect(e) {
|
||
if(/[^0]0{0,2}$/.test(e)) {
|
||
this.areaId = e
|
||
this.isAreaId = true
|
||
this.getList()
|
||
}else {
|
||
this.numList = []
|
||
this.isAreaId = false
|
||
}
|
||
},
|
||
getList() {
|
||
this.$http.post(`/app/appvillagerintegralmerchandise/listByIntegral?areaId=${this.areaId}`).then((res) => {
|
||
if (res.code === 0) {
|
||
if (res.data) {
|
||
this.numList = Object.keys(res.data).map((item) => {
|
||
return {
|
||
type: item,
|
||
total: 0,
|
||
};
|
||
});
|
||
this.goodsList = Object.values(res.data).map((item) => {
|
||
item.map((items) => {
|
||
items.num = 0;
|
||
items.photo = JSON.parse(items.photo);
|
||
|
||
return items;
|
||
});
|
||
|
||
return item;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
add(index, i) {
|
||
this.$set(
|
||
this.goodsList[index][i],
|
||
"num",
|
||
Number(this.goodsList[index][i].num) + 1
|
||
);
|
||
|
||
let total = 0;
|
||
this.goodsList[index].forEach((item) => {
|
||
total = total + item.num;
|
||
});
|
||
|
||
this.$set(this.numList[index], "total", total);
|
||
},
|
||
|
||
cut(index, i) {
|
||
this.$set(
|
||
this.goodsList[index][i],
|
||
"num",
|
||
Number(this.goodsList[index][i].num) - 1
|
||
);
|
||
|
||
let total = 0;
|
||
this.goodsList[index].forEach((item) => {
|
||
total = total + item.num;
|
||
});
|
||
|
||
this.$set(this.numList[index], "total", total);
|
||
},
|
||
|
||
numClick(index) {
|
||
this.numIndex = index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
uni-page-body{
|
||
height: 100%;
|
||
background-color: #fff;
|
||
}
|
||
.header-top {
|
||
display: flex;
|
||
background: #fff;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 16px;
|
||
}
|
||
.area-content {
|
||
width: 100%;
|
||
line-height: 64px;
|
||
|
||
img {
|
||
width: 42px;
|
||
vertical-align: middle;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.u-icon {
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
.item-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 28rpx;
|
||
|
||
.item-bottom__right {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
}
|
||
|
||
image {
|
||
width: 27rpx;
|
||
height: 27rpx;
|
||
}
|
||
|
||
input {
|
||
width: 90rpx;
|
||
height: 60rpx;
|
||
padding: 0 20rpx;
|
||
margin: 0 10rpx;
|
||
background: #f6f6f6;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.goods-footer {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
background: #fff;
|
||
|
||
.goods-footer__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 80rpx;
|
||
padding: 0 30rpx;
|
||
background: #eff4ff;
|
||
color: #333333;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.goods-footer__bottom--btn {
|
||
width: 212rpx;
|
||
height: 104rpx;
|
||
line-height: 104rpx;
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
background: #197df0;
|
||
}
|
||
|
||
.goods-footer__bottom__left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
padding: 0 32rpx;
|
||
|
||
h3 {
|
||
color: #f94246;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.goods-footer__bottom--middle {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
span {
|
||
color: #f94246;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
i {
|
||
position: relative;
|
||
top: 2rpx;
|
||
margin-right: 12px;
|
||
color: #fa444b;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
em {
|
||
color: #f94246;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-footer__bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 104rpx;
|
||
}
|
||
}
|
||
|
||
.AppSupermarket {
|
||
height: 100%;
|
||
overflow-y: hidden;
|
||
.title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #eff4ff;
|
||
padding-left: 30rpx;
|
||
color: #3a7ee2;
|
||
font-size: 28rpx;
|
||
}
|
||
.goods-list {
|
||
// padding-top: 80rpx;
|
||
padding-bottom: 184px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
overflow-y: hidden;
|
||
.left {
|
||
width: 168rpx;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
float: left;
|
||
background: #faf9fb;
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 104rpx;
|
||
line-height: 1.1;
|
||
border-bottom: 2rpx solid #d8e5ff;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
border-left: 6rpx solid #faf9fb;
|
||
|
||
span {
|
||
position: absolute;
|
||
right: 8rpx;
|
||
top: 8rpx;
|
||
// width: 28px;;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
padding: 0 9px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
border-radius: 14px;
|
||
background: #fb4e44;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border-left: 6rpx solid #1d58fe;
|
||
background: linear-gradient(
|
||
270deg,
|
||
#ffffff 0%,
|
||
#ffffff 77%,
|
||
#e7eafa 100%
|
||
);
|
||
}
|
||
}
|
||
.right {
|
||
float: left;
|
||
width: calc(100% - 168rpx);
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
.item {
|
||
width: 100%;
|
||
padding: 28rpx 30rpx 44rpx;
|
||
box-sizing: border-box;
|
||
img {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
border: 2rpx solid #d7d5d5;
|
||
}
|
||
.item-info {
|
||
display: inline-block;
|
||
width: 276rpx;
|
||
padding-left: 30rpx;
|
||
vertical-align: top;
|
||
.item-name {
|
||
width: 100%;
|
||
word-break: break-all;
|
||
line-height: 42rpx;
|
||
margin-bottom: 30rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
}
|
||
.item-point {
|
||
color: #fa4a51;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
line-height: 34rpx;
|
||
.num {
|
||
font-size: 40rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
</style>
|