You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
11 KiB
351 lines
11 KiB
<template>
|
|
<view class="new_years">
|
|
<view class="img" @tap="onChange" :data-router="item.router_path" v-for="(item, index) in straddlen_list" :key="index">
|
|
<image :src="item.url" mode="widthFix"></image>
|
|
</view>
|
|
<view class="img positRel">
|
|
<image mode="widthFix" src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7d5d743994756ea894f7ac294c303a549f3eaf4c0.jpg"></image>
|
|
<view class="input input1" :style="'top:' + input1_top + 'rpx'">
|
|
<input type="text" class="input1" @input="bindUserName" />
|
|
<!-- <input type="text" class="input2" bindinput='bindNumber' />
|
|
<textarea name="" id="" cols="30" class="input3" rows="10" bindinput='bindOpinion'></textarea> -->
|
|
</view>
|
|
<view class="input input2" :style="'top:' + input2_top + 'rpx'">
|
|
<input type="text" class="input2" @input="bindNumber" />
|
|
</view>
|
|
<view class="input input3">
|
|
<textarea name="" class="text3" @input="bindOpinion"></textarea>
|
|
</view>
|
|
<image
|
|
src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7e7498337f91897c7e1bd41041b3c57643d4da926.png"
|
|
class="submit"
|
|
@tap.stop.prevent="onSubmit"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
import { http, httpUtil, login_check } from '../../../utils/util';
|
|
import { host } from '../../../Gdata';
|
|
export default {
|
|
data() {
|
|
return {
|
|
straddlen_list: [
|
|
{
|
|
id: 1,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad5dd76ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
|
|
},
|
|
{
|
|
id: 2,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad9b188ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
|
|
},
|
|
{
|
|
id: 3,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adc235bec9ccbf0d9d2160aa9df5baed8fd5236.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4266'
|
|
},
|
|
{
|
|
id: 4,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adf10ecec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
|
|
},
|
|
{
|
|
id: 5,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae147744ea45ce96dac01e01bd1272c5e0a212d.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4191'
|
|
},
|
|
{
|
|
id: 6,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae3fe584ea45ce96dac01e01bd1272c5e0a212d.jpg'
|
|
},
|
|
{
|
|
id: 7,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae5bfb74ea45ce96dac01e01bd1272c5e0a212d.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4265'
|
|
},
|
|
{
|
|
id: 8,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae9b83c4ea45ce96dac01e01bd1272c5e0a212d.jpg'
|
|
},
|
|
{
|
|
id: 9,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aeb107a4ea45ce96dac01e01bd1272c5e0a212d.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4239'
|
|
},
|
|
{
|
|
id: 10,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aee19f54ea45ce96dac01e01bd1272c5e0a212d.jpg'
|
|
},
|
|
{
|
|
id: 11,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af04e4abcbc9f3782865f83b94490981e992789.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4296'
|
|
},
|
|
{
|
|
id: 12,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af30d73bcbc9f3782865f83b94490981e992789.jpg'
|
|
},
|
|
{
|
|
id: 13,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af47235bcbc9f3782865f83b94490981e992789.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4276'
|
|
},
|
|
{
|
|
id: 14,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af7c267bcbc9f3782865f83b94490981e992789.jpg'
|
|
},
|
|
{
|
|
id: 15,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af99dacbcbc9f3782865f83b94490981e992789.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4301'
|
|
},
|
|
{
|
|
id: 16,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afd5a84bcbc9f3782865f83b94490981e992789.jpg'
|
|
},
|
|
{
|
|
id: 17,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afec8efbcbc9f3782865f83b94490981e992789.jpg',
|
|
router_path: '/pages/opera/show/show_detail?cycle_id=4306'
|
|
},
|
|
{
|
|
id: 18,
|
|
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6b01ff896db52cca6602afb21f90def085ebe24c.jpg'
|
|
}
|
|
],
|
|
form_list: {
|
|
activity_id: 37,
|
|
name: '',
|
|
mobile: '',
|
|
content: ''
|
|
},
|
|
input1_top: 100,
|
|
input2_top: 176
|
|
};
|
|
}
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/,
|
|
onLoad: function (options) {
|
|
let iphone_width = app.globalData.screenWidth;
|
|
console.log(iphone_width, '屏幕宽度');
|
|
|
|
if (iphone_width <= 320) {
|
|
console.log(320);
|
|
this.setData({
|
|
input1_top: 96,
|
|
input2_top: 166
|
|
});
|
|
} else {
|
|
if (iphone_width > 320 && iphone_width <= 375) {
|
|
console.log('320-375');
|
|
this.setData({
|
|
input1_top: 96,
|
|
input2_top: 172
|
|
});
|
|
} else {
|
|
if (iphone_width > 375 && iphone_width < 400) {
|
|
console.log('375-400');
|
|
this.setData({
|
|
input1_top: 102,
|
|
input2_top: 170
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady: function () {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow: function () {},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide: function () {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload: function () {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh: function () {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom: function () {},
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage: function () {
|
|
let title = '开心麻花有笑跨年攻略';
|
|
let imageUrl = 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cad2bba6e2b2fc1d12ae96520a9bbc7181b00e43c8b.jpg';
|
|
return {
|
|
//自定义转发内容
|
|
title,
|
|
imageUrl //不设置此字段时，默认截取当前页面作为展示的图片
|
|
};
|
|
},
|
|
methods: {
|
|
onChange(e) {
|
|
// console.log(e.currentTarget.dataset.router);
|
|
let url = e.currentTarget.dataset.router;
|
|
|
|
if (!url) {
|
|
return;
|
|
}
|
|
|
|
console.log(url);
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
},
|
|
|
|
bindUserName(e) {
|
|
console.log(e, 'bindUserName'); // let username=e.detail.value
|
|
|
|
this.form_list.name = e.detail.value;
|
|
},
|
|
|
|
bindNumber(e) {
|
|
console.log(e, 'bindNumber');
|
|
this.form_list.mobile = e.detail.value;
|
|
},
|
|
|
|
bindOpinion(e) {
|
|
console.log(e, 'bindOpinion');
|
|
this.form_list.content = e.detail.value;
|
|
},
|
|
|
|
onSubmit() {
|
|
if (!login_check()) {
|
|
return;
|
|
}
|
|
|
|
let { name, mobile, content } = this.form_list;
|
|
|
|
if (!name) {
|
|
uni.showToast({
|
|
title: '请输入姓名',
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!mobile) {
|
|
uni.showToast({
|
|
title: '请填写手机号',
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
var myreg = /^1[3456789]\d{9}$/;
|
|
|
|
if (!myreg.test(mobile)) {
|
|
uni.showToast({
|
|
title: '手机号错误',
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!content) {
|
|
uni.showToast({
|
|
title: '请填写你想说的话',
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
http('/api/v1/topic-reply', 'post', { ...this.form_list }).then((res) => {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
}); // console.log(this.data.form_list, '111111');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
/* pages/special/straddlen/new_years.wxss */
|
|
.img image {
|
|
width: 100%;
|
|
display: block;
|
|
margin-top: -1rpx;
|
|
}
|
|
|
|
.positRel {
|
|
position: relative;
|
|
}
|
|
|
|
.input {
|
|
/* transform: rotate(-3deg); */
|
|
}
|
|
|
|
.input input {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
/* border: 1px solid red; */
|
|
height: 40rpx;
|
|
}
|
|
|
|
.input.input1 {
|
|
width: 120rpx;
|
|
/* height: 75rpx; */
|
|
/* margin-bottom: 38rpx; */
|
|
/* margin-left: 68rpx; */
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 236rpx;
|
|
top: 100rpx;
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
.input.input2 {
|
|
width: 300rpx;
|
|
position: absolute;
|
|
left: 236rpx;
|
|
top: 175rpx;
|
|
/* padding-left: 10rpx; */
|
|
transform: rotate(-3deg);
|
|
text-align: center;
|
|
}
|
|
|
|
.input.input3 {
|
|
position: absolute;
|
|
left: 230rpx;
|
|
top: 330rpx;
|
|
}
|
|
|
|
.text3 {
|
|
width: 330rpx;
|
|
height: 110rpx;
|
|
/* border: 1px solid red; */
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
.img .submit {
|
|
position: absolute;
|
|
right: 60rpx;
|
|
bottom: 270rpx;
|
|
width: 160rpx;
|
|
height: 80rpx;
|
|
z-index: 10;
|
|
}
|
|
</style>
|