msb-mca
/
shop-app
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

确认弹窗封装

Browse Source
msb_beta
ch 3 years ago
parent 5bf934105e
commit 55381c3fea
9 changed files with 186 additions and 49 deletions
Show Stats Download Patch File Download Diff File

55
components/UiConfirm.vue
Unescape View File

@ -0,0 +1,55 @@
<!--
* @Author: ch
* @Date: 2022-04-19 16:19:32
* @LastEditors: ch
* @LastEditTime: 2022-04-19 17:29:48
* @Description: file content
-->
<template>
<u-modal :show="show" :content="content" showCancelButton
@confirm="myConfirm" @cancel="myCancel"/>
</template>
<script>
export default {
props : {
content : {
type : String,
default : ''
},
confirmTxt : {
type : String,
default : '确认'
},
confirm : {
type : Function,
default: function(){}
},
cancelTxt : {
type : String,
default : '取消'
},
cancel : {
type : Function,
default : function(){}
}
},
data(){
return {
show : true
}
},
methods : {
async myConfirm(){
this.show = false;
await this.confirm();
document.body.removeChild(this.$el);
},
async myCancel(){
this.show = false;
await this.cancel();
document.body.removeChild(this.$el);
}
}
}
</script>

39
components/mount/index.js
Unescape View File

@ -0,0 +1,39 @@
/*
* @Author: ch
* @Date: 2022-04-19 16:14:03
* @LastEditors: ch
* @LastEditTime: 2022-04-19 17:20:08
* @Description: file content
*/
import Confirm from '../UiConfirm.vue';
export default {
install (Vue) {
// 创建构造类
const ConfirmConstructor = Vue.extend(Confirm)
const showNextConfirm = function (options) {
// 实例化组件
const instance = new ConfirmConstructor({
el: document.createElement('div')
})
// 处理参数
for (const prop in options) {
instance[prop] = options[prop];
}
// 插入Body
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.show = true
})
}
const confirmFn = (options) => {
return showNextConfirm(options);
}
Vue.prototype.$msb ?
Vue.prototype.$msb.confirm = confirmFn :
Vue.prototype.$msb={confirm : confirmFn }
}
}

6
main.js
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2021-07-26 23:22:16
* @LastEditors: ch
* @LastEditTime: 2022-03-29 11:14:39
* @LastEditTime: 2022-04-19 17:26:10
* @Description: file content
*/
import Vue from 'vue';
@ -10,11 +10,13 @@ import App from './App';
import {router,RouterMount} from '@/common/router/index.js';
import uView from 'uview-ui';
import store from '@/common/store'
import store from '@/common/store';
import Confirm from '@/components/mount/index';
Vue.use(router);
Vue.use(uView);
Vue.use(Confirm);
Vue.prototype.$store = store
Vue.config.productionTip = false;

4
pages/account/setting/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-03-22 15:09:06
* @LastEditors: ch
* @LastEditTime: 2022-04-19 15:56:51
* @LastEditTime: 2022-04-19 17:20:30
* @Description: file content
-->
<template>
@ -73,5 +73,5 @@ page{
.uiCell--value{
color: $color-grey4;
}
}
}
</style>

25
pages/account/setting/setUserInfo.vue
Unescape View File

@ -2,21 +2,21 @@
* @Author: ch
* @Date: 2022-03-28 15:38:23
* @LastEditors: ch
* @LastEditTime: 2022-04-19 15:55:24
* @LastEditTime: 2022-04-19 17:32:50
* @Description: file content
-->
<template>
<view>
<view class="userInfo">
<u-upload class="userInfo--upload" @afterRead="headUpload" >
<image class="userInfo--head" :src="userInfo.avatar || require('@/static/account/tx.png')" ></image>
<u-upload class="userInfo--upload" @afterRead="updateAvatar" >
<image class="userInfo--head" :src="userInfo.avatar || require('@/static/account/tx.png')" />
</u-upload>
<view>{{userInfo.nickname}}</view>
</view>
<UiCell class="cell" title="昵称" :value="userInfo.nickname" @click="$Router.push('/setNickname')"></UiCell>
<UiCell class="cell cell--last" title="性别" :value="sexName" @click="sexShow = true"></UiCell>
<UiCell class="cell" title="昵称" :value="userInfo.nickname" @click="$Router.push('/setNickname')" />
<UiCell class="cell cell--last" title="性别" :value="sexName" @click="sexShow = true" />
<u-picker :show="sexShow" :columns="sexData" :defaultIndex="sexDefault"
keyName="label" @cancel="sexShow = false" @confirm="sexChange"></u-picker>
keyName="label" @cancel="sexShow = false" @confirm="sexChange" />
</view>
</template>
<script>
@ -60,6 +60,11 @@ export default {
this.$store.commit('SET_USER_INFO', {...this.userInfo, gender:value});
this.sexShow = false;
},
/**
* 获取OSS鉴权信息
* configId 自定义文件夹 图片存储的文件夹名称
* serviceName 服务名
*/
async getOssCon(){
const {error, result} = await ApiPostGetOssConfig({
configId : 'account-avatar/',
@ -71,8 +76,12 @@ export default {
}
return result;
},
async headUpload(val){
/**
* 修改头像
* 1、拿到OSS信息上传，
* 2、成功后拼地址传给修改头像接口
*/
async updateAvatar(val){
const file = val.file;
const oss = await this.getOssCon();
uni.uploadFile({

24
pages/order/detail/components/Operation.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-04-15 17:46:10
* @LastEditors: ch
* @LastEditTime: 2022-04-19 14:45:22
* @LastEditTime: 2022-04-19 17:36:45
* @Description: file content
-->
<template>
@ -91,14 +91,20 @@ export default {
* 确认收货
*/
async receive(){
const {error} = await ApiPutOrderReceive({
orderId : this.$Route.query.id
});
if(error){
uni.$toast(error.message);
return false;
}
this.$Router.push('/orderSuccess')
this.$msb.confirm({
content : '确认已经收到货了吗？',
confirm : async ()=>{
const {error} = await ApiPutOrderReceive({
orderId : this.$Route.query.id
});
if(error){
uni.$toast(error.message);
return false;
}
this.$Router.push('/orderSuccess')
}
})
}
}
}

27
pages/order/list.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-03-22 10:58:24
* @LastEditors: ch
* @LastEditTime: 2022-04-19 15:06:56
* @LastEditTime: 2022-04-19 17:37:49
* @Description: file content
-->
<template>
@ -47,7 +47,8 @@
@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</button>
<button class="orders--footer-btn" v-if="item.orderStatus >= 4"
@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button>
<button class="orders--footer-btn orders--footer-btn__red" v-if="item.orderStatus == 4">确认收货</button>
<button class="orders--footer-btn orders--footer-btn__red"
v-if="item.orderStatus == 4" @click="receive(item)">确认收货</button>
</view>
</view>
<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
@ -59,7 +60,7 @@
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { DictOrderStatus } from '@/common/dicts/order';
import { ApiGetOrderList } from '@/common/api/order';
import { ApiGetOrderList, ApiPutOrderReceive } from '@/common/api/order';
import BsPay from '../../components/BsPay.vue';
export default {
@ -132,6 +133,26 @@ export default {
pay(item){
this.payShow = true;
this.payOrder = item;
},
/**
* 确认收货
*/
async receive(item){
this.$msb.confirm({
content : '确认已经收到货了吗？',
confirm : async ()=>{
const {error} = await ApiPutOrderReceive({
orderId : item.orderId
});
if(error){
uni.$toast(error.message);
return false;
}
this.$Router.push('/orderSuccess')
}
})
}
}

26
pages/order/saleAfter/saleAfterDetail/components/AwaitExamine.vue
Unescape View File

@ -16,11 +16,9 @@
<view>•如商家超时未处理，退货申请将达成，请按系统给出的退货地址退货</view>
</view>
<view class="footer">
<UiButton size="min" @click="cancelShow = true">撤销申请</UiButton>
<UiButton size="min" @click="cancelSaleAfter">撤销申请</UiButton>
<UiButton size="min" @click="edit" type="gradual" class="btn">修改申请</UiButton>
</view>
<u-modal :show="cancelShow" @confirm="cancelSaleAfter" showCancelButton @cancel="cancelShow = false"
content="你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务" cancelText="我再想想"></u-modal>
</UiWhiteBox>
</template>
<script>
@ -37,18 +35,22 @@ export default {
},
data(){
return {
cancelShow : false
}
},
methods:{
async cancelSaleAfter(){
const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$emit('reload');
this.cancelShow = false;
cancelSaleAfter(){
this.$msb.confirm({
content : '你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务',
cancelTxt : '我再想想',
confirm : async ()=> {
const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$emit('reload');
}
})
},
edit(){
this.$Router.push(`/saleAfterEdit?id=${this.data.refundId}`)

29
pages/order/saleAfter/saleAfterDetail/components/SubmitLogistics.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-04-14 13:44:30
* @LastEditors: ch
* @LastEditTime: 2022-04-18 18:08:29
* @LastEditTime: 2022-04-19 17:28:01
* @Description: file content
-->
<template>
@ -25,7 +25,7 @@
<view>•请填写真实退货物流信息，逾期未填写，退货申请将关闭</view>
</view>
<view class="footer">
<UiButton size="min" @click="cancelShow = true">撤销申请</UiButton>
<UiButton size="min" @click="cancelSaleAfter">撤销申请</UiButton>
</view>
</UiWhiteBox>
<UiWhiteBox class="box">
@ -58,9 +58,8 @@
></u-upload>
</UiWhiteBox>
<UiButton class="submit-btn" size="max" type="gradual" @click="submit">确认提交</UiButton>
<u-picker :show="logisticsShow" :columns="company" keyName="companyName" @confirm="confirmCompany" @cancel="logisticsShow = false"></u-picker>
<u-modal :show="cancelShow" @confirm="cancelSaleAfter" showCancelButton @cancel="cancelShow = false"
content="你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务" cancelText="我再想想"></u-modal>
<u-picker :show="logisticsShow" :columns="company" keyName="companyName"
@confirm="confirmCompany" @cancel="logisticsShow = false" />
</view>
</template>
<script>
@ -83,7 +82,6 @@ export default {
},
data(){
return {
cancelShow : false,
logisticsShow : false,
fileList : [],
params : {
@ -98,13 +96,18 @@ export default {
},
methods:{
async cancelSaleAfter(){
const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$emit('reload');
this.cancelShow = false;
this.$msb.confirm({
content : '你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务',
cancelTxt : '我再想想',
confirm : async ()=> {
const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$emit('reload');
}
})
},
confirmCompany(val){
this.params = {...this.params, ...val.value[0]}

Write Preview
Loading…
Cancel
Save