kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cv

Browse Source
This commit is contained in:
liuye
2024-07-05 08:48:30 +08:00
parent 217a687c95
commit 4e07b5c13e
9 changed files with 1722 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/project/wuxi/AppMine/myIntegral.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div class="myIntegral">
<div class="header-content">
<div class="top">
<div class="total">
<h1>{{info.integral || '0'}}</h1>
<p>积分余额</p>
</div>
<div class="total right-total">
<h1>{{info.houseIntegral || '0'}}</h1>
<p>家庭积分</p>
</div>
</div>
<div class="bottom">
<div class="item">
<div class="num">{{ info.serialNo || '0'}}</div>
<div class="label">积分排行</div>
</div>
<div class="item">
<div class="num">{{ info.totalIntegral|| '0'}}</div>
<div class="label">历史累计获取</div>
</div>
</div>
<img src="https://cdn.cunwuyun.cn/dvcp/credit/head.png" alt="">
</div>
<div class="detail-content" v-if="list && list.length">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="item-info">
<p>{{ item.integralRuleName || ''}}
<span v-if="item.integralRuleName && item.eventDesc">:</span>
{{ item.eventDesc || '' }}</p>
<span>&nbsp;&nbsp;&nbsp;{{ item.doTime }}</span>
</div>
<div class="item-num" :class="'color-'+ item.integralCalcType">
{{ (item.integralCalcType == 1 ? '+' : '-') + item.changeIntegral }}
</div>
</div>
</div>
<AiEmpty v-else/>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "myIntegral",
appName: "我的积分",
computed: {
...mapState(['user', 'token'])
},
data() {
return {
info: {},
current: 1,
list: [],
}
},
mounted() {
this.getToatl()
},
methods: {
getToatl() {
this.$instance.post(`/app/appintegraluser/integralUserInfoFD`).then(res => {
if (res?.data) {
this.info = res.data
this.getList()
}
})
},
getList() {
this.$instance.post(`/app/appintegraldetail/list?integralUserId=${this.info.id}&current=${this.current}&size=10`).then(res => {
if (res?.data) {
if (this.current > res.data.pages) {
return
}
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
}
})
},
},
onReachBottom() {
this.current++
this.getList()
}
}
</script>
<style scoped lang="scss">
.myIntegral {
width: 100vw;
overflow-x: hidden;
height: calc(100% - 136px);
background-color: #f3f6f9;
padding-bottom: 30px;
.header-content {
width: 690px;
height: 358px;
background: #FFF;
border-radius: 16px;
margin: 70px 0 40px 30px;
position: relative;
.top {
width: 100%;
height: 213px;
z-index: 99;
position: relative;
.total {
width: 50%;
padding-top: 48px;
box-sizing: border-box;
text-align: center;
h1 {
font-size: 68px;
color: #5AAD6A;
}
p {
font-size: 28px;
font-weight: 400;
color: #999999;
}
}
.right-total {
position: absolute;
top: 0;
right: 0;
h1 {
color: #4083E9;
}
}
}
.bottom {
display: flex;
justify-content: space-around;
width: 100%;
height: 145px;
padding: 16px 0;
box-sizing: border-box;
border-top: 2px solid #EEEEEE;
.item {
text-align: center;
z-index: 99;
.num {
font-family: DIN;
font-size: 48px;
font-weight: bold;
color: #333333;
}
.label {
font-size: 24px;
color: #999;
margin-top: 10px;
}
}
}
img {
position: absolute;
width: 360px;
height: 250px;
top: -40px;
right: 0;
}
}
.detail-content {
width: 690px;
background: #FFF;
border-radius: 16px;
margin: 0 0 0 32px;
padding: 16px 30px;
box-sizing: border-box;
.item {
padding: 34px 0 32px 0;
border-bottom: 2px solid #ddd;
display: flex;
.item-info {
width: 500px;
p {
word-break: break-all;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333;
line-height: 44px;
}
span {
display: inline-block;
margin-top: 8px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 34px;
}
}
.item-num {
width: calc(100% - 500px);
text-align: right;
font-size: 36px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 50px;
}
}
.item:last-child {
border-bottom: none;
}
}
.color-1 {
color: #2C51CE !important;
}
.color-0 {
color: #E6736E !important;
}
}
</style>

377
src/project/wuxi/AppRedemptionPoints/AppRedemptionPoints.vue Normal file
View File

@@ -0,0 +1,377 @@
<template>
<div class="AppRedemptionPoints">
<div class="fixed-top">
<div class="header">
<div class="num">
<p>积分余额</p>
<h3>{{total}}</h3>
</div>
<div class="btn" @click="toMyOrder">我的订单</div>
</div>
<div class="search">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1"
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
<div class="type-select">
<div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
{{item}}
<span v-if="index == 1" class="down-icon">⏷</span>
</div>
</div>
<div class="point-select" v-if="currentType == 1">
<u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666"
active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
</div>
</div>
</div>
<div class="list-content">
<div class="left-list" v-if="leftList.length">
<div class="list-info" v-for="(item, index) in leftList" :key="index">
<div class="item" @click="toProductDetail(item)">
<img :src="item.picUrl" alt="">
<div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
<div class="content">
<p class="text">{{item.title}}</p>
<div class="item-money">
<h3>{{item.integralPrice}}积分</h3>
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
<span v-if="item.type == 1">兑换后再付</span>
</div>
<div v-if="item.shopStatus == 1">
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
<div class="btn btn0" v-else>商品缺货</div>
</div>
<div v-else>
<div class="btn btn0">店铺停用</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-list" v-if="rightList.length">
<div class="list-info" v-for="(item, index) in rightList" :key="index">
<div class="item" @click="toProductDetail(item)">
<img :src="item.picUrl" alt="">
<div class="type" :class="`type`+item.type">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
<div class="content">
<p class="text">{{item.title}}</p>
<div class="item-money">
<h3>{{item.integralPrice}}积分</h3>
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
<span v-if="item.type == 1">兑换后再付</span>
</div>
<div v-if="item.shopStatus == 1">
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
<div class="btn btn0" v-else>商品缺货</div>
</div>
<div v-else>
<div class="btn btn0">店铺停用</div>
</div>
</div>
</div>
</div>
</div>
<AiEmpty v-if="!goodsList.length"></AiEmpty>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'AppRedemptionPoints',
appName: '积分兑换',
data() {
return {
tabList: [{name: '全部'}, {name: '积分兑换'}, {name: '低价商品'}],
currentTabs: 0,
barStyle: {
'width': '20px',
'height': '3px',
'border-radius': '2px',
'bottom': '-3px',
'background': '#2D7DFF'
},
typeList: ['最新上架', '积分', '我可兑换的'],
currentType: 0,
pointTypeList: [{name: '全部'}, {name: '50分以下'}, {name: '100分以下'}, {name: '200分以下'}, {name: '5000分以下'}],
currentPoint: 0,
goodsList: [],
leftList: [],
rightList: [],
total: 0,
current: 1
}
},
computed: {
...mapState(['user']),
},
onLoad() {
this.getTotal()
this.$dict.load(['integralSGTypeText']).then(() => {
this.getList()
})
uni.$on('updateGoodsList', () => {
this.getListInit()
})
},
onShow() {
this.getTotal()
},
methods: {
getTotal() {
this.$instance.post(`/app/appintegraluser/integralUserInfoFD`).then(res => {
if (res?.data) {
this.total = res.data.integral || 0
}
})
},
getListInit() {
this.goodsList = []
this.leftList = []
this.rightList = []
this.current = 1
this.getList()
},
getList() {
this.$instance.post(`/app/appintegralsupermarketshop/goodsListXCX`, null, {
params: {
goodsType: this.currentTabs, //商品类型，0：全部、1：积分兑换、2：京东低价商品，默认0
orderType: this.currentType == 0 ? 1 : 0, //排序类型，0：积分升序、1：上架时间倒序，默认0
filterIntegral: this.currentType == 2 ? true : false, //过滤我可兑换的，默认false
integralRange: this.currentType == 1 ? this.currentPoint : '', //积分区间类型，0：全部、1：50分以下、2:100分以下、3：200分以下、4：5000分以下默认0
current: this.current
}
}).then(res => {
if (res.code === 0) {
this.goodsList = this.current == 1 ? res.data.records : [...this.goodsList, ...res.data.records]
res.data.records.map((item, index) => {
item.typeText = item.type == 0 ? 0 : 1
if(index%2 ==0) {
this.leftList.push(item)
}else {
this.rightList.push(item)
}
})
}
})
},
changeTab(index) {
this.currentTabs = index
this.getListInit()
},
typeClick(index) {
this.currentType = index
this.getListInit()
},
pointClick(index) {
this.currentPoint = index
this.getListInit()
},
toProductDetail(item) {
uni.navigateTo({url: `./productDetails?shopGoodsId=${item.shopGoodsId}&total=${this.total}`})
},
toMyOrder() {
uni.navigateTo({url: './myOrderList'})
},
toOrder(item) {
if(this.total >= item.integralPrice && item.stock > 0) {
uni.navigateTo({url: `./placeOrder?shopGoodsId=${item.shopGoodsId}&total=${this.total}&backLevel=3`})
}
},
},
onReachBottom() {
this.current ++
this.getList()
},
}
</script>
<style lang="scss" scoped>
.AppRedemptionPoints {
.fixed-top {
background-color: #f3f6f9;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.header {
display: flex;
justify-content: space-between;
padding: 32px 24px;
background-color: #fff;
margin-bottom: 24px;
.num {
p {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24px;
color: #999;
line-height: 34px;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 66px;
color: #FF6900;
line-height: 92px;
}
}
.btn {
width: 168px;
height: 64px;
border: 1px solid #4181FF;
line-height: 62px;
border-radius: 44px;
box-sizing: border-box;
text-align: center;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 26px;
color: #4181FF;
margin-top: 28px;
}
}
.search {
background-color: #fff;
.type-select {
display: flex;
border-top: 1px solid #D8D8D8;
line-height: 84px;
.item {
flex: 1;
text-align: center;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #8891A1;
.down-icon {
display: inline-block;
margin-left: 8px;
transition: all 0.3s ease-in-out;
transform: rotate(0deg);
}
}
.active {
color: #4181FF;
.down-icon {
transform: rotate(180deg);
}
}
}
}
.list-content {
padding: 396px 0 24px 24px;
background-color: #f3f6f9;
overflow: hidden;
.left-list,
.right-list {
width: 50%;
float: left;
}
.list-info {
width: 100%;
}
.item {
width: calc(100% - 24px);
background-color: #fff;
border-radius: 20px;
position: relative;
margin-bottom: 24px;
img {
width: 100%;
height: 340px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.type {
padding: 8px 16px;
font-family: PingFangSC-Regular;
font-size: 20px;
line-height: 28px;
color: #FFF;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
position: absolute;
top: 0;
right: 0;
}
.type2 {
background-color: #E64E39;
}
.type1 {
background-color: #E64E39;
}
.type0 {
background-color: #FF6900;
}
.content {
padding: 16px 16px 24px;
position: relative;
background-color: #fff;
.text {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 26px;
color: #222;
line-height: 38px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 12px;
}
.item-money {
width: calc(100% - 160px);
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
}
p {
font-family: PingFangSC;
font-weight: 600;
font-size: 26px;
color: #4181FF;
}
span {
display: inline-block;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 20px;
color: #4181FF;
line-height: 22px;
}
}
.btn {
padding: 14px 32px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 22px;
line-height: 28px;
border-radius: 44px;
position: absolute;
bottom: 24px;
right: 16px;
}
.btn1 {
background-color: #2D7DFF;
color: #FFF;
}
.btn0 {
background-color: #E2E2E2;
color: #666;
}
}
}
.item:nth-of-type(2n-1) {
margin-right: 22px;
}
}
}
</style>

BIN
src/project/wuxi/AppRedemptionPoints/img/success.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

20
src/project/wuxi/AppRedemptionPoints/jdH5.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="jdH5">
<web-view :src="goodsJdUrl"></web-view>
</div>
</template>
<script>
export default {
name: 'jdH5',
data() {
return {
goodsJdUrl: ''
}
},
onLoad(option) {
this.goodsJdUrl = option.goodsJdUrl
},
}
</script>

315
src/project/wuxi/AppRedemptionPoints/myOrderList.vue Normal file
View File

@@ -0,0 +1,315 @@
<template>
<div class="myOrderList">
<div class="fixed-top">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="90" font-size="28" bg-color="#fff" inactive-color="#8891A1"
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
</div>
<div class="list-content" v-if="list.length">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="time-flex">
<p>{{item.createTime.substring(0, 16)}}</p>
<div :class="`status`+item.status">{{ $dict.getLabel('integralSGOStatus', item.status) }}</div>
</div>
<div class="flex">
<img :src="item.goodsPicUrl" alt="">
<div class="type" :class="`type`+item.goodsTypeText">{{ $dict.getLabel('integralSGTypeText', item.goodsTypeText) }}</div>
<div class="flex-right">
<p>{{item.goodsTitle}}</p>
<div class="num-flex">
<h3>{{item.usedIntegral}}积分<span v-if="item.goodsType == 2">+{{item.payMoney}}元</span></h3>
<div>x {{item.quantity}}</div>
</div>
</div>
</div>
<p class="tips" v-if="item.goodsType == 2"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
<p class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</p>
<p class="remark" v-if="item.remarks">备注：{{item.remarks}}</p>
<div class="flex-btn" v-if="item.goodsType == 2 && item.status != 2">
<p></p>
<div class="btn confirm" @click="openJd(item)">去购买</div>
</div>
<div class="flex-btn" v-if="item.goodsType != 2">
<p>核销码:<span>{{item.verificationCode}}</span></p>
<div class="btn" v-if="item.status == 0" @click="cancel(item)">取消订单</div>
</div>
</div>
</div>
<AiEmpty v-else></AiEmpty>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'myOrderList',
appName: '我的订单',
data() {
return {
tabList: [{name: '全部'}, {name: '待核销'}, {name: '已完成'}, {name: '已取消'}],
currentTabs: 0,
barStyle: {
'width': '20px',
'height': '3px',
'border-radius': '2px',
'bottom': '3px',
'background': '#2D7DFF'
},
list: [],
current: 1
}
},
computed: {
...mapState(['user']),
},
onLoad() {
this.$dict.load(['integralSGOStatus', 'integralSGTypeText']).then(() => {
this.getList()
})
},
methods: {
changeTab(index) {
this.currentTabs = index
this.getListInit()
},
getListInit() {
this.current = 1
this.getList()
},
getList() {
this.$instance.post(`/app/appintegralsupermarketorder/listForXCX`, null, {
params: {
current: this.current,
status: this.currentTabs == 0 ? '' : this.currentTabs - 1,
createUserId: this.user.id
}
}).then(res => {
if (res.code === 0) {
res.data.records.map((item) => {
item.goodsTypeText = item.goodsType == 0 ? 0 : 1
})
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
}
})
},
openJd(item) {
if(item.goodsType == 1) {
uni.navigateTo({url: `./jdH5?goodsJdUrl=${item.goodsJdUrl}`})
}else {
uni.navigateToMiniProgram({
appId: item.goodsJdAppid,
path: item.goodsJdUrl
})
}
},
cancel(item) {
uni.showModal({
title: '确认取消此订单？',
content: '取消订单后，积分将退回至积分余额',
confirmColor: "#2D7DFF",
cancelColor: "#2D7DFF",
cancelText: "我在想想",
confirmText: "确认取消",
success: (res) => {
if (res.confirm) {
this.cancelOrder(item)
}
}
});
},
cancelOrder(item) {
this.$instance.post(`/app/appintegralsupermarketorder/cancelForXCX?id=${item.id}`).then(res => {
if (res.code === 0) {
this.getListInit()
uni.$emit('updateGoodsList')
}
})
},
},
onReachBottom() {
this.current = this.current + 1
this.getList()
},
}
</script>
<style lang="scss" scoped>
.myOrderList {
min-height: 100%;
.fixed-top {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.list-content {
padding: 112px 24px 24px;
background-color: #F3F6F9;
.item {
width: 100%;
background: #FFF;
border-radius: 16px;
margin-bottom: 32px;
.time-flex {
padding: 0 32px;
line-height: 64px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
div {
color: #2D7DFF;
}
.status2 {
color: #999;
}
}
.flex {
padding: 32px 32px 0;
display: flex;
position: relative;
margin-bottom: 20px;
img {
width: 166px;
height: 166px;
border-radius: 16px;
margin-right: 20px;
}
.type {
position: absolute;
left: 32px;
bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
width: 166px;
text-align: center;
line-height: 34px;
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FFF;
p {
scale: 0.9;
}
}
.type2 {
background-color: #E64E39;
}
.type1 {
background-color: #E64E39;
}
.type0 {
background-color: #FF6900;
}
.flex-right {
width: calc(100% - 186px);
p {
word-break: break-all;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #222;
line-height: 34px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 50px;
}
.num-flex {
display: flex;
h3 {
width: calc(100% - 100px);
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
span {
display: inline-block;
font-size: 34px;
color: #4181FF;
margin-left: 8px;
}
}
div {
width: 100px;
text-align: right;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 24px;
color: #222;
line-height: 48px;
}
}
}
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
margin: 0 32px 16px 32px;
span {
display: inline-block;
scale: 0.9;
}
}
.remark {
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
line-height: 34px;
word-break: break-all;
margin: 0 32px 24px 32px;
}
.flex-btn {
padding: 0 32px 32px;
display: flex;
justify-content: space-between;
p {
height: 56px;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
span {
display: inline-block;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 28px;
color: #2D7DFF;
margin-left: 8px;
}
}
.btn {
width: 136px;
text-align: center;
line-height: 54px;
border: 1px solid #CCC;
border-radius: 44px;
font-family: PingFangSC-Regular;
font-size: 22px;
color: #666;
}
.confirm {
border: 1px solid #2D7DFF;
background-color: #2D7DFF;
color: #fff;
}
}
}
}
}
</style>

291
src/project/wuxi/AppRedemptionPoints/placeOrder.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<div class="placeOrder">
<div class="header-info">
<div class="flex">
<img :src="goodsInfo.picUrl" alt="">
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
<div class="flex-right">
<p>{{goodsInfo.title}}</p>
<div>
<u-number-box v-model="goodsNum" @change="valChange" input-height="44" size="24" :min="1" :max="goodsInfo.stock"></u-number-box>
</div>
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 2">+￥{{goodsInfo.payMoney}}.00</span></h3>
</div>
</div>
<p class="tips" v-if="goodsInfo.type == 2">兑换成功后，点击「去购买」前往京东低价购买</p>
<p class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</p>
</div>
<div class="content">
<div class="item-flex" @click="show=true">
<div class="label">订单备注</div>
<div class="value" :class="value ? '' : 'color-999'">{{value || '无备注'}}<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
</div>
<div class="item-flex">
<div class="label">积分余额</div>
<div class="value color-FF6900">{{total}}积分</div>
</div>
<div class="item-flex">
<div class="label">支付积分</div>
<div class="value">减{{(goodsNum*goodsInfo.integralPrice).toFixed(2)}}积分</div>
</div>
<div class="item-flex" v-if="goodsInfo.type == 2">
<div class="label">京东支付</div>
<div class="value color-999">¥{{(goodsNum*goodsInfo.payMoney).toFixed(2)}}</div>
</div>
</div>
<u-popup v-model="show" mode="bottom">
<div class="textarea">
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
<p>字数{{value.length}}/1000</p>
</div>
<div class="btn">
<span @click="value=''">清空内容</span>
<span class="confirm" @click="confirm">保存</span>
</div>
</u-popup>
<div class="bottom-btn" @click="confirmOrder()">
<div>提交订单</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'placeOrder',
appName: '提交订单',
data() {
return {
value: '',
show: false,
total: 0,
goodsInfo: {},
goodsNum: 1,
backLevel: 0
}
},
computed: {
...mapState(['user']),
},
onLoad(option) {
this.shopGoodsId = option.shopGoodsId
this.total = option.total
this.backLevel = option.backLevel
this.$dict.load(['integralSGTypeText']).then(() => {
this.getDetail()
})
},
methods: {
getDetail() {
this.$instance.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
if (res.code === 0) {
this.goodsInfo = res.data
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
}
})
},
valChange(e) {
this.goodsNum = e.value
},
confirm() {
this.show = false
},
confirmOrder() {
this.$instance.post(`/app/appintegralsupermarketorder/add`, {
shopId: this.goodsInfo.shopId,
goodsId: this.goodsInfo.id,
remarks: this.value,
quantity: this.goodsNum
}).then(res => {
if (res.code === 0) {
uni.$emit('updateGoodsList')
this.toSuccess()
}
})
},
toSuccess() {
var integralPrice = this.goodsNum*this.goodsInfo.integralPrice
uni.navigateTo({url: `./successOrder?integralPrice=${integralPrice}&backLevel=${this.backLevel}&shopGoodsId=${this.goodsInfo.shopGoodsId}`})
}
},
}
</script>
<style lang="scss" scoped>
.placeOrder {
.header-info {
padding: 48px 32px;
background-color: #fff;
margin-bottom: 24px;
.flex {
margin-bottom: 32px;
display: flex;
position: relative;
img {
width: 166px;
height: 166px;
border-radius: 16px;
margin-right: 20px;
}
.type {
position: absolute;
left: 0;
bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
width: 166px;
text-align: center;
line-height: 34px;
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FFF;
p {
scale: 0.9;
}
}
.type2 {
background-color: #E64E39;
}
.type1 {
background-color: #E64E39;
}
.type0 {
background-color: #FF6900;
}
.flex-right {
width: calc(100% - 186px);
p {
word-break: break-all;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #222;
line-height: 34px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 22px;
}
div {
text-align: right;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
span {
display: inline-block;
font-size: 34px;
color: #4181FF;
margin-left: 8px;
}
}
}
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
span {
display: inline-block;
scale: 0.9;
}
}
}
.content {
padding: 0 32px;
background-color: #fff;
.item-flex {
display: flex;
padding: 30px 0;
font-size: 26px;
line-height: 34px;
font-family: PingFangSC-Regular;
.label {
color: #222;
width: 120px;
}
.value {
width: calc(100% - 120px);
text-align: right;
color: #222;
}
.color-FF6900 {
color: #FF6900;
}
.color-999 {
color: #999;
}
}
}
.textarea {
margin: 32px 32px 24px;
width: calc(100% - 64px);
padding: 16px;
box-sizing: border-box;
background: #f7f7f7;
border-radius: 8px;
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
text-align: right;
}
}
.btn {
padding: 0 32px 24px;
height: 64px;
display: flex;
justify-content: space-between;
span {
display: inline-block;
line-height: 64px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
}
.confirm {
width: 144px;
text-align: center;
background: #1365dd;
border-radius: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #fff;
}
}
.bottom-btn {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 20px 32px;
box-sizing: border-box;
div {
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
background: #4181FF;
}
}
}
</style>

165
src/project/wuxi/AppRedemptionPoints/pointsPublicity.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="pointsPublicity">
<div class="header">
<img :src="`${cdn}/publicity-header.png`" alt="">
<div class="title">{{user.girdName}}积分公示</div>
</div>
<div class="list-content">
<div class="item" v-for="(item, index) in list" :key="index">
<span class="blue-tips"></span>
<p class="title">{{item.classOne}}</p>
<div class="item-info">
<p class="mini-title">{{item.classTwo}}</p>
<div class="text-flex">
<p>{{item.classThree}}</p>
<div>
<img :src="`${cdn}/star-icon.png`" alt="">+{{item.integral}}
</div>
</div>
</div>
</div>
<AiEmpty v-if="!list.length"></AiEmpty>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
export default {
name: 'pointsPublicity',
appName: '积分公示',
data() {
return {
cdn: "https://cdn.cunwuyun.cn/fengdu",
list: [],
current: 1
}
},
computed: {
...mapState(['user']),
},
onLoad() {
this.getAuth()
},
methods: {
...mapActions(['getUserInfo']),
getList() {
this.$instance.post(`/app/appintegralpublicityinfo/list?current=${this.current}&girdId=${this.user.girdId}`).then(res => {
if (res.code === 0) {
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
}
})
},
getAuth() {
this.$nextTick(() => {
this.getUserInfo('qujing')
this.getList()
})
},
},
onReachBottom() {
this.current++
this.getList()
}
}
</script>
<style lang="scss" scoped>
uni-page-body{
background-color: #fff;
}
.pointsPublicity {
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9;
background-color: #f3f6f9;
img {
width: 100%;
height: 216px;
}
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #222;
line-height: 40px;
padding: 38px 32px;
}
}
.list-content {
padding: 332px 32px 32px;
.item {
width: 100%;
background: #FFF;
box-shadow: inset 0 0 0 0 #EEEEEE;
padding: 32px 32px 0;
box-sizing: border-box;
position: relative;
margin-bottom: 24px;
.blue-tips {
position: absolute;
top: 34px;
left: 0;
width: 8px;
height: 36px;
background: #2D7DFF;
border-radius: 4px;
}
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #333;
line-height: 40px;
word-break: break-all;
}
.item-info {
width: 100%;
padding: 32px 0;
border-top: 1px solid #eee;
.mini-title {
font-family: PingFangSC-Regular;
font-size: 34px;
color: #333;
line-height: 40px;
word-break: break-all;
margin-bottom: 14px;
}
.text-flex {
display: flex;
width: 100%;
p {
width: calc(100% - 160px);
font-family: PingFangSC-Regular;
font-size: 26px;
color: #666;
word-break: break-all;
}
div {
width: 160px;
text-align: right;
font-family: DINAlternate-Bold;
font-weight: 700;
font-size: 30px;
color: #FF7109;
img {
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: bottom;
}
}
}
}
.item-info:nth-of-type(2) {
border-top: 0;
}
}
}
}
</style>

185
src/project/wuxi/AppRedemptionPoints/productDetails.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div class="productDetails" v-if="goodsInfo.picUrl">
<img :src="goodsInfo.picUrl" alt="">
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
<div class="product-info">
<p>{{goodsInfo.title}}</p>
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 2">+￥{{goodsInfo.payMoney}}<span v-if="goodsInfo.type == 2">（兑换后再付）</span></span></h3>
<div>零售单价¥{{goodsInfo.retailPrice}}</div>
<span class="tips" v-if="goodsInfo.type == 2">兑换成功后，点击「去购买」前往京东低价购买</span>
<span class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</span>
</div>
<div class="product-content">
<p>商品描述：</p>
<p v-html="goodsInfo.description"></p>
</div>
<div class="btn" @click="toOrder()" v-if="goodsInfo.shopStatus == 1">
<div :class="total >= goodsInfo.integralPrice ? 'status1' : 'status0'" v-if="goodsInfo.stock > 0">{{total >= goodsInfo.integralPrice ? '立即兑换' : '积分不足'}}</div>
<div class="status0" v-else>商品缺货</div>
</div>
<div class="btn" v-else>
<div class="status0">店铺停用</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'productDetails',
appName: '兑换商品',
data() {
return {
shopGoodsId: '',
goodsInfo: {},
total: 0
}
},
computed: {
...mapState(['user']),
},
onLoad(option) {
this.shopGoodsId = option.shopGoodsId
this.total = option.total
this.$dict.load(['integralSGTypeText']).then(() => {
this.getDetail()
})
},
methods: {
getDetail() {
this.$instance.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
if (res.code === 0) {
this.goodsInfo = res.data
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
}
})
},
toOrder() {
if(this.total >= this.goodsInfo.integralPrice && this.goodsInfo.stock > 0 && this.goodsInfo.status == 1) {
uni.navigateTo({url: `./placeOrder?shopGoodsId=${this.goodsInfo.shopGoodsId}&total=${this.total}&backLevel=4`})
}
},
},
}
</script>
<style lang="scss" scoped>
.productDetails {
background-color: #f3f6f9;
position: relative;
img {
width: 100%;
height: 750px;
}
.type {
position: absolute;
top: 0;
right: 0;
line-height: 42px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 30px;
color: #FFF;
padding: 16px 16px 16px 36px;
border-bottom-left-radius: 40px;
}
.type2 {
background-color: #E64E39;
}
.type1 {
background-color: #E64E39;
}
.type0 {
background-color: #FF6900;
}
.product-info {
padding: 32px;
background-color: #fff;
margin-bottom: 24px;
p {
word-break: break-all;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 48px;
color: #222;
letter-spacing: 0;
line-height: 76px;
margin-bottom: 8px;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 44px;
color: #FF6900;
margin-bottom: 8px;
span {
font-size: 44px;
color: #4181FF;
margin-left: 8px;
span {
font-weight: 400;
font-family: PingFangSC-Regular;
font-size: 32px;
}
}
}
div {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24px;
color: #999;
line-height: 34px;
margin-bottom: 24px;
text-decoration: line-through;
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
}
}
.product-content {
padding: 34px 64px 162px;
background-color: #fff;
p {
font-family: PingFangSC-Regular;
font-size: 32px;
color: #666;
line-height: 60px;
}
}
.btn {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 20px 32px;
box-sizing: border-box;
div {
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
}
.status1 {
color: #FFF;
background: #4181FF;
}
.status0 {
color: #666;
background: #E2E2E2;
}
}
}
</style>

145
src/project/wuxi/AppRedemptionPoints/successOrder.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div class="successOrder">
<img src="./img/success.png" alt="">
<div v-if="goodsInfo.type == 0">
<h3>提交成功</h3>
<p>提交「积分兑换」订单成功，扣减 <span>{{integralPrice}}积分</span></p>
<div class="btn-flex">
<div @click="back">返回</div>
<div @click="toOrderList">查看订单</div>
</div>
</div>
<div v-else>
<h3>兑换成功</h3>
<p>提交「京东低价商品」订单成功，扣减 <span>{{integralPrice}}积分</span><br/>
可点击下方按钮前往京东商城进行低价购买
</p>
<div class="btn" @click="openJd">去购买</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'successOrder',
appName: '提交订单',
data() {
return {
integralPrice: 0,
backLevel: 1,
shopGoodsId: '',
goodsInfo: {}
}
},
computed: {
...mapState(['user']),
},
onLoad(option) {
console.log(option)
this.integralPrice = option.integralPrice
this.backLevel = option.backLevel
this.shopGoodsId = option.shopGoodsId
this.getDetail()
},
methods: {
getDetail() {
this.$instance.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
if (res.code === 0) {
this.goodsInfo = res.data
}
})
},
openJd() {
if(this.goodsInfo.type == 1) {
uni.navigateTo({url: `./jdH5?goodsJdUrl=${this.goodsInfo.jdUrl}`})
}else {
uni.navigateToMiniProgram({
appId: this.goodsInfo.jdAppid,
path: this.goodsInfo.jdUrl
})
}
},
back() {
uni.navigateBack({delta: Number(this.backLevel)})
},
toOrderList() {
uni.redirectTo({
url: './myOrderList'
})
}
},
}
</script>
<style lang="scss" scoped>
uni-page-body{
background-color: #fff;
}
.successOrder {
padding: 0 60px;
text-align: center;
img {
width: 240px;
height: 232px;
margin: 168px auto 32px auto;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 40px;
color: #333;
line-height: 56px;
margin-bottom: 16px;
}
p {
color: #333;
font-size: 30px;
font-family: PingFangSC;
line-height: 50px;
text-align: center;
margin-bottom: 80px;
span {
color: #FF6900;
}
}
.btn {
width: 410px;
height: 88px;
line-height: 88px;
background: #2D7DFF;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
margin: 0 auto;
}
.btn-flex {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
margin: 0 auto;
div {
display: inline-block;
width: 272px;
text-align: center;
height: 88px;
line-height: 88px;
border-radius: 44px;
color: #FFF;
background-color: #2D7DFF;
}
div:nth-of-type(1) {
background-color: #E5EFFF;
color: #2D7DFF;
margin-right: 26px;
}
}
}
</style>