15 changed files with 1727 additions and 217 deletions
@ -0,0 +1,349 @@ |
|||
<template> |
|||
<view style="height: 100vh;background: #fff;"> |
|||
<loading-state ref="pageView" @request="request"> |
|||
<view style="height: 100vh;overflow: hidden;overflow-y: auto;"> |
|||
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px 20px 0px 20px;margin-top: 10px; |
|||
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;"> |
|||
|
|||
<text |
|||
style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;"> |
|||
<text style="font-size: 13px;color: #666;">单    价</text> |
|||
<text style="font-size: 13px;color: #999;">{{data.price}}元/{{data.specificationUnit}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;"> |
|||
<text style="font-size: 13px;color: #666;">规    格</text> |
|||
<text |
|||
style="font-size: 13px;color: #999;">{{data.weight}}{{data.specificationUnit}}/{{data.unitName}}</text> |
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;"> |
|||
|
|||
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view> |
|||
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 10px;" v-show="!data.appContent==''"> |
|||
<rich-text :nodes="data.appContent | formatRichText"></rich-text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</loading-state> |
|||
|
|||
<!-- <view style="position: absolute; bottom: 0px; display: flex;flex-direction: column;width: 100%; |
|||
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 13vh;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center; justify-content: center; margin-top:10px;"> |
|||
|
|||
<view id="bomView" style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;"> |
|||
温馨提示：已订</view> |
|||
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;"> |
|||
{{page.weight}}斤 |
|||
</view> |
|||
|
|||
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;"> |
|||
，{{data.qssl}}斤起订。</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop2()"> |
|||
<text |
|||
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;"> |
|||
起订说明</text> |
|||
<text |
|||
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;margin-left: 2px;"> |
|||
>></text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 20px;"> |
|||
|
|||
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px; |
|||
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;" |
|||
@click="inCart()">加入购物车</text> |
|||
|
|||
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 5px;height: 42px;flex: 1; |
|||
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @click="gotoCart()"> |
|||
<image src="../../static/shoppCart_icon.png" mode="aspectFill" |
|||
style="height: 20px;width: 20px;flex-shrink: 0;"> |
|||
</image> |
|||
<view style="display: flex;flex-direction: column;flex: 1;"> |
|||
<text |
|||
style="font-size: 15px;color: #FF5006;margin-left: 5px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text> |
|||
<text v-if="page.remarks!=''" |
|||
style="font-size: 10px;color: #666;margin-left: 5px; height: 10px;line-height: 10px;margin-bottom: 5px;">{{page.remarks}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px; |
|||
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;" |
|||
@click="settlement()">结算</text> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<uni-popup ref="inputDialog" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="more" title="订购协议" :showConfirm="true" |
|||
:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="data.dgxy" |
|||
:confirm-text="confirmText"></uni-popup-dialog> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="inputDialog2" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="more" title="起订说明" :showConfirm="true" |
|||
:beforeClose="dialogBeforeClose2" @confirm="dialogInputConfirm2" |
|||
:content="data.qdxy"></uni-popup-dialog> |
|||
</uni-popup> --> |
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
weight: "", |
|||
remarks: "", |
|||
price: "" |
|||
}, |
|||
data: { |
|||
picUrl: '', |
|||
name: '', |
|||
price: '', |
|||
remarks: '', |
|||
appContent: "" |
|||
}, |
|||
|
|||
dialogContent: "这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容这里是协议内容，这里是协议内容", |
|||
confirmText: "我知道了（5s）", |
|||
dialogBeforeClose: false, |
|||
dialogBeforeClose2: false, |
|||
countdown: 5, |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
}, |
|||
onShow() { |
|||
this.request() |
|||
}, |
|||
filters: { |
|||
/** |
|||
* 处理富文本里的图片宽度自适应 |
|||
* 1.去掉img标签里的style、width、height属性 |
|||
* 2.img标签添加style属性：max-width:100%;height:auto |
|||
* 3.修改所有style里的width属性为max-width:100% |
|||
* 4.去掉<br/>标签 |
|||
* @param html |
|||
* @returns {void|string|*} |
|||
*/ |
|||
formatRichText(html) { |
|||
//控制小程序中图片大小 |
|||
if (html) { |
|||
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { |
|||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); |
|||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); |
|||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); |
|||
return match; |
|||
}); |
|||
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { |
|||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, |
|||
'max-width:100%;'); |
|||
return match; |
|||
}); |
|||
newContent = newContent.replace(/<br[^>]*\/>/gi, ''); |
|||
newContent = newContent.replace(/\<img/gi, |
|||
'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"'); |
|||
return newContent; |
|||
} else { |
|||
return '暂无商品详情'; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
request() { |
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
sid: this.page.sid, |
|||
} |
|||
|
|||
console.log("request", params); |
|||
|
|||
|
|||
let _this = this |
|||
|
|||
_this.$api.goodsDetail(params).then((resp) => { |
|||
// console.log(resp); |
|||
_this.data = resp |
|||
|
|||
_this.getAllPriceOrWeight() |
|||
|
|||
// _this.$nextTick(() => { |
|||
// _this.$refs.pageView.setLoadState(2) |
|||
// }) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
getAllPriceOrWeight() { |
|||
let _this = this |
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
brandId: _this.data.brandId, |
|||
} |
|||
|
|||
console.log("getGoodsWeight", params); |
|||
|
|||
_this.$api.getGoodsWeight(params).then((resp) => { |
|||
|
|||
console.log("getGoodsWeight", resp); |
|||
|
|||
_this.page.price = resp.totalPrice |
|||
_this.page.weight = resp.totalWeight |
|||
_this.page.remarks = resp.remarks |
|||
|
|||
|
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
inCart() { |
|||
|
|||
this.data.goodsNumber = Number(this.data.goodsNumber) + 1 |
|||
|
|||
this.upDateShoppCart() |
|||
}, |
|||
upDateShoppCart() { |
|||
var good = { |
|||
goodsSid: this.data.sid, |
|||
goodsName: this.data.name, |
|||
goodsNumber: this.data.goodsNumber, |
|||
affiliation: this.data.brandId, |
|||
price: this.data.mefenPrice, |
|||
weight: this.data.weight, |
|||
customerSid: getApp().globalData.sid |
|||
} |
|||
|
|||
let _this = this |
|||
_this.$api.addShoppingCart(good).then((resp) => { |
|||
_this.shortToast('已加入购物车。') |
|||
_this.getAllPriceOrWeight() |
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
settlement() { |
|||
// 支付 |
|||
|
|||
if (this.page.weight < parseInt(this.data.qssl)) { |
|||
this.shortToast('满' + this.data.qssl + '斤才可定制云菜窖哦，请继续选菜吧。') |
|||
return |
|||
} |
|||
|
|||
this.showPop() |
|||
|
|||
}, |
|||
showPop() { |
|||
|
|||
this.$refs.inputDialog.open() |
|||
|
|||
let timeOut = setInterval(() => { |
|||
|
|||
if (this.countdown == 1) { |
|||
this.confirmText = "确定" |
|||
this.countdown = 5 |
|||
this.dialogBeforeClose = false |
|||
clearInterval(timeOut) |
|||
|
|||
} else { |
|||
this.dialogBeforeClose = true |
|||
this.countdown = this.countdown - 1; |
|||
this.confirmText = "我知道了" + "（" + this.countdown + "s）" |
|||
} |
|||
}, 1000) |
|||
}, |
|||
saveGoods() { |
|||
|
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
// cardNumber: 1, |
|||
brandId: this.data.brandId, |
|||
totalTee: this.page.price, |
|||
|
|||
// ordOrderDetailsVoList: list |
|||
} |
|||
console.log("params", params); |
|||
|
|||
let _this = this |
|||
_this.$api.createVegeOrder(params).then((resp) => { |
|||
|
|||
// console.log("resp", resp); |
|||
this.$pay(resp) |
|||
}).catch(e => {}) |
|||
|
|||
|
|||
}, |
|||
|
|||
gotoCart() { |
|||
uni.navigateTo({ |
|||
url: 'shoppCart?affiliation=' + this.data.brandId + "&weight=" + this.data.qssl + "&qdxy=" + |
|||
this.data.qdxy |
|||
}) |
|||
}, |
|||
showPop2() { |
|||
|
|||
this.$refs.inputDialog2.open() |
|||
|
|||
}, |
|||
dialogInputConfirm(val) { |
|||
if (this.confirmText == "确定") { |
|||
this.confirmText = "我知道了（5s）", |
|||
this.dialogBeforeClose = true, |
|||
this.countdown = 5 |
|||
this.saveGoods() |
|||
} |
|||
|
|||
}, |
|||
|
|||
dialogInputConfirm2(val) { |
|||
console.log(">>>>>>>>>>>", this.dialogBeforeClose2); |
|||
this.dialogBeforeClose2 = false |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
uni-page-body, |
|||
page { |
|||
background: #f3f4f6; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,327 @@ |
|||
<template> |
|||
<view class="page"> |
|||
|
|||
<view style="height: 80vh;overflow: hidden;overflow-y: auto;padding: 12px;"> |
|||
|
|||
<view class="top"> |
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">发票类型</text> |
|||
|
|||
<radio-group @change="radioChange"> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="普通发票" |
|||
:checked="info.invoiceType=='普通发票'">普通发票</radio> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="增值税发票" |
|||
:checked="info.invoiceType=='增值税发票'">增值税发票</radio> |
|||
</radio-group> |
|||
</view> |
|||
|
|||
<view class="top-item" style="margin-top: 24px;"> |
|||
|
|||
<text class="item-text">抬头类型</text> |
|||
|
|||
<radio-group @change="radioChange2"> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="个人或事业单位" |
|||
:checked="info.headingType=='个人或事业单位'">个人或事业单位 |
|||
</radio> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="企业" |
|||
:checked="info.headingType=='企业'">企业</radio> |
|||
</radio-group> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="bom"> |
|||
|
|||
<view class="bom-item"> |
|||
|
|||
<text class="item-text">发票抬头</text> |
|||
|
|||
<view class="item-right"> |
|||
<view style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="填写抬头名称" v-model="info.invoiceHeader" /> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="isPerson"> |
|||
<view style="display: flex;flex-direction: column;" v-if="showDetail"> |
|||
|
|||
<view class="bom-item" style="margin-top: 12px;"> |
|||
|
|||
<text class="item-text">税号</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="纳税人识别号或社会统一征信代码" |
|||
v-model="info.dutyParagraph" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bom-item" style="margin-top: 12px;"> |
|||
|
|||
<text class="item-text">开户银行</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.bankOfDeposit" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="bom-item" style="margin-top: 12px;"> |
|||
|
|||
<text class="item-text">银行账号</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.bankAccount" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="bom-item" style="margin-top: 12px;"> |
|||
|
|||
<text class="item-text">企业地址</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.enterpriseAddress" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="bom-item" style="margin-top: 12px;"> |
|||
|
|||
<text class="item-text">企业电话</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.enterprisePhone" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="item_btn" v-if="!showDetail" @click="showDetailClick(item)"> |
|||
<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text> |
|||
<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
<view class="item_btn" v-if="showDetail" @click="showDetailClick(item)"> |
|||
<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text> |
|||
<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="default"> |
|||
|
|||
<text class="item-text">设为默认</text> |
|||
|
|||
<radio :checked="radioDefault" @click="radioDefaultClick" style="transform:scale(0.8);" color="#FF9900"> |
|||
</radio> |
|||
</view> |
|||
|
|||
</view> |
|||
<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%; |
|||
box-sizing: border-box;padding-left: 40px;padding-right: 40px; "> |
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); |
|||
width: 100%;border-radius: 25px;height: 50px;text-align: center; |
|||
line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save"> |
|||
完成</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
isPerson: true, |
|||
showDetail: false, |
|||
radioDefault: false, |
|||
info: { |
|||
sid:"", |
|||
invoiceType: "", //发票类型 |
|||
headingType: "", //抬头类型 |
|||
invoiceHeader: "", //发票抬头 |
|||
dutyParagraph: "", //税号 |
|||
bankOfDeposit: "", //开户行 |
|||
bankAccount: "", //账号 |
|||
enterpriseAddress: "", //企业地址 |
|||
enterprisePhone: "", //企业电话 |
|||
isDefault: "0", //是否默认 1 为默认 |
|||
customerSid: getApp().globalData.sid, |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
console.log("options", options); |
|||
|
|||
if (JSON.stringify(options) != '{}') { |
|||
let userInfo = JSON.parse(decodeURIComponent(options.info)); |
|||
console.log('userInfo', userInfo); |
|||
this.info = userInfo |
|||
this.radioDefault = this.info.isDefault == '1' |
|||
this.isPerson = this.info.headingType != '个人或事业单位' |
|||
} |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
radioChange(val) { |
|||
console.log("radioChange", val); |
|||
this.info.invoiceType = val.detail.value |
|||
}, |
|||
radioChange2(val) { |
|||
console.log("radioChange2", val); |
|||
|
|||
this.info.headingType = val.detail.value |
|||
|
|||
this.isPerson = val.detail.value != "个人或事业单位" |
|||
|
|||
|
|||
}, |
|||
showDetailClick() { |
|||
this.showDetail = !this.showDetail |
|||
}, |
|||
radioDefaultClick() { |
|||
this.radioDefault = !this.radioDefault |
|||
|
|||
this.info.isDefault = this.radioDefault ? "1" : "0" |
|||
|
|||
}, |
|||
save() { |
|||
|
|||
console.log("save", this.info); |
|||
|
|||
if (this.stringIsEmpty(this.info.invoiceType)) { |
|||
this.shortToast('请选择发票类型') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.info.headingType)) { |
|||
this.shortToast('请选择抬头类型') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.info.invoiceHeader)) { |
|||
this.shortToast('发票抬头不能为空') |
|||
return |
|||
} |
|||
|
|||
if (this.isPerson) { |
|||
if (this.stringIsEmpty(this.info.dutyParagraph)) { |
|||
this.shortToast('税号不能为空') |
|||
return |
|||
} |
|||
} |
|||
|
|||
this.$api.saveOrUpdateInvoice(this.info).then((resp) => { |
|||
this.info.sid = resp |
|||
bus.$emit('invoice', this.info); |
|||
uni.navigateBack() |
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page { |
|||
background: #F7F7F7; |
|||
height: 100vh; |
|||
|
|||
.top { |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
padding: 16px 12px; |
|||
|
|||
.top-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item-right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.bom { |
|||
margin-top: 12px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
padding: 16px 12px; |
|||
|
|||
.bom-item { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
.item-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item-right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
|
|||
.input { |
|||
width: 100%; |
|||
text-align: right; |
|||
pointer-events: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item_btn { |
|||
margin-top: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
width: 100%; |
|||
justify-content: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
.default { |
|||
margin-top: 12px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
padding: 16px 12px; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,478 @@ |
|||
<template> |
|||
<view class="page"> |
|||
|
|||
<view style="height: 80vh;overflow: hidden;overflow-y: auto;padding: 12px;"> |
|||
|
|||
<view class="top"> |
|||
|
|||
<view class="top-item" style="margin-top: 0px;"> |
|||
|
|||
<text class="item-text">发票类型</text> |
|||
|
|||
<radio-group @change="radioChange"> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="普通发票" |
|||
:checked="info.invoiceType=='普通发票'">普通发票</radio> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="增值税发票" |
|||
:checked="info.invoiceType=='增值税发票'">增值税发票</radio> |
|||
</radio-group> |
|||
</view> |
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">抬头类型</text> |
|||
|
|||
<radio-group @change="radioChange2"> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="个人或事业单位" |
|||
:checked="info.headingType=='个人或事业单位'">个人或事业单位 |
|||
</radio> |
|||
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="企业" |
|||
:checked="info.headingType=='企业'">企业</radio> |
|||
</radio-group> |
|||
|
|||
</view> |
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">发票抬头</text> |
|||
|
|||
<view class="item-right"> |
|||
<view style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="填写抬头名称" v-model="info.invoiceHeader" /> |
|||
</view> |
|||
|
|||
<image src="../../static/more.png" style="width: 15px;height: 15px;margin-left: 5px;" |
|||
@click="showList"></image> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="isPerson"> |
|||
<view style="display: flex;flex-direction: column;" v-if="showDetail"> |
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">税号</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="纳税人识别号或社会统一征信代码" |
|||
v-model="info.dutyParagraph" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">开户银行</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.bankOfDeposit" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">银行账号</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.bankAccount" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">企业地址</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.enterpriseAddress" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="top-item"> |
|||
|
|||
<text class="item-text">企业电话</text> |
|||
|
|||
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;"> |
|||
<input class="input" type="text" placeholder="选填" v-model="info.enterprisePhone" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="item_btn" v-if="!showDetail" @click="showDetailClick(item)"> |
|||
<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text> |
|||
<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
<view class="item_btn" v-if="showDetail" @click="showDetailClick(item)"> |
|||
<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text> |
|||
<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%; |
|||
box-sizing: border-box;padding-left: 40px;padding-right: 40px; "> |
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); |
|||
width: 100%;border-radius: 25px;height: 50px;text-align: center; |
|||
line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save"> |
|||
提交申请</view> |
|||
</view> |
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view> |
|||
<view class="modalDlg" id="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding: 12px;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; width: 100%;"> |
|||
|
|||
<text style="font-size: 16px;font-weight: 600;font-family: sans-serif;margin-left: 5px;">选择抬头</text> |
|||
<image src="../../static/close2.png" style="width: 25px;height: 25px;" @click.stop="colseDialog()"> |
|||
</image> |
|||
|
|||
</view> |
|||
|
|||
<scroll-view scroll-y="true" :show-scrollbar="false" |
|||
style="margin-top: 10px;padding-left: 12px;padding-right: 12px;box-sizing: border-box;" |
|||
:style="'height:'+viewHeight+'px'"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;" |
|||
v-if="showData"> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center; |
|||
background: #fff; border-radius: 10px; margin-top: 12px;padding: 20px 12px;" @click="itemClick(item)"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: row;align-items: center;"> |
|||
<text |
|||
style="font-size: 16px;font-weight: 600;font-family: sans-serif;">{{item.invoiceHeader}}</text> |
|||
<text v-if="item.isDefault==1" style="background: #FFF0DA; color: #FF7200; |
|||
font-size: 10px;margin-left: 6px;border-radius: 5px;padding: 2px 5px;">默认</text> |
|||
</view> |
|||
|
|||
<text style="font-size: 12px;color: #999;margin-top: 5px;"> |
|||
{{item.invoiceType}} - {{item.headingType}}</text> |
|||
|
|||
</view> |
|||
|
|||
<text style="font-size: 12px;color: #999;" @click.stop="editItem(item)">编辑</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view v-if="notData" style="display: flex;flex-direction: column;align-items: center;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/notData.png" mode="aspectFit" |
|||
style="width: 100px;height: 100px;"></image> |
|||
<view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;"> |
|||
<text style="font-size: 14px; color: #999;margin-right: 5px;">暂无数据</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</scroll-view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%; |
|||
box-sizing: border-box;padding-left: 40px;padding-right: 40px; "> |
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); |
|||
width: 100%;border-radius: 25px;height: 50px;text-align: center; |
|||
line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="addInviice"> |
|||
添加新的抬头</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
showModal: false, |
|||
showData: false, |
|||
notData: true, |
|||
viewHeight: "", |
|||
page: { |
|||
sid: "" |
|||
}, |
|||
isPerson: true, |
|||
showDetail: false, |
|||
radioDefault: false, |
|||
info: { |
|||
sid: "", |
|||
invoiceType: "", //发票类型 |
|||
headingType: "", //抬头类型 |
|||
invoiceHeader: "", //发票抬头 |
|||
dutyParagraph: "", //税号 |
|||
bankOfDeposit: "", //开户行 |
|||
bankAccount: "", //账号 |
|||
enterpriseAddress: "", //企业地址 |
|||
enterprisePhone: "", //企业电话 |
|||
isDefault: "0", //是否默认 1 为默认 |
|||
customerSid: getApp().globalData.sid, |
|||
orderSid: "" // 订单sid |
|||
}, |
|||
data: [] |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.getData() |
|||
//隐藏加载框 |
|||
// uni.hideLoading(); |
|||
}, |
|||
onShow() { |
|||
// this.getData() |
|||
// //隐藏加载框 |
|||
// uni.hideLoading(); |
|||
}, |
|||
created() { |
|||
var _this = this |
|||
this.$bus.$on('invoice', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
|
|||
const index = _this.data.findIndex(item => item.sid == msg.sid) |
|||
console.log(">>>>", index) |
|||
if (index != -1) { |
|||
// 替换 已修改过 |
|||
_this.data.splice(index, 1, msg) |
|||
} else { |
|||
// 刚新增的 |
|||
_this.data.push(msg) |
|||
} |
|||
|
|||
|
|||
}); |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
|
|||
this.$api.getInvoiceList(getApp().globalData.sid).then((resp) => { |
|||
console.log("getInvoiceList>>>" + resp); |
|||
this.data = resp |
|||
|
|||
const arr1 = this.data.filter(item => item.isDefault == 1) |
|||
console.log(">>>>", arr1) |
|||
|
|||
if (arr1.length > 0) { |
|||
this.info = arr1[0] |
|||
this.isPerson = this.info.headingType != '个人或事业单位' |
|||
} |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
|
|||
}, |
|||
showList() { |
|||
this.showModal = true |
|||
uni.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
setTimeout(() => { |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.select('.modalDlg').boundingClientRect(data => { |
|||
console.log("得到布局位置信息" + JSON.stringify(data)); |
|||
console.log("节点离页面顶部的距离为" + data.top); |
|||
console.log("节点离页面顶部的距离为" + data.height); |
|||
this.viewHeight = data.height - 135 |
|||
this.showData = this.data.length > 0 |
|||
this.notData = this.data.length == 0 |
|||
|
|||
console.log("showData2" + this.showData); |
|||
console.log("notData2" + this.notData); |
|||
|
|||
//隐藏加载框 |
|||
uni.hideLoading(); |
|||
}).exec(); |
|||
|
|||
}, 500) |
|||
|
|||
}, |
|||
|
|||
itemClick(item) { |
|||
console.log("itemClick", item); |
|||
|
|||
this.info = item |
|||
this.isPerson = this.info.headingType != '个人或事业单位' |
|||
this.colseDialog() |
|||
|
|||
}, |
|||
editItem(item) { |
|||
console.log("editItem", item); |
|||
|
|||
uni.navigateTo({ |
|||
url: "/pages/me/addInvoice?info=" + encodeURIComponent(JSON.stringify(item)) |
|||
}) |
|||
}, |
|||
colseDialog() { |
|||
this.showModal = false |
|||
}, |
|||
addInviice() { |
|||
uni.navigateTo({ |
|||
url: "/pages/me/addInvoice" |
|||
}) |
|||
}, |
|||
radioChange(val) { |
|||
console.log("radioChange", val); |
|||
this.info.invoiceType = val.detail.value |
|||
}, |
|||
radioChange2(val) { |
|||
console.log("radioChange2", val); |
|||
|
|||
this.info.headingType = val.detail.value |
|||
|
|||
this.isPerson = val.detail.value != "个人或事业单位" |
|||
|
|||
|
|||
}, |
|||
showDetailClick() { |
|||
this.showDetail = !this.showDetail |
|||
}, |
|||
radioDefaultClick() { |
|||
this.radioDefault = !this.radioDefault |
|||
|
|||
this.info.isDefault = this.radioDefault ? "1" : "0" |
|||
|
|||
}, |
|||
save() { |
|||
|
|||
console.log("save", this.info); |
|||
|
|||
if (this.stringIsEmpty(this.info.invoiceType)) { |
|||
this.shortToast('请选择发票类型') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.info.headingType)) { |
|||
this.shortToast('请选择抬头类型') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.info.invoiceHeader)) { |
|||
this.shortToast('发票抬头不能为空') |
|||
return |
|||
} |
|||
|
|||
if (this.isPerson) { |
|||
if (this.stringIsEmpty(this.info.dutyParagraph)) { |
|||
this.shortToast('税号不能为空') |
|||
return |
|||
} |
|||
} |
|||
this.info.orderSid = this.page.sid |
|||
|
|||
console.log("info", this.info); |
|||
|
|||
this.$api.submitInvoice(this.info).then((resp) => { |
|||
uni.navigateBack() |
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0; |
|||
height: 0; |
|||
color: transparent; |
|||
} |
|||
|
|||
.page { |
|||
background: #F7F7F7; |
|||
height: 100vh; |
|||
|
|||
.top { |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
padding: 16px 12px; |
|||
|
|||
.top-item { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item-right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
|
|||
.input { |
|||
width: 100%; |
|||
text-align: right; |
|||
pointer-events: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item_btn { |
|||
margin-top: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
width: 100%; |
|||
justify-content: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/* 弹窗样式 */ |
|||
.model { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #000; |
|||
z-index: 1; |
|||
opacity: 0.5; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.modalDlg { |
|||
/* 设置超出滚动 */ |
|||
overflow: auto; |
|||
width: 100%; |
|||
position: fixed; |
|||
top: 70vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
background-color: #F7F7F7; |
|||
border-top-right-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
button::after { |
|||
border: 0; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 879 B |
Loading…
Reference in new issue