|
@@ -10,21 +10,21 @@
|
|
|
</u-checkbox-group>
|
|
|
</view> -->
|
|
|
<u-checkbox-group placement="column" @change="checkboxChange">
|
|
|
- <view v-for="(item,index) in dataList" :key="item.id" class="item u-flex">
|
|
|
+ <view v-for="(item, index) in dataList" :key="item.id" class="item u-flex">
|
|
|
<u-checkbox shape="circle" :disabled="item.status !== 3" activeColor="#ED0000" :key="index"
|
|
|
:name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
|
|
|
<view class="text" @click="toggleCheck(index)">
|
|
|
<view class="up u-flex u-row-between">
|
|
|
- <view class="left">订单编号:{{item.orderId}}</view>
|
|
|
- <view class="right status" :class="item.class">{{item.status|filterOrderState}}</view>
|
|
|
+ <view class="left">订单编号:{{ item.orderId }}</view>
|
|
|
+ <view class="right status" :class="item.class">{{ item.status | filterOrderState }}</view>
|
|
|
</view>
|
|
|
<view class="down u-flex u-row-between">
|
|
|
<view class="left">
|
|
|
- <view class="name">观影人:{{item.name}}</view>
|
|
|
- <view class="idcard">身份证号:{{item.idcard}}</view>
|
|
|
+ <view class="name">观影人:{{ item.name }}</view>
|
|
|
+ <view class="idcard">身份证号:{{ item.idcard }}</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
- ¥ {{item.viewerSalePrice}}
|
|
|
+ ¥ {{ item.viewerSalePrice }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -36,18 +36,18 @@
|
|
|
<view class="left u-flex">
|
|
|
<view class="checkbox" @click="checkboxClick" style="padding: 10px;">
|
|
|
<u-checkbox-group @change="allCheckboxChange">
|
|
|
- <u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name"
|
|
|
- label="全选"></u-checkbox>
|
|
|
+ <u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000"
|
|
|
+ :name="allCheckbox.name" label="全选"></u-checkbox>
|
|
|
</u-checkbox-group>
|
|
|
</view>
|
|
|
<view class="total-price-wrap u-flex">
|
|
|
- <view class="total">共{{selectGoods.length}}张</view>
|
|
|
+ <view class="total">共{{ selectGoods.length }}张</view>
|
|
|
<view class="totalPrice u-flex">
|
|
|
- 合计: <text class="num"> {{totalPrice}}</text>
|
|
|
+ 合计: <text class="num"> {{ totalPrice }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="btn active" v-if="selectGoods.length>0&&cansubmit" @click="submitorder">确定</view>
|
|
|
+ <view class="btn active" v-if="selectGoods.length > 0 && cansubmit" @click="submitorder">确定</view>
|
|
|
<view class="btn" v-else>确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -55,152 +55,184 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {
|
|
|
- systemInfo
|
|
|
- } from "@/mixin.js";
|
|
|
- export default {
|
|
|
- mixins: [systemInfo], // 使用mixin
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderId: '',
|
|
|
- cansubmit: true,
|
|
|
- staticUrl: this.$commonConfig.staticUrl,
|
|
|
- allCheckbox: {
|
|
|
- name: '全选'
|
|
|
- },
|
|
|
- options: [{
|
|
|
- text: '删除',
|
|
|
- style: {
|
|
|
- backgroundColor: '#FF3C3F',
|
|
|
- 'padding-left': '10px'
|
|
|
- }
|
|
|
- }],
|
|
|
- // 购物车列表
|
|
|
- dataList: [],
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 是否全选
|
|
|
- allChecked() {
|
|
|
- return this.dataList.every(item => item.checked)
|
|
|
- },
|
|
|
- selectGoods() {
|
|
|
- let selectGoods = [];
|
|
|
- this.dataList.forEach(item => {
|
|
|
- if (item.checked) {
|
|
|
- selectGoods.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- return selectGoods
|
|
|
+import {
|
|
|
+ systemInfo
|
|
|
+} from "@/mixin.js";
|
|
|
+export default {
|
|
|
+ mixins: [systemInfo], // 使用mixin
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId: '',
|
|
|
+ cansubmit: true,
|
|
|
+ staticUrl: this.$commonConfig.staticUrl,
|
|
|
+ allCheckbox: {
|
|
|
+ name: '全选'
|
|
|
},
|
|
|
- // 合计价格
|
|
|
- totalPrice() {
|
|
|
- let that = this;
|
|
|
- return this.dataList.reduce((total, item) => {
|
|
|
- if (item.checked) {
|
|
|
- let price = null;
|
|
|
- price = item.viewerSalePrice
|
|
|
- total += price;
|
|
|
- }
|
|
|
- return total;
|
|
|
- }, 0).toFixed(2);
|
|
|
- }
|
|
|
+ options: [{
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#FF3C3F',
|
|
|
+ 'padding-left': '10px'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ // 购物车列表
|
|
|
+ dataList: [],
|
|
|
+ pageData: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否全选
|
|
|
+ allChecked() {
|
|
|
+ return this.dataList.every(item => item.checked)
|
|
|
},
|
|
|
- onLoad(page) {
|
|
|
- this.getSystemInfo();
|
|
|
- this.orderId = page.id;
|
|
|
+ selectGoods() {
|
|
|
+ let selectGoods = [];
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ if (item.checked) {
|
|
|
+ selectGoods.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return selectGoods
|
|
|
},
|
|
|
- onShow() {
|
|
|
- this.getViewers();
|
|
|
+ // 合计价格
|
|
|
+ totalPrice() {
|
|
|
+ let that = this;
|
|
|
+ return this.dataList.reduce((total, item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ let price = null;
|
|
|
+ price = item.viewerSalePrice
|
|
|
+ total += price;
|
|
|
+ }
|
|
|
+ return total;
|
|
|
+ }, 0).toFixed(2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ this.getSystemInfo();
|
|
|
+ this.orderId = page.id;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getViewers();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ leftClick(e) {
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ if (pages.length == 1) {
|
|
|
+ uni.$u.route('/pages/index/index')
|
|
|
+ } else {
|
|
|
+ uni.navigateBack()
|
|
|
+ };
|
|
|
},
|
|
|
- methods: {
|
|
|
- leftClick(e){
|
|
|
- let pages = getCurrentPages();
|
|
|
- if(pages.length==1){
|
|
|
- uni.$u.route('/pages/index/index')
|
|
|
- }else{
|
|
|
- uni.navigateBack()
|
|
|
- };
|
|
|
- },
|
|
|
- // 切换全选状态
|
|
|
- allCheckboxChange(n) {
|
|
|
- // console.log('allCheckboxChange',n[0]);
|
|
|
- console.log('allCheckboxChange', n);
|
|
|
- let selectAll = n[0] ? true : false;
|
|
|
- this.dataList.forEach(item => {
|
|
|
- if (item.status === 3) {
|
|
|
- item.checked = selectAll
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- checkboxClick() {
|
|
|
- // console.log('checkboxClick',this.allChecked);
|
|
|
- this.dataList.forEach(item => {
|
|
|
- if (item.status === 3) {
|
|
|
- item.checked = !this.allChecked
|
|
|
- }
|
|
|
+ // 切换全选状态
|
|
|
+ allCheckboxChange(n) {
|
|
|
+ // console.log('allCheckboxChange',n[0]);
|
|
|
+ console.log('allCheckboxChange', n);
|
|
|
+ let selectAll = n[0] ? true : false;
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ if (item.status === 3) {
|
|
|
+ item.checked = selectAll
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkboxClick() {
|
|
|
+ // console.log('checkboxClick',this.allChecked);
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ if (item.status === 3) {
|
|
|
+ item.checked = !this.allChecked
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkboxChange(n) {
|
|
|
+ // console.log('checkboxChange',n);
|
|
|
+ },
|
|
|
+ // 切换商品选中状态
|
|
|
+ toggleCheck(index) {
|
|
|
+ // console.log('toggleCheck',index);
|
|
|
+ if (this.dataList[index].status !== 3) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '该状态不能退款',
|
|
|
+ duration: 1000
|
|
|
})
|
|
|
- },
|
|
|
- checkboxChange(n) {
|
|
|
- // console.log('checkboxChange',n);
|
|
|
- },
|
|
|
- // 切换商品选中状态
|
|
|
- toggleCheck(index) {
|
|
|
- // console.log('toggleCheck',index);
|
|
|
- if(this.dataList[index].status !== 3){
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title:'该状态不能退款',
|
|
|
- duration:1000
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dataList[index].checked = !this.dataList[index].checked
|
|
|
+ },
|
|
|
+ submitorder() {
|
|
|
+ //判断this.pageData.hasPreferential 是否存在优惠,如果存在优惠,则list的数据要全选,如果没有全选弹窗提示,提示内容为this.pageData.preferentialMsg
|
|
|
+ if (this.pageData.hasPreferential) {
|
|
|
+ if (!this.allChecked) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: this.pageData.preferentialMsg,
|
|
|
+ confirmText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ // 点击确认,执行全选后提交
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ item.checked = true
|
|
|
+ // if (item.status === 3) {
|
|
|
+ // item.checked = true
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ // 重新执行提交逻辑
|
|
|
+ this.executeSubmit()
|
|
|
+ }
|
|
|
+ // 点击取消则自动关闭弹窗,无需额外处理
|
|
|
+ }
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- this.dataList[index].checked = !this.dataList[index].checked
|
|
|
- },
|
|
|
- submitorder() {
|
|
|
- let viewerList = this.selectGoods.map(item=>{
|
|
|
- return {viewerId:item.id,salePrice:item.salePrice}
|
|
|
- });
|
|
|
- let params = {
|
|
|
- type:'redirectTo',
|
|
|
- id:this.orderId,
|
|
|
- refundAmount:this.totalPrice,
|
|
|
- viewerList:JSON.stringify(viewerList)
|
|
|
- };
|
|
|
- // console.log('selectGoods', this.selectGoods);
|
|
|
- // uni.$u.route('/center/refund', params);
|
|
|
-
|
|
|
- uni.redirectTo({
|
|
|
- url: `/center/refund?id=${this.orderId}&refundAmount=${this.totalPrice}&viewerList=${JSON.stringify(viewerList)}`
|
|
|
- })
|
|
|
- },
|
|
|
- getViewers() {
|
|
|
- this.$u.api.getViewers({
|
|
|
- orderId: this.orderId
|
|
|
- }).then(res => {
|
|
|
- this.dataList = res.data.list.map(item => {
|
|
|
- item.checked = false;
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- class: {
|
|
|
- 0: 'status-0',
|
|
|
- 1: 'status-1',
|
|
|
- 2: 'status-2',
|
|
|
- 3: 'status-3',
|
|
|
- 4: 'status-4',
|
|
|
- 5: 'status-5',
|
|
|
- 6: 'status-6',
|
|
|
- 7: 'status-7',
|
|
|
- 8: 'status-8'
|
|
|
- }[item.status] || ''
|
|
|
- }
|
|
|
- })
|
|
|
- }).catch(err => {
|
|
|
- console.log('getOrderDetails', err.data);
|
|
|
+ }
|
|
|
+ this.executeSubmit()
|
|
|
+ },
|
|
|
+ executeSubmit() {
|
|
|
+ let viewerList = this.selectGoods.map(item => {
|
|
|
+ return { viewerId: item.id, salePrice: item.salePrice }
|
|
|
+ });
|
|
|
+ let params = {
|
|
|
+ type: 'redirectTo',
|
|
|
+ id: this.orderId,
|
|
|
+ refundAmount: this.totalPrice,
|
|
|
+ viewerList: JSON.stringify(viewerList)
|
|
|
+ };
|
|
|
+ // console.log('selectGoods', this.selectGoods);
|
|
|
+ // uni.$u.route('/center/refund', params);
|
|
|
+
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/center/refund?id=${this.orderId}&refundAmount=${this.totalPrice}&viewerList=${JSON.stringify(viewerList)}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getViewers() {
|
|
|
+ this.$u.api.getViewers({
|
|
|
+ orderId: this.orderId
|
|
|
+ }).then(res => {
|
|
|
+ this.dataList = res.data.list.map(item => {
|
|
|
+ item.checked = false;
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ class: {
|
|
|
+ 0: 'status-0',
|
|
|
+ 1: 'status-1',
|
|
|
+ 2: 'status-2',
|
|
|
+ 3: 'status-3',
|
|
|
+ 4: 'status-4',
|
|
|
+ 5: 'status-5',
|
|
|
+ 6: 'status-6',
|
|
|
+ 7: 'status-7',
|
|
|
+ 8: 'status-8'
|
|
|
+ }[item.status] || ''
|
|
|
+ }
|
|
|
})
|
|
|
- },
|
|
|
- }
|
|
|
+ this.pageData = res.data;
|
|
|
+ // console.log('this.pageData',this.pageData)
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('getOrderDetails', err.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
<style>
|
|
|
page {
|
|
@@ -208,53 +240,63 @@ page {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.item-list{
|
|
|
+.item-list {
|
|
|
margin: 28rpx 32rpx 20rpx;
|
|
|
- .item{
|
|
|
+
|
|
|
+ .item {
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 20rpx;
|
|
|
padding-left: 18rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
- .text{
|
|
|
+
|
|
|
+ .text {
|
|
|
margin-left: 20rpx;
|
|
|
flex: 1;
|
|
|
padding: 30rpx 32rpx 52rpx;
|
|
|
- box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0,0,0,0.5);
|
|
|
+ box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
- .up{
|
|
|
+
|
|
|
+ .up {
|
|
|
border-bottom: 1px solid #EBEBEB;
|
|
|
padding-bottom: 24rpx;
|
|
|
margin-bottom: 32rpx;
|
|
|
- .left{
|
|
|
+
|
|
|
+ .left {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #606060;
|
|
|
}
|
|
|
- .status{
|
|
|
+
|
|
|
+ .status {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #9E9E9E;
|
|
|
- &.status-3{
|
|
|
+
|
|
|
+ &.status-3 {
|
|
|
color: #56CE53;
|
|
|
}
|
|
|
- &.status-4{
|
|
|
+
|
|
|
+ &.status-4 {
|
|
|
color: #FF6C17;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .down{
|
|
|
- .name{
|
|
|
+
|
|
|
+ .down {
|
|
|
+ .name {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #363636;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
- .idcard{
|
|
|
+
|
|
|
+ .idcard {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 400;
|
|
|
color: #7F7F7F;
|
|
|
}
|
|
|
- .right{
|
|
|
+
|
|
|
+ .right {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
color: #ED0000;
|
|
@@ -262,56 +304,60 @@ page {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .cart-bottom {
|
|
|
- position: relative;
|
|
|
- z-index: 1001;
|
|
|
+
|
|
|
+.cart-bottom {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1001;
|
|
|
+ height: 98rpx;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
height: 98rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ padding-left: 0;
|
|
|
|
|
|
- .inner {
|
|
|
- position: fixed;
|
|
|
- background-color: #fff;
|
|
|
- height: 98rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- padding: 0 20rpx;
|
|
|
- padding-left: 0;
|
|
|
+ .total-price-wrap {
|
|
|
+ margin-left: 30rpx;
|
|
|
|
|
|
- .total-price-wrap {
|
|
|
- margin-left: 30rpx;
|
|
|
- .totalPrice{
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: 400;
|
|
|
- .num{
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #ED0000;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .total{
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- margin-right: 16rpx;
|
|
|
+ .totalPrice {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ED0000;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .btn {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- padding: 0 50rpx;
|
|
|
- background-color: #eee;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
+ .total {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &.active {
|
|
|
- background-color: #FF3C3F;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 50rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #FF3C3F;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|