Skip to content

U
uni-pdtravel
Commit efbb4c50 authored by zhoucong's avatar zhoucong
Browse files
Options

相册支付功能实现

parent 0993b66d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 788 additions and 277 deletions
common/common.js
View file @ efbb4c50
export default{
//调用方法时--this.$commonjs.aaa()
//调用方法时--this.$commonjs.today()
today:function(){//默认当天
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
return today
},
todayTime:function(){
var now = new Date();
var hour = now.getHours()<10?'0'+now.getHours():now.getHours()
var minutes = now.getMinutes()<10?'0'+now.getMinutes():now.getMinutes()
var seconds = now.getSeconds()<10?'0'+now.getSeconds():now.getSeconds()
var time = hour+":"+minutes+":"+seconds
return time
}
}
//调用方法时--this.$commonjs.today()
\ No newline at end of file
flitter.js 0 → 100644
View file @ efbb4c50
import Vue from 'vue'
Vue.filter('money', function(val) {//格式化金额
if(!val) return '0.00';
let tempVal = parseFloat(val).toFixed(3)
let realVal = tempVal.substring(0, tempVal.length - 1)
var intPart = Number(realVal) - Number(realVal)%1; //获取整数部分（这里是windy93的方法）
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
var value2Array = realVal.toString().split(".");
var floatPart = value2Array[1].toString(); //拿到小数部分
return intPartFormat + "." + floatPart;
})
\ No newline at end of file
main.js
View file @ efbb4c50
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
import './flitter'
import request from 'common/request.js'
import "./common/icon/iconfont.css"
import commonjs from "common/common.js"
......@@ -9,6 +10,13 @@ Vue.prototype.$commonjs = commonjs
Vue.prototype.$request = request
Vue.use(uView)
if(process.env.NODE_ENV === 'development'){//开发环境
Vue.prototype.imgUrl = "http://picture.tuyoyoo.com/"
}else{
Vue.prototype.imgUrl = "http://picture.pangdly.com/"
}
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
......
pages.json
View file @ efbb4c50
......@@ -14,18 +14,26 @@
"navigationBarTitleText": "订单支付",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/vlog/orderPay/orderPay",
"style" :
{
"navigationBarTitleText": "订单支付",
"navigationBarTitleText": "确认订单",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path" : "pages/vlog/shippingAddress/shippingAddress",
"style" :
{
"navigationBarTitleText": "填写收货地址",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/login/login",
......
pages/my/order/electronicTicket/electronicTicket.vue
View file @ efbb4c50
......@@ -12,6 +12,13 @@
}
},
onLoad(option) {
//相册完成支付后删除Storage内保存的数据
uni.removeStorageSync('productVo')
uni.removeStorageSync('coverInside')
uni.removeStorageSync('imgList')
uni.removeStorageSync('checkList')
uni.removeStorageSync('sortImglist')
let pdOpenid=uni.getStorageSync("openid")//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync("token")
let pdCreateUserId=uni.getStorageSync("createUserId")
......
pages/orderPayment/orderPayment.vue
View file @ efbb4c50
......@@ -53,12 +53,10 @@
<text>
实际支付
</text>
<text>
<!--<i>
¥{{totalMoney}}
</i>-->
<text>
<text style="font-size:28rpx;">¥</text>{{pdOrderMoney}}
</text>
......
pages/vlog/components/dragImg/dragImg.vue
View file @ efbb4c50
......@@ -10,7 +10,7 @@
<!-- start:请在该区域编写自己的渲染逻辑 -->
<view class="info">
<view class="info__item">
<image class="image" :src="item.data.images" mode="widthFix"></image>
<image class="image" :src="imgUrl+item.data.images" mode="widthFix"></image>
</view>
<view class="info__item_btn" @click.stop="replace(item)">
更换
......@@ -21,9 +21,8 @@
</view>
<u-popup v-model="show" mode="bottom" height="50%">
<view style="display: flex;flex-wrap: wrap;width: 100%;">
<view style="width: 25%;padding: 10rpx;" v-for="(item,index) in alternateImages" :key="index">
<image :src="item.images" style="width: 100%;" mode="widthFix" @click="changeImglist(item.images)">
</image>
<view style="width: 25%;padding: 10rpx;" :style="{ height: itemWrapHeight + 'px' }" v-for="(item,index) in alternateImages" :key="index">
<image :src="imgUrl+item.images" style="width: 100%;height: 100%;"@click="changeImglist(item.images)"></image>
</view>
</view>
</u-popup>
......@@ -33,7 +32,7 @@
<script>
export default {
props: {
listData: { // 数据源
listData: { // 已选择图片
type: Array,
default: () => {
return []
......@@ -43,40 +42,15 @@
type: Number,
default: 0
},
alternateImages: { // 备选图片
type: Array,
default: () => {
return []
}
},
},
data() {
return {
alternateImages: [{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
},
{
images: '/static/images/swipe/9.png'
},
{
images: '/static/images/swipe/10.png'
}
], //备选图片
checkImg: "", //点击更改图片的key
show: false, //照片图库弹出层
cur: -1, // 当前激活的元素
......
pages/vlog/orderPay/orderPay.vue
View file @ efbb4c50
<template>
<view class="content">
<view class="content" v-show="showBody">
<view class="top1" v-if="addressShow" @click="changeAddress">
<text style="float: left;">请填写收货地址</text>
<u-icon name="arrow-right" style="float: right;margin-top: 10upx;" color="#666666"></u-icon>
</view>
<view class="top" v-else @click="changeAddress">
<view class="address">
<u-icon name="map" style="margin-right: 10upx;"></u-icon>{{address.address}}
</view>
<view class="name">
<text
style="margin-right: 10upx;margin-left: 40upx;">{{address.name}}</text><text>{{address.phone}}</text>
</view>
<u-icon name="arrow-right" class="icon" color="#666666"></u-icon>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode=""
style="width: 110%;height: 10upx;margin-left: -20upx;"></image>
<view class="body">
<image :src="productVo.priceStockList[0].imgList[0].url"></image>
<view class="title">
<view>{{productVo.name}}</view>
<view class="price">￥{{ price}}</view>
</view>
</view>
<u-cell-group>
<u-cell-item title="商品金额" :value="'￥'+ price" :arrow="false"></u-cell-item>
<u-cell-item title="运费" :value="'￥'+Freight.defaultCost" :arrow="false"></u-cell-item>
</u-cell-group>
<view class="bottom">
<view class="price">
￥{{allprice | money}}
</view>
<view class="confirm">
<u-button type="success" style="background-color: red;" @click="confirm">确认订单</u-button>
</view>
</view>
</view>
</template>
......@@ -8,17 +42,264 @@
export default {
data() {
return {
showBody: false,
price: "", //单价
allprice: "", //总价
productVo: {}, //当前的产品信息
address: {
name: "", //姓名
phone: "", //联系电话
address: "" //地址
}, //地址信息
addressShow: true,
Freight: {}, //手续费信息
}
},
onLoad(){//代替 vue 里面的 created
onLoad() { //代替 vue 里面的 created
this.productVo = uni.getStorageSync('productVo')
this.price = (this.productVo.priceStockList[0].sellingPrice * 1).toFixed(2)
this.getAddress()
},
onReady() {//代替 vue 里面的 mounted
onReady() { //代替 vue 里面的 mounted
},
methods: {
confirm() { //确认订单
if (this.address.name == '') {
return uni.showLoading({
title: '收件人不能为空!'
});
}
if (this.address.address == '') {
return uni.showLoading({
title: '收货地址不能为空!'
});
}
if (this.address.phone == '') {
return uni.showLoading({
title: '联系方式不能为空!'
});
}
uni.showLoading({
title: '订单创建中'
});
let imgList = []
imgList = uni.getStorageSync('sortImglist')
let coverInside = uni.getStorageSync('coverInside')
imgList.push(uni.getStorageSync('coverInside').cover)
imgList.push(uni.getStorageSync('coverInside').inside)
let data = {
buyMethod: 1, //购买方式：1 单品购买，2套票、联票购买，3组合购买
cash: 0, //现金抵扣
companyId: "10001", //来源公司id(分销商Id)
orderMoney: this.allprice * 1, //订单总价 = 订单原价 - 优惠券价格 - 现金抵扣价格
orderProductList: [], //产品信息列表(单品购买为空，联票购买不为空，带有儿童票或者耳机的票不为空，组合购买不为空)
userId: uni.getStorageSync('openid'), //openid
orderSource: 1, //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
orderType: 4, //订单类型(0其他，1景区，2酒店，3餐饮，4特产，5运营车，10组合订单)
ticketPhone: this.address.phone,
orderProductVo: {
buyNum: 1, //购买数量
couponList: [],
cruisePlanId: "",
endPlayDate: this.$commonjs.today(),
endPlayTime: this.$commonjs.todayTime(),
isMaster: 0,
distributionPrice: this.price * 1, //分销商价格
merchantId: this.productVo.merchantId, //商户id
playDate: this.$commonjs.today(),
productId: this.productVo.id,
startPlayTime: this.$commonjs.todayTime(),
subOrderType: 0, //子订单类型(0、网络，1、扫码，2、自助机，3 组合，4、扫码支付，5、预订)
unitPrice: this.price * 1, //产品单价
orderImgList: imgList, //订单图片
postage: this.Freight.defaultCost * 1, //邮费
orderTouristList: [{ //用户收货地址信息
category: 0,
name: this.address.name,
touristAddress: this.address.address,
phone: this.address.phone
}],
}
}
this.$request('orderc/order/createOrder', data).then(res => {
if (res.code == "00") {
this.$u.route("pages/orderPayment/orderPayment", {
orderId: res.data.id
})
uni.hideLoading();
}
})
},
changeAddress() { //跳转修改地址页面
this.$u.route("pages/vlog/shippingAddress/shippingAddress", this.address)
},
getAddress() { //获取收货地址
this.$request('wechatUser/contact/findContactList', {
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code == "00") {
this.address = res.data[0]
this.addressShow = false
this.getFreight()
}else{
uni.showModal({
showCancel: false,
title: '提示',
content: res.message,
});
}
})
},
getFreight() { //获取运费
this.$request('scenic/user/product/getProductPostage', {
id: this.productVo.id
}).then(res => {
if (res.code == "00") {
this.Freight = res.data
this.Freight.defaultCost = (this.Freight.defaultCost * 1).toFixed(2)
this.allprice = ((this.productVo.priceStockList[0].sellingPrice * 1) + (this.Freight
.defaultCost * 1))
this.showBody = true
}else{
uni.showModal({
showCancel: false,
title: '提示',
content: res.message,
});
}
})
},
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;box-sizing: border-box;margin: 0 auto;}
.content {
padding: 0 20rpx;
box-sizing: border-box;
margin: 0 auto;
background-color: #fff;
}
.cell {
display: flex;
align-items: center;
height: 80upx;
line-height: 80upx;
border-bottom: 1upx solid #ccc;
text {
width: 20%;
margin-left: 30upx;
}
}
.top1 {
height: 50upx;
line-height: 50upx;
font-weight: bold;
}
.top {
height: 100upx;
position: relative;
padding-top: 10upx;
.name {
font-size: 28upx;
color: #666666;
line-height: 50upx;
}
.address {
font-size: 32upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 50upx;
}
.icon {
line-height: 100upx;
position: absolute;
right: 0;
top: 40%;
}
}
.body {
display: flex;
margin-top: 20upx;
margin-bottom: 20upx;
image {
width: 240upx;
height: 240upx;
border-radius: 10upx;
}
.title {
width: 65%;
font-size: 36upx;
font-weight: bold;
padding: 20upx;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
view {
text-overflow: ellipsis;
white-space: nowrap;
}
.price {
color: #3688FF;
}
}
}
.product_price {
display: flex;
justify-content: space-between;
font-size: 40upx;
font-weight: bold;
}
.yunfei {
display: flex;
justify-content: space-between;
font-size: 40upx;
font-weight: bold;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
right: 0;
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
view {
display: inline-block;
}
.confirm {
background-color: #FFE600;
width: 200upx;
float: right;
text-align: center;
border-radius: 10upx;
}
.price {
color: #EE520E;
padding-left: 20upx;
}
}
</style>
pages/vlog/pictureFormat/pictureFormat.vue
View file @ efbb4c50
......@@ -4,7 +4,7 @@
<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
</view>
<view class="top">
<dragImg :listData="imgList" @change="changeImgList" :columns="4"></dragImg>
<dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="4"></dragImg>
</view>
<view class="bottom" @click="next">
下一步
......@@ -20,57 +20,53 @@
},
data() {
return {
imgList: [{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
},
{
images: '/static/images/swipe/9.png'
},
{
images: '/static/images/swipe/10.png'
}
],
sortImglist:[]
alternateImages:[],//备选图片
imgList: [],//已选择图片
sortImglist:[]//排序后图片
}
},
onLoad() { //代替 vue 里面的 created
var allImgList=uni.getStorageSync('imgList')
var allImgList1=JSON.parse(JSON.stringify(allImgList))
allImgList.forEach(item=>{//备选图片
var obj={
images:item.url
}
this.alternateImages.push(obj)
})
allImgList1.forEach(item=>{//已选择图片
if(item.check===1){
var obj={
images:item.url
}
this.imgList.push(obj)
}
})
},
onReady() { //代替 vue 里面的 mounted
this.imgList.forEach((item,index)=>{//处理数据并保存初始顺序
let obj={
imgName:index,
imgUrl:item.images
}
this.sortImglist.push(obj)
})
uni.setStorageSync("sortImglist",this.sortImglist)
},
methods: {
changeImgList(res) {
this.sortImglist=res.listData
},
next(){//下一步
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径，请见下方"注意事项"
url:"pages/vlog/orderPay/orderPay",
// 内部已设置以下默认参数值，可不传这些参数
params: {
changeImgList(res) {//接收子组件传递数据更改排序
this.sortImglist=[]
res.listData.forEach((item,index)=>{
let obj={
imgName:index,
imgUrl:item.images
}
this.sortImglist.push(obj)
})
uni.setStorageSync("sortImglist",this.sortImglist)
},
next(){//下一步
this.$u.route("pages/vlog/orderPay/orderPay")
}
}
}
......
pages/vlog/product/product.vue
View file @ efbb4c50
......@@ -23,7 +23,7 @@
</navigator>
</view>
<view class="guige" v-if="item.priceStockList[0].standardName">
规格:{{item.priceStockList[0].standardName || ""}}
规格:{{item.priceStockList[0].standardName || ""}}张
</view>
</view>
</block>
......
pages/vlog/productDetails/productDetails.vue
View file @ efbb4c50
<template>
<view class="content">
<view v-if="showBody">
<view class="item">
<image :src="productVo.priceStockList[0].imgList[0].url"></image>
<view class="title" style="padding-top: 35rpx;">
<text>规格:{{productVo.priceStockList[0].standardName || ""}}</text>
<text>规格: <text
v-if="productVo.priceStockList[0].standardName">{{productVo.priceStockList[0].standardName}}张</text></text>
<view style="margin-top: 30rpx;">
<text class="noprice">¥{{productVo.priceStockList[0].originalPrice || ""}}</text>
<text class="price">¥{{productVo.priceStockList[0].sellingPrice || ""}}</text>
......@@ -11,41 +13,45 @@
</view>
</view>
<view class="" style="display: flex;">
<u-section title="模板选择" :right="false" color="#303133"></u-section><text
style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
<u-section title="模板选择" :right="false" color="#303133"></u-section>
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<image src="../../../static/img/vlog/icon/fengexian.png" style="width: 100%;height: 15rpx;"></image>
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
<button type="default" class="btnn" :class="current===0?'active':'noactive'" @click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'" @click="current=1">内页</button>
<button type="default" class="btnn" :class="current===0?'active':'noactive'"
@click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'"
@click="current=1">内页</button>
</view>
<view v-if="current===0">
<view class="cover">
<view class="coverItem" v-for="(item,index) in imgList2" :key="index">
<image class="img" :src="item.url" mode="" @click="changeCover(item.url)"></image>
<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50">
</u-icon>
<image class="img" :src="item.url" @click="changeCover(item.url)"></image>
<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF"
size="50"></u-icon>
</view>
</view>
</view>
<view class="" v-else>
<view v-else>
<view class="cover">
<view class="coverItem" v-for="(item,index) in imgList3" :key="index">
<image class="img" :src="item.url" mode="" @click="changeinsidePages(item.url)"></image>
<image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image>
<u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF"
size="50"></u-icon>
</view>
</view>
</view>
<view style="display: flex;margin-top: 30rpx;">
<u-section title="详细参数" :right="false" color="#303133"></u-section><text
style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
<u-section title="详细参数" :right="false" color="#303133"></u-section>
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index"
style="width: 100%;border-radius: 10rpx;"></image>
<view class="bottom" @click="beginMaking">
上传照片制作
<view class="bottom" @click="beginMaking">上传照片制作</view>
</view>
<view v-else>
</view>
</view>
</template>
......@@ -53,6 +59,7 @@
export default {
data() {
return {
showBody: false,
productVo: {}, //产品详情
imgList1: [], //详情列表
imgList2: [], //封面列表
......@@ -78,7 +85,9 @@
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code === "00") {
this.showBody = true
this.productVo = res.data.productVo
uni.setStorageSync('productVo', this.productVo) //保存选择的商品信息
res.data.productVo.imgList.forEach(item => {
if (item.location === 5) {
this.imgList1.push(item)
......@@ -106,24 +115,34 @@
this.insidePages = url
},
beginMaking() {
// if (this.cover === "") {
// return uni.showModal({
// title: '提示',
// content: '请选择封面',
// });
// }
// if (this.insidePages === "") {
// return uni.showModal({
// title: '提示',
// content: '请选择内页',
// });
// }
this.$u.route({
url: 'pages/vlog/uploadPictures/uploadPictures',
params: {
cover: this.cover,
insidePages: this.insidePages
if (this.cover === "") {
return uni.showModal({
showCancel: false,
title: '提示',
content: '请选择封面',
});
}
if (this.insidePages === "") {
return uni.showModal({
showCancel: false,
title: '提示',
content: '请选择内页',
});
}
let coverInside = {
cover: {
imgName: '封面',
imgUrl: this.cover
},
inside: {
imgName: '封面',
imgUrl: this.insidePages
}
}
uni.setStorageSync('coverInside', coverInside)
let yeshu = this.productVo.priceStockList[0].standardName
this.$u.route({
url: 'pages/vlog/uploadPictures/uploadPictures?yeshu=' + yeshu
})
}
}
......
pages/vlog/shippingAddress/shippingAddress.vue 0 → 100644
View file @ efbb4c50
<template>
<view class="content">
<view class="cell">
<text>收件人</text>
<u-input v-model="address.name" :type="type" :border="border" placeholder="请输入收件人姓名" :clearable="false" />
</view>
<view class="cell">
<text>联系电话</text>
<u-input v-model="address.phone" :type="type" :border="border" placeholder="请输入联系电话" :clearable="false" />
</view>
<view class="cell">
<text>收货地址</text>
<u-input v-model="address.address" :type="type" :border="border" placeholder="请输入收货地址" :clearable="false" />
</view>
<view style="margin: 100upx auto;width: 30%;">
<u-button type="success" @click="baocun">保存</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
address: {
name: "", //姓名
phone: "", //联系电话
address: "" //地址
} //地址信息
}
},
onLoad(opction) { //代替 vue 里面的 created
this.address = opction
},
onReady() { //代替 vue 里面的 mounted
},
methods: {
baocun() { //保存收货地址
if (this.$u.test.mobile(this.address.phone)) { //手机号验证
let data = {
id: this.address.id,
name: this.address.name,
phone: this.address.phone,
address: this.address.address,
openid: uni.getStorageSync('openid')
}
this.$request('wechatUser/contact/updateContact', data).then(res => {
if (res.code == '00') { //保存成功后跳转
this.$u.route("pages/vlog/orderPay/orderPay")
uni.showToast({
title: '保存成功',
duration: 1000
});
}else{
uni.showModal({
showCancel: false,
title: '提示',
content: res.message,
});
}
})
} else {
uni.showModal({
showCancel: false,
title: '提示',
content: "请正确输入手机号!",
});
}
},
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 0 20rpx;
box-sizing: border-box;
margin: 0 auto;
}
.cell {
display: flex;
align-items: center;
height: 80upx;
line-height: 80upx;
border-bottom: 1upx solid #ccc;
text {
width: 20%;
margin-left: 30upx;
}
}
</style>
pages/vlog/u-avatar-cropper/u-avatar-cropper.vue
View file @ efbb4c50
......@@ -9,8 +9,7 @@
@touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
canvas-id="cropper"
id="cropper"
></canvas>
id="cropper"></canvas>
<canvas
class="cropper"
:disable-scroll="true"
......
pages/vlog/u-avatar-cropper/weCropper.js
View file @ efbb4c50
......@@ -866,7 +866,6 @@
width: width,
height: height
};
var task = function() {
return Promise.resolve();
};
......
pages/vlog/uploadPictures/uploadPictures.vue
View file @ efbb4c50
......@@ -5,15 +5,16 @@
<u-icon class="icon" name="plus-circle" size="80" color="#999999"></u-icon>
</view>
<view class="check">
已选{{checkList.length}}/24
已选{{checkList.length}}/{{maxImg}}
</view>
</view>
<view style="border: 1rpx dashed #ccc;opacity: 0.3;margin-top: 230rpx;"></view>
<view class="img">
<block v-for="(item,index) in imgList" :key="index">
<view class="imgItem" @click="changeImg(item,index)">
<image :src="item.url" mode=""></image>
<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon>
<image :src="imgUrl+item.url"></image>
<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50">
</u-icon>
</view>
</block>
</view>
......@@ -29,92 +30,126 @@
</view>
</template>
<script>
export default {
export default {
data() {
return {
maxImg:24,
imgList:[
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
],
checkList:[]
maxImg: "", //相册规格张数
imgList: [], //上传的图片列表
checkList: [], //选中的图片下标
}
},
onLoad(){//代替 vue 里面的 created
onLoad(opction) { //代替 vue 里面的 created
this.maxImg = opction.yeshu //获取相册规格
this.imgList = uni.getStorageSync("imgList")
this.checkList = uni.getStorageSync("checkList")
if (this.imgList === "") {
this.imgList = []
uni.setStorageSync("imgList", this.imgList)
}
if (this.checkList === "") {
this.checkList = []
uni.setStorageSync("checkList", this.checkList)
}
// 监听从裁剪页发布的事件，获得裁剪结果
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: 'http://www.example.com/upload',
var that = this
var url = ""
if (process.env.NODE_ENV === 'development') { //开发环境
url = "http://192.168.0.213:7888/"
} else {
url = "http://picture.pangdly.com/"
}
uni.uploadFile({ // s上传图片
url: url + 'upload/file/newUpload',
filePath: path,
name: 'file',
complete: (res) => {
console.log(res);
name: 'uploadFile',
header: {
'Content-Type': 'multipart/form-data;',
},
success: res => { //获取图片结果
let res1 = JSON.parse(res.data)
if (res1.code == "00") { //请求成功
let obj = {
url: res1.data,
check: 0
}
});
that.imgList.push(obj)
uni.setStorageSync("imgList", that.imgList)
} else {
uni.showModal({
title: '提示',
content: res1.message,
showCancel: false,
})
}
}
})
})
},
onReady() {//代替 vue 里面的 mounted
onReady() { //代替 vue 里面的 mounted
},
methods: {
confirm(){//确定提交
if(this.checkList.length<this.maxImg){
uni.showModal({title: '提示',content: '相册规格'+this.maxImg+"张,请按照标准选择确定",});
}else{
this.$u.route({
url:"pages/vlog/pictureFormat/pictureFormat"
})
}
confirm() { //确定提交
if (this.checkList.length !== this.maxImg * 1) {
return uni.showModal({
showCancel: false,
title: '提示',
content: '相册规格' + this.maxImg + "张,请按照标准选择",
});
}
this.$u.route("pages/vlog/pictureFormat/pictureFormat")
},
del(){//删除图片
del() { //删除图片
if (this.checkList.length === 0) {
uni.showModal({
showCancel: false,
title: '提示',
content: "当前未选中任何图片!",
});
} else {
uni.showModal({
title: '提示',
content: "确定要删除选中的图片吗?",
success: res => {
if (res.confirm) {
this.checkList.forEach(item => {
this.imgList.splice(item, 1)
})
this.checkList = []
uni.setStorageSync("checkList", this.checkList)
uni.setStorageSync("imgList", this.imgList)
}
}
});
}
},
changeImg(item,index){//选择图片
if(item.check===0){
if(this.checkList.length<this.maxImg){
item.check=1;
changeImg(item, index) { //选择图片
if (item.check === 0) {
if (this.checkList.length < this.maxImg) {
item.check = 1;
this.checkList.push(index)
}else{
uni.showModal({title: '提示',content: '最多选取'+this.maxImg+"张",});
uni.setStorageSync("checkList", this.checkList)
uni.setStorageSync("imgList", this.imgList)
} else {
uni.showModal({
showCancel: false,
title: '提示',
content: '最多选取' + this.maxImg + "张",
});
}
}else{
item.check=0;
this.checkList.splice(this.checkList.indexOf(index),1)
} else {
item.check = 0;
this.checkList.splice(this.checkList.indexOf(index), 1)
uni.setStorageSync("checkList", this.checkList)
uni.setStorageSync("imgList", this.imgList)
}
},
chooseAvatar() {
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
chooseAvatar() { //上传照片
this.$u.route({
// 关于此路径，请见下方"注意事项"
url:"pages/vlog/u-avatar-cropper/u-avatar-cropper",
// 内部已设置以下默认参数值，可不传这些参数
url: "pages/vlog/u-avatar-cropper/u-avatar-cropper",
params: {
// 输出图片宽高，单位px
destWidth: 1000,
......@@ -128,26 +163,97 @@ export default {
})
},
}
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;box-sizing: border-box;margin-bottom:100rpx;text-align: center;
.top{display: flex;position: fixed;top: 0;z-index: 10;background-color: #fff;width: 100%;padding-bottom: 20rpx;
.upload{height: 200rpx;width: 200rpx;border-radius: 20rpx;background-color: #ECECEC;
.icon{margin-top:60rpx;}
.content {
padding: 0 20rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
text-align: center;
.top {
display: flex;
position: fixed;
top: 0;
z-index: 10;
background-color: #fff;
width: 100%;
padding-bottom: 20rpx;
.upload {
height: 200rpx;
width: 200rpx;
border-radius: 20rpx;
background-color: #ECECEC;
.icon {
margin-top: 60rpx;
}
.check{display: inline-block;border-radius: 15rpx;background-color: #FFE600;width: 150rpx;height: 60rpx;line-height: 60rpx;margin-top: 70rpx;margin-left: 200rpx;}
}
.img{display: flex;flex-wrap: wrap;margin-top: 10rpx;
.imgItem{width: 33.33%;padding: 10rpx; position: relative;
image{width: 100%;height: 200rpx;border-radius: 10rpx;}
.icon{position: absolute;top: 10rpx;right: 10rpx;}
.check {
display: inline-block;
border-radius: 15rpx;
background-color: #FFE600;
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
margin-top: 70rpx;
margin-left: 200rpx;
}
}
.img {
display: flex;
flex-wrap: wrap;
margin-top: 10rpx;
.imgItem {
width: 33.33%;
padding: 10rpx;
position: relative;
image {
width: 100%;
height: 200rpx;
border-radius: 10rpx;
}
.icon {
position: absolute;
top: 10rpx;
right: 10rpx;
}
}
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 80rpx;
line-height: 80rpx;
right: 0;
display: flex;
justify-content: space-around;
background-color: #fff;
align-items: center;
view {
width: 35%;
border-radius: 10rpx;
height: 60rpx;
line-height: 60rpx;
}
.del {
background: #ccc;
}
.confirm {
background-color: #FFE600;
}
.bottom{position: fixed;bottom: 0;width: 100%;height: 80rpx;line-height: 80rpx; right: 0;display: flex;justify-content: space-around;background-color: #fff;align-items: center;
view{width: 35%;border-radius: 10rpx;height: 60rpx;line-height: 60rpx;}
.del{background: #ccc;}
.confirm{background-color: #FFE600;}
}
}
</style>
pages/vlog/vlogIndex/vlogIndex.vue
View file @ efbb4c50
......@@ -135,14 +135,12 @@
}
this.$request("distribution/vlog/vlogRegister", data).then(res => { //注册
if (res.code === "00") {
console.log("注册成功");
let data = {
userId: uni.getStorageSync("openid"),
action: "VLOG_DOWNLOAD"
}
this.$request("distribution/vlog/backflow", data).then(res => { //埋点
if (res.code === "00") {
console.log("埋点成功");
}
})
}
......@@ -152,7 +150,6 @@
uni.authorize({ //摄像头
scope: 'scope.camera',
success: (res) => {
console.log('摄像头已打开');
},
fail: (res) => {
uni.showModal({
......@@ -181,7 +178,6 @@
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: (res) => {
console.log('相册权限已打开');
},
fail: (res) => {
uni.showModal({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment