优化框架
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<uni-card :border="false" :is-shadow="false">
|
||||
<uni-card :border="false" :is-shadow="false" v-if="address.name">
|
||||
<uv-cell
|
||||
v-if="deliveryType === 0"
|
||||
:title="`${address.name} ${address.phone}`"
|
||||
@@ -23,12 +23,11 @@
|
||||
</uv-cell>
|
||||
<uv-cell
|
||||
v-if="deliveryType === 1"
|
||||
:title="`${shopAddress.merchantName}`"
|
||||
:label="`${shopAddress.address}`"
|
||||
:title="`${cart.shops[0].shopName}`"
|
||||
:label="`${cart.shops[0].address}`"
|
||||
icon="map"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="openAddressList"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
@@ -302,7 +301,6 @@ export default {
|
||||
};
|
||||
},
|
||||
onLoad(where) {
|
||||
console.log('where:',where)
|
||||
this.where = where;
|
||||
this.reload();
|
||||
},
|
||||
@@ -331,6 +329,7 @@ export default {
|
||||
CartApi.listCart(where).then(data => {
|
||||
if(data){
|
||||
app.cart = data
|
||||
console.log(app.cart.shops);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -3,10 +3,9 @@
|
||||
<view class="goods-info">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="750rpx" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<!-- <view class="merchant-name">{{ form.merchantName }}</view> -->
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<uv-cell :cellStyle="{padding: '10px 5px'}">
|
||||
<uv-cell :border="false" :cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="pirce-bar" style="display: flex;">
|
||||
<view class="web-text-danger">￥</view>
|
||||
@@ -17,20 +16,66 @@
|
||||
<text class="web-text-secondary" style="text-decoration: line-through">划线价￥{{ form.price * 2 }}</text>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :title="form.goodsName" label="商品名称" :cellStyle="{padding: '10px 5px'}">
|
||||
<uv-cell :cellStyle="{padding: '0px 5px 15px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="flex">
|
||||
<view class="web-text-heading font-bold" style="font-size: 26rpx; ">{{ form.goodsName }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<!-- <uv-cell title="选择款式" :label="`100zz【藏青色】、100zz【古红色】`" isLink-->
|
||||
<!-- :cellStyle="{padding: '10px 5px'}">-->
|
||||
<!-- </uv-cell>-->
|
||||
<uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"
|
||||
@click="callPhone('0771-8888888')">
|
||||
<!-- <uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">-->
|
||||
<!-- </uv-cell>-->
|
||||
<!-- <uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"-->
|
||||
<!-- @click="callPhone('0771-8888888')">-->
|
||||
|
||||
</uv-cell>
|
||||
<!-- </uv-cell>-->
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell :cellStyle="{padding: '10px 5px'}" :center="true" @click="openSpecForm">
|
||||
<template v-slot:title>
|
||||
<view class="flex" v-if="!skuText">
|
||||
<view class="web-text-secondary w-15p">可选</view>
|
||||
<view class="uv-page__tag-item" v-for="(item, index) in form.goodsSpecValue" :key="index">
|
||||
<uv-tags :text="`${item.value}`" :plain="!item.checked" type="info" :name="index" class="mr-10"
|
||||
@click="radioClick">
|
||||
</uv-tags>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex" v-else>
|
||||
<view class="web-text-secondary w-15p">已选</view>
|
||||
<uv-text class="web-text-heading" type="warning" plain :text="skuText" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:value>
|
||||
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="flex">
|
||||
<view class="web-text-secondary w-15p">配送</view>
|
||||
<view class="web-text-heading">啦啦</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:value>
|
||||
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :border="false" :cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="flex">
|
||||
<view class="web-text-secondary w-15p">保障</view>
|
||||
<view class="web-text-heading value">坏了包赔 假一赔十 七天无理由</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:value>
|
||||
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="商品详情" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<view v-html="form.content"></view>
|
||||
@@ -103,7 +148,7 @@
|
||||
</uv-cell-group>
|
||||
<view class="flex m-20 justify-between items-center">
|
||||
<view class="total-price web-text-heading">
|
||||
总计{{ isNew }}
|
||||
总计
|
||||
<text class="text-red-500" style="font-weight: 500; font-size: 36rpx">￥{{ form.price }}</text>
|
||||
</view>
|
||||
<view class="add-cart">
|
||||
@@ -156,6 +201,7 @@ import {
|
||||
import UvAvatar from "@/uni_modules/uv-avatar/components/uv-avatar/uv-avatar.vue";
|
||||
import UvGap from "@/uni_modules/uv-gap/components/uv-gap/uv-gap.vue";
|
||||
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
|
||||
import UvText from "@/uni_modules/uv-text/components/uv-text/uv-text.vue";
|
||||
|
||||
const cartStore = useCartStore();
|
||||
const {
|
||||
@@ -173,7 +219,7 @@ const {
|
||||
} = storeToRefs(cartStore)
|
||||
|
||||
export default {
|
||||
components: {UvButton, UvGap, UvAvatar},
|
||||
components: {UvText, UvButton, UvGap, UvAvatar},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
@@ -247,7 +293,7 @@ export default {
|
||||
});
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.getGoods(), app.listCart()]).then(data => {
|
||||
Promise.all([app.getGoods(), app.listCart()]).then(data => {
|
||||
const form = data[0]
|
||||
form.content = this.formatRichText(form.content)
|
||||
app.form = form;
|
||||
@@ -268,7 +314,7 @@ export default {
|
||||
app.cart = data[1]
|
||||
console.log(app.cart.totalNums)
|
||||
// 更新购物车角标
|
||||
if(app.cart?.totalNums){
|
||||
if (app.cart?.totalNums) {
|
||||
app.options[1].info = app.cart.totalNums
|
||||
}
|
||||
})
|
||||
@@ -353,6 +399,9 @@ export default {
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
openSpecForm(){
|
||||
this.$refs.specForm.open('center');
|
||||
},
|
||||
onClick({index, content}) {
|
||||
console.log(index, content)
|
||||
// 客服按钮
|
||||
@@ -433,6 +482,7 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
gotoBuy() {
|
||||
const app = this
|
||||
this.disabled = !this.disabled;
|
||||
@@ -441,15 +491,14 @@ export default {
|
||||
spec: app.skuText,
|
||||
cartNum: 1,
|
||||
isNew: app.isNew
|
||||
}).then(data => {
|
||||
app.options[1].info = data.totalNums
|
||||
}).then(cardId => {
|
||||
if (app.isNew) {
|
||||
// CartApi.removeCart(data.id)
|
||||
// 跳转页面
|
||||
uni.navigateTo({
|
||||
url: `/package/goods/checkout?id=${data.id}`
|
||||
url: `/package/goods/checkout?id=${cardId}`
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="waterfall">
|
||||
<!-- search-->
|
||||
<view class="search" style="padding: 0 10rpx; background-color: #FFFFFF">
|
||||
<uni-search-bar radius="5" placeholder="搜索商品" v-model="where.keywords" clearButton="auto" cancelButton="none" @confirm="search"/>
|
||||
</view>
|
||||
|
||||
<!-- 推荐美食 -->
|
||||
<ws-goods :goods="goods" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import * as GoodsApi from '@/api/shop/goods';
|
||||
import * as GoodsCategoryApi from '@/api/shop/goodsCategory';
|
||||
import {
|
||||
guid
|
||||
} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
|
||||
import {
|
||||
useTenantStore
|
||||
} from '@/store/modules/tenant';
|
||||
import {getIndex} from "@/api/cms/mp";
|
||||
|
||||
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
|
||||
},
|
||||
goods: [],
|
||||
foods: [],
|
||||
goodsList: [], // 瀑布流全部数据
|
||||
list1: [], // 瀑布流第一列数据
|
||||
list2: [], // 瀑布流第二列数据
|
||||
goodsCategoryList: [], // 商品分类
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10,
|
||||
// 小程序导航图标
|
||||
navigation: [],
|
||||
// 骨架屏
|
||||
hideTools: true,
|
||||
// 商品分类
|
||||
categoryId: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad({keywords}) {
|
||||
if(keywords){
|
||||
this.where.keywords = keywords
|
||||
uni.setNavigationBarTitle({
|
||||
title: '商品搜索'
|
||||
})
|
||||
}
|
||||
// 请求数据
|
||||
await this.reload()
|
||||
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
|
||||
// 获取服务租户信息包
|
||||
const info = await tenantStore.fetchTenantInfo();
|
||||
await this.getIndexData()
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
app.isLogin = true;
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.pageGoods(),app.getGoodsCategory(), app.getIndexData()])
|
||||
.then((res) => {
|
||||
app.goodsList = res[0];
|
||||
app.goodsCategoryList = res[1];
|
||||
app.hideTools = false
|
||||
if(res[2]){
|
||||
app.foods = res[2]?.foods;
|
||||
app.goods = res[2]?.goods;
|
||||
}
|
||||
})
|
||||
},
|
||||
getIndexData(){
|
||||
const app = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getIndex({})
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
pageGoods() {
|
||||
const app = this
|
||||
const { categoryId } = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.pageGoods(app.where)
|
||||
.then(result => {
|
||||
resolve(result.list)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
getGoodsCategory(){
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsCategoryApi.pageGoodsCategory({parentId: 0})
|
||||
.then(result => {
|
||||
resolve(result.list)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
navTo(item) {
|
||||
uni.navigateTo({
|
||||
url: '/package/goods/detail?id=' + item.goodsId
|
||||
})
|
||||
},
|
||||
onCategory(item){
|
||||
this.categoryId = item.categoryId
|
||||
this.goodsList = []
|
||||
this.list1 = []
|
||||
this.list2 = []
|
||||
this.reload()
|
||||
},
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
console.log('e: ', e);
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
// 模拟的后端数据
|
||||
getData() {
|
||||
return new Promise((resolve) => {
|
||||
const imgs = [{
|
||||
url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',
|
||||
width: 100,
|
||||
height: 110
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',
|
||||
width: 200,
|
||||
height: 220
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/300x340.png/5ac725/fff',
|
||||
width: 300,
|
||||
height: 340
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',
|
||||
width: 400,
|
||||
height: 400
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/500x510.png/909399/fff',
|
||||
width: 500,
|
||||
height: 510
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',
|
||||
width: 600,
|
||||
height: 606
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/310x422.png/f1a532/fff',
|
||||
width: 310,
|
||||
height: 422
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',
|
||||
width: 320,
|
||||
height: 430
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',
|
||||
width: 330,
|
||||
height: 424
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/340x435.png/5ac725/fff',
|
||||
width: 340,
|
||||
height: 435
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',
|
||||
width: 350,
|
||||
height: 440
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/380x470.png/909399/fff',
|
||||
width: 380,
|
||||
height: 470
|
||||
}
|
||||
];
|
||||
let list = [];
|
||||
const doFn = (i) => {
|
||||
const randomIndex = Math.floor(Math.random() * 10);
|
||||
return {
|
||||
id: guid(),
|
||||
allowEdit: i == 0,
|
||||
image: imgs[randomIndex].url,
|
||||
w: imgs[randomIndex].width,
|
||||
h: imgs[randomIndex].height,
|
||||
title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架` :
|
||||
`(${this.list.length + i +1})uv-ui支持多平台`,
|
||||
desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` :
|
||||
`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
|
||||
}
|
||||
};
|
||||
// 模拟异步
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
list.push(doFn(i));
|
||||
}
|
||||
resolve({
|
||||
data: list
|
||||
});
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
/* background: url('https://oss.wsdns.cn/20240505/eaa18a0271fa42aa8395bd5eb874808a.png') no-repeat; */
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$show-lines: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
|
||||
.waterfall-item {
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
border-radius: 6px;
|
||||
|
||||
&__image {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall-item__ft {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
&__title {
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 700;
|
||||
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc .value {
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-oreder {
|
||||
width: 720rpx;
|
||||
margin: 20rpx auto 8rpx auto;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.web-cell-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.web-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :border="false" :is-shadow="false">
|
||||
<uv-cell
|
||||
:title="`${formData.name ? formData.name : '请填写开票信息'}`"
|
||||
:label="`${formData.isCompany == 1 ? '单位' : '个人'}`"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="editInvoice"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uni-card>
|
||||
<uni-card v-if="formData.name" :border="false" :is-shadow="false" :padding="20">
|
||||
<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="100" label-position="left">
|
||||
<uni-forms-item label="发票类型" name="type">
|
||||
<uni-data-checkbox v-model="formData.type" :localdata="type" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="开票类型" name="invoiceType">
|
||||
<uni-data-checkbox v-model="formData.invoiceType" :localdata="invoiceType" />
|
||||
</uni-forms-item>
|
||||
<block v-if="formData.isCompany == 0">
|
||||
<uni-forms-item label="名称" name="name" required>
|
||||
<uv-input class="input" disabled v-model="formData.name" type="text" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phone" required>
|
||||
<uv-input class="input" disabled v-model="formData.phone" type="text" placeholder="手机号码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="电子邮箱" name="email" required>
|
||||
<uv-input class="input" disabled v-model="formData.email" type="text" placeholder="电子邮箱" />
|
||||
</uni-forms-item>
|
||||
</block>
|
||||
<block v-if="formData.isCompany == 1">
|
||||
<uni-forms-item label="名称" name="name" required>
|
||||
<uv-input class="input" v-model="formData.name" type="text" placeholder="单位名称(必填)" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="税号" name="invoiceCode" required>
|
||||
<uv-input class="input" v-model="formData.invoiceCode" type="text" placeholder="纳税人识别号(必填)" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phone" required>
|
||||
<uv-input class="input" v-model="formData.phone" type="text" placeholder="手机号码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="电子邮箱" name="email" required>
|
||||
<uv-input class="input" v-model="formData.email" type="text" placeholder="电子邮箱" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="开户行" name="bankName" required>
|
||||
<uv-input class="input" v-model="formData.bankName" type="text" placeholder="开户银行名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="银行账号" name="bankAccount" required>
|
||||
<uv-input class="input" v-model="formData.bankAccount" type="text" placeholder="开户银行账号" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="单位地址" name="address" required>
|
||||
<uv-input class="input" v-model="formData.address" type="text" placeholder="单位地址" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="单位电话" name="tel" required>
|
||||
<uv-input class="input" v-model="formData.tel" type="text" placeholder="单位电话" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="备注" name="comments">
|
||||
<uv-textarea v-model="formData.comments" placeholder="请输入备注信息" auto-height></uv-textarea>
|
||||
</uni-forms-item>
|
||||
</block>
|
||||
<uv-button
|
||||
class="add-emergency"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '30px', color: '#ffffff' }"
|
||||
text="确认开票"
|
||||
@click="submit"
|
||||
></uv-button>
|
||||
</uni-forms>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import * as Api from '@/api/booking/userInvoice';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
import { useTenantStore } from '@/store/modules/tenant';
|
||||
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: 0,
|
||||
list: [],
|
||||
statusBarHeight: 104,
|
||||
isLogin: false,
|
||||
fields: {},
|
||||
logo: '',
|
||||
bookingUser: {},
|
||||
server: [],
|
||||
order: [],
|
||||
// 表单数据
|
||||
formData: {
|
||||
type: 0,
|
||||
invoiceType: 0
|
||||
},
|
||||
// 发票类型
|
||||
type: [
|
||||
{
|
||||
text: '电子',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '纸质',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
// 开票类型
|
||||
invoiceType: [
|
||||
{
|
||||
text: '普票',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '专票',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
// 对name字段进行必填验证
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入开票名称'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 对email字段进行必填验证
|
||||
email: {
|
||||
rules: [
|
||||
{
|
||||
format: 'email',
|
||||
errorMessage: '请输入正确的邮箱地址'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(e){
|
||||
this.orderId = e.id
|
||||
},
|
||||
onShow() {
|
||||
this.reload();
|
||||
},
|
||||
methods: {
|
||||
async reload(e) {
|
||||
const app = this;
|
||||
// 当前登录用户信息
|
||||
const userInfo = await userStore.fetchUserInfo();
|
||||
if (Object.keys(userInfo).length > 0) {
|
||||
app.isLogin = true;
|
||||
app.userInfo = userInfo;
|
||||
} else {
|
||||
app.isLogin = false;
|
||||
}
|
||||
|
||||
// 读取最后一次
|
||||
Api.pageUserInvoice({
|
||||
userId: userInfo.userId,
|
||||
limit: 1
|
||||
}).then((res) => {
|
||||
if (res.count > 0 && !app.formData.id) {
|
||||
app.formData = res.list[0];
|
||||
app.formData.orderId = app.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
navTo(item) {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
openUrl(item);
|
||||
},
|
||||
// 弹出登录提示框
|
||||
openLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
editInvoice(){
|
||||
uni.navigateTo({
|
||||
url: `/package/user/invoice-edit?id=${this.formData.id}`
|
||||
})
|
||||
},
|
||||
add() {
|
||||
this.$refs.addForm.open('center');
|
||||
},
|
||||
onDel(item) {
|
||||
const app = this;
|
||||
uni.showModal({
|
||||
title: '确定要删除吗?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
uni.showLoading({
|
||||
title: '请求中.'
|
||||
});
|
||||
Api.removeUserInvoice(item.id).then((res) => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
app.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
|
||||
* @param {String} name 字段名称
|
||||
* @param {String} value 表单域的值
|
||||
*/
|
||||
// binddata(name,value){
|
||||
// // 通过 input 事件设置表单指定 name 的值
|
||||
// this.$refs.form.setValue(name, value)
|
||||
// },
|
||||
// 触发提交表单
|
||||
submit() {
|
||||
const { formData } = this
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then((res) => {
|
||||
Api.doInvoice(formData)
|
||||
.then((message) => {
|
||||
console.log('message: ',message);
|
||||
uni.showToast({
|
||||
title: '开票成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
},1000)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
console.log('表单数据信息：', res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('表单错误信息：', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.avatar {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.save-user-profile {
|
||||
width: 700rpx;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.add-emergency {
|
||||
width: 500rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
margin: auto;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
@@ -81,6 +81,13 @@
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<uni-list-item link @click="navTo(`/package/user/card-detail-invoice?id=${form.id}`)">
|
||||
<template v-slot:body>
|
||||
<view class="slot-box">
|
||||
<text class="slot-text" :style="{ color: '#333333' }">申请开票</text>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</uni-card>
|
||||
@@ -162,7 +169,7 @@ export default {
|
||||
Api.getUserCard(id).then((data) => {
|
||||
app.form = data;
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
onDisabled() {
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :border="false" :is-shadow="false">
|
||||
<uv-cell
|
||||
:title="`场地发票`"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="switchTabTo(`/pages/order`)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :is-shadow="false">
|
||||
<uv-cell
|
||||
:title="`租赁发票`"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="navTo(`/package/user/card`)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :is-shadow="false">
|
||||
<uv-cell
|
||||
:title="`商城发票`"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="navTo(`/package/goods/order`)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import * as Api from '@/api/booking/userInvoice';
|
||||
import {openUrl} from '@/utils/common';
|
||||
|
||||
import {useTenantStore} from '@/store/modules/tenant';
|
||||
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: 0,
|
||||
list: [],
|
||||
statusBarHeight: 104,
|
||||
isLogin: false,
|
||||
fields: {},
|
||||
logo: '',
|
||||
bookingUser: {},
|
||||
server: [],
|
||||
order: [],
|
||||
// 表单数据
|
||||
formData: {
|
||||
type: 0,
|
||||
invoiceType: 0
|
||||
},
|
||||
// 发票类型
|
||||
type: [
|
||||
{
|
||||
text: '电子',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '纸质',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
// 开票类型
|
||||
invoiceType: [
|
||||
{
|
||||
text: '普票',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '专票',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
// 对name字段进行必填验证
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入开票名称'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 对email字段进行必填验证
|
||||
email: {
|
||||
rules: [
|
||||
{
|
||||
format: 'email',
|
||||
errorMessage: '请输入正确的邮箱地址'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderId = e.id
|
||||
},
|
||||
onShow() {
|
||||
this.reload();
|
||||
},
|
||||
methods: {
|
||||
async reload(e) {
|
||||
const app = this;
|
||||
// 当前登录用户信息
|
||||
const userInfo = await userStore.fetchUserInfo();
|
||||
if (Object.keys(userInfo).length > 0) {
|
||||
app.isLogin = true;
|
||||
app.userInfo = userInfo;
|
||||
} else {
|
||||
app.isLogin = false;
|
||||
}
|
||||
|
||||
// 读取最后一次
|
||||
Api.pageUserInvoice({
|
||||
userId: userInfo.userId,
|
||||
limit: 1
|
||||
}).then((res) => {
|
||||
if (res.count > 0 && !app.formData.id) {
|
||||
app.formData = res.list[0];
|
||||
app.formData.orderId = app.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
navTo(url) {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
uni.navigateTo({url});
|
||||
},
|
||||
switchTabTo(url){
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
uni.switchTab({url})
|
||||
},
|
||||
// 弹出登录提示框
|
||||
openLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
editInvoice() {
|
||||
uni.navigateTo({
|
||||
url: `/package/user/invoice-edit?id=${this.formData.id}`
|
||||
})
|
||||
},
|
||||
add() {
|
||||
this.$refs.addForm.open('center');
|
||||
},
|
||||
onDel(item) {
|
||||
const app = this;
|
||||
uni.showModal({
|
||||
title: '确定要删除吗?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
uni.showLoading({
|
||||
title: '请求中.'
|
||||
});
|
||||
Api.removeUserInvoice(item.id).then((res) => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
app.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
|
||||
* @param {String} name 字段名称
|
||||
* @param {String} value 表单域的值
|
||||
*/
|
||||
// binddata(name,value){
|
||||
// // 通过 input 事件设置表单指定 name 的值
|
||||
// this.$refs.form.setValue(name, value)
|
||||
// },
|
||||
// 触发提交表单
|
||||
submit() {
|
||||
const {formData} = this
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then((res) => {
|
||||
Api.doInvoice(formData)
|
||||
.then((message) => {
|
||||
console.log('message: ', message);
|
||||
uni.showToast({
|
||||
title: '开票成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
console.log('表单数据信息：', res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('表单错误信息：', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.avatar {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.save-user-profile {
|
||||
width: 700rpx;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.add-emergency {
|
||||
width: 500rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
margin: auto;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user