add.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <view class="container">
  3. <form @submit="onSubmit">
  4. <view class="page-block">
  5. <view class="content">
  6. <view class="cell flex flex-y-center">
  7. <view class="title-block required">
  8. <text>标题</text>
  9. </view>
  10. <view class="desc">
  11. <input type="num" :value="info.name" name="name" class="input-box" placeholder="请输入"
  12. placeholder-class="desc-placeholder">
  13. </view>
  14. </view>
  15. <view class="cell flex flex-y-center arr-r">
  16. <view class="title-block required">
  17. <text>跳转方式</text>
  18. </view>
  19. <view class="desc">
  20. <picker mode="selector" :range="printerAddrList" @change="onPrinterAddrChange">
  21. <view :class="[printerAddr?'':'desc-placeholder','input-box']">{{printerAddr || '请选择'}}
  22. </view>
  23. </picker>
  24. </view>
  25. </view>
  26. <view class="cell flex flex-y-center" v-if="device_type!=0">
  27. <view class="title-block requsired">
  28. <text>跳转链接</text>
  29. </view>
  30. <view class="desc">
  31. <input type="num" :value="info.url" name="url" class="input-box" placeholder="请输入"
  32. placeholder-class="desc-placeholder">
  33. </view>
  34. </view>
  35. <view class="cell flex flex-y-center">
  36. <view class="title-block requsired">
  37. <text>排序</text>
  38. </view>
  39. <view class="desc">
  40. <input type="number" :value="info.num" class="input-box" name='num' placeholder="请输入"
  41. placeholder-class="desc-placeholder">
  42. </view>
  43. </view>
  44. </view>
  45. <view class="icon-page" @click="ChooseImage">
  46. <view class="flex-y-center">
  47. 上传广告图<text style="color: red;font-size: 26rpx;">(图片尺寸300*300)</text>
  48. </view>
  49. <view class="icon_un flex-center">
  50. <image mode="aspectFit" :class="thumb?'icon_un_icons':'icon_un_icon'"
  51. :src="thumb?URL+thumb:'../../static/images/icon_18.png'" ></image>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="footer-bar">
  56. <view class="content flex flex-center" style="background: none;">
  57. <!-- <view class="btn">立即添加</view> -->
  58. <button class="btn" hover-class="none" form-type="submit">
  59. {{info.id?'修改轮播广告':'添加轮播广告'}}
  60. </button>
  61. </view>
  62. </view>
  63. </form>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. printerAddrList: [
  71. '关闭',
  72. '小程序','内部','外链','会员授权弹窗',
  73. ],
  74. printerAddr: '关闭',
  75. device_type: 0,
  76. tableType: "",
  77. store_id: "",
  78. info: {},id:'',
  79. type:0,
  80. thumb:"",
  81. URL:getApp().globalData.URL,
  82. imgid:"",
  83. }
  84. },
  85. onLoad(e) {
  86. if (e.id) {
  87. this.id = e.id;
  88. this.banner_info();
  89. }
  90. this.store_id = uni.getStorageSync("store_id");
  91. },
  92. methods: {
  93. banner_info(){
  94. this.request({
  95. url: 'Smdcshop/index_banner_info',
  96. data: {
  97. id:this.id
  98. }
  99. }).then(res => {
  100. if (res.code == 200 ) {
  101. this.info=res.data;
  102. this.imgid=res.data.thumb;
  103. this.thumb=res.data.thumbs;
  104. this.device_type=res.data.type;
  105. this.printerAddr=res.data.type==1?'小程序':res.data.type==2?'内部':res.data.type==3?'外链':res.data.type==4?'会员授权弹窗':'关闭'
  106. }
  107. })
  108. },
  109. ChooseImage(e) {
  110. let type = e.currentTarget.dataset.type;
  111. uni.chooseImage({
  112. count: 1,
  113. sizeType: ['original', 'compressed'],
  114. sourceType: ['album'], //从相册选择
  115. success: (res) => {
  116. console.log(res)
  117. res.tempFilePaths.forEach((v, i) => {
  118. this.Upload({
  119. url: "Smdcshop/upload",
  120. data: {
  121. url: v,
  122. type: "",
  123. token: "",
  124. admin_id: uni.getStorageSync("admin_id")
  125. }
  126. }).then(res => {
  127. console.log(res, "res")
  128. this.imgid = res.id;
  129. this.thumb = res.src;
  130. }).catch(err => {
  131. uni.showToast({
  132. title: err.message,
  133. icon: 'none'
  134. })
  135. });
  136. })
  137. },
  138. });
  139. },
  140. onPrinterAddrChange(e) {
  141. this.printerAddr = this.printerAddrList[e.detail.value];
  142. this.device_type = Number(e.detail.value);
  143. },
  144. onSubmit(e) {
  145. let params = {
  146. admin_id: uni.getStorageSync("admin_id"),
  147. thumb:this.imgid,
  148. num: e.detail.value.num,
  149. name: e.detail.value.name,
  150. type:this.device_type,
  151. url:e.detail.value.url,
  152. // appid:e.detail.value.appid
  153. },
  154. url;
  155. if (this.id) {
  156. params.id = this.id;
  157. url = "Smdcshop/index_banner_update"
  158. } else {
  159. url = 'Smdcshop/index_banner_add'
  160. }
  161. if (params.name == "") {
  162. uni.showToast({
  163. title: "请输入名称",
  164. icon: 'none'
  165. })
  166. return false
  167. }
  168. this.request({
  169. url,
  170. data: params
  171. }).then(res => {
  172. if (res.code == 200) {
  173. uni.showToast({
  174. title: res.message,
  175. icon: 'none'
  176. })
  177. setTimeout(() => {
  178. uni.navigateBack()
  179. }, 2000)
  180. }
  181. }).catch((res) => {
  182. uni.showToast({
  183. title: res.message,
  184. icon: 'none'
  185. })
  186. });
  187. },
  188. }
  189. }
  190. </script>
  191. <style>
  192. @import url("../../static/css/common.css");
  193. page {
  194. background-color: #F4F5F7;
  195. }
  196. .icon-page{
  197. padding: 20rpx;
  198. background: #FFFFFF;
  199. }
  200. .icon_un{
  201. width: 100%;
  202. height:400rpx;
  203. margin-top: 20px;
  204. text-align: center;
  205. }
  206. .icon_un_icons{
  207. width: 100%;
  208. height:300rpx;
  209. margin-top: 20px;
  210. }
  211. .icon_un_icon{
  212. width: 150rpx;
  213. height:150rpx;
  214. margin-top: 20px;
  215. }
  216. </style>